feat: 🚸 adds confirmation dialog before user sends error report (#449)

* feat: 🚸 adds confirmation dialog before user sends error report * fix: 🩹 wrong texts * Update src/locales/en.json Co-authored-by: Štefan Baebler <stefan.baebler@gmail.com> * Update Italian translation for error reporting confirmation dialog. Until proper translation we eill display in English. * Update src/locales/it.json Co-authored-by: Štefan Baebler <stefan.baebler@gmail.com> * Update src/components/DoctorCard/ReportError/index.js Co-authored-by: Štefan Baebler <stefan.baebler@gmail.com> * fix: 🐛 no formData Includes major refactoring. * feat: ✨ adds better user experience if error happens * fix: 💄 form has no padding * feat: 🚸 Add required attribute to form inputs and implement reset functionality --------- Co-authored-by: Štefan Baebler <stefan.baebler@gmail.com>
sledilnik · Feb 29, 2024 · 4dc0300 · 4dc0300
1 parent 67939af
commit 4dc0300
Show file tree

Hide file tree

Showing 9 changed files with 496 additions and 204 deletions.
diff --git a/src/components/DoctorCard/PageInfo/index.js b/src/components/DoctorCard/PageInfo/index.js
@@ -45,6 +45,7 @@ const PageInfo = function PageInfo({ doctor }) {
 
   const [isEditing, setIsEditing] = useState(isReportError);
   const [message, setMessage] = useState('');
+  const [isError, setIsError] = useState(false);
 
   const reportError = () => {
     setIsEditing(true);
@@ -71,6 +72,8 @@ const PageInfo = function PageInfo({ doctor }) {
         doctorFormData={doctorFormData}
         setIsEditing={setIsEditing}
         setMessage={setMessage}
+        isError={isError}
+        setIsError={setIsError}
       />
     );
   }
@@ -125,11 +128,16 @@ const PageInfo = function PageInfo({ doctor }) {
           </Stack>
         </Stack>
 
-        {message && (
+        {!isError && message ? (
           <Alert sx={{ marginTop: '1rem' }} severity="success">
             {message}
           </Alert>
-        )}
+        ) : null}
+        {isError && message ? (
+          <Alert sx={{ marginTop: '1rem' }} severity="error">
+            {message}
+          </Alert>
+        ) : null}
         <Styled.PageInfo.LinksMenuWrapper>
           {doctor.website && <WebsiteLinks website={doctor.website} />}
           {doctor.phone && <PhoneLinks phone={doctor.phone} />}

diff --git a/src/components/DoctorCard/ReportError/InlineEdit.js b/src/components/DoctorCard/ReportError/InlineEdit.js
@@ -1,28 +1,27 @@
 import PropTypes from 'prop-types';
 import { t } from 'i18next';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import * as Styled from './styles';
 
-export const TextareaEdit = function TextareaEdit({ name, value, setValue, placeholder }) {
-  const [editingValue, setEditingValue] = useState(value);
-
-  const onChange = event => setEditingValue(event.target.value);
+export const TextareaEdit = function TextareaEdit({
+  name,
+  value,
+  setValue,
+  placeholder,
+  id,
+  label,
+  required = undefined,
+}) {
+  const onChange = event => setValue(event.target.value);
+  const onBlur = event => setValue(event.target.value);
 
   const onKeyDown = event => {
     if (event.key === 'Enter' || event.key === 'Escape') {
       event.target.blur();
     }
   };
 
-  const onBlur = event => {
-    if (event.target.value.trim() === '') {
-      setEditingValue(value);
-    } else {
-      setValue(event.target.value);
-    }
-  };
-
   const textareaRef = useRef();
   const height = textareaRef.current?.scrollHeight;
 
@@ -34,77 +33,96 @@ export const TextareaEdit = function TextareaEdit({ name, value, setValue, place
   }, [height]);
 
   return (
-    <Styled.InlineEdit.Textarea
-      rows={1}
-      aria-label={name}
-      name={name}
-      value={editingValue}
-      onBlur={onBlur}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-      ref={textareaRef}
-      placeholder={placeholder}
-    />
+    <Styled.InlineEdit.Wrapper>
+      <Styled.InlineEdit.LabelSrOnly htmlFor={id}>{label || name}</Styled.InlineEdit.LabelSrOnly>
+      <Styled.InlineEdit.Textarea
+        rows={1}
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        ref={textareaRef}
+        placeholder={placeholder}
+        required={required}
+      />
+    </Styled.InlineEdit.Wrapper>
   );
 };
 
-export const SelectEdit = function SelectEdit({ name, value, setValue }) {
+export const SelectEdit = function SelectEdit({
+  name,
+  value,
+  setValue,
+  label,
+  id,
+  required = undefined,
+}) {
   const values = [
     // csv file has values "y" and "n"
     { k: 'n', v: t('rejects').toUpperCase() },
     { k: 'y', v: t('accepts').toUpperCase() },
   ];
 
-  const [editingValue, setEditingValue] = useState(value);
-
-  const onChange = event => setEditingValue(event.target.value);
+  const onChange = event => setValue(event.target.value);
+  const onBlur = event => setValue(event.target.value);
 
   const onKeyDown = event => {
     if (event.key === 'Enter' || event.key === 'Escape') {
       event.target.blur();
     }
   };
 
-  const onBlur = event => {
-    if (event.target.value.trim() === '') {
-      setEditingValue(value);
-    } else {
-      setValue(event.target.value);
-    }
-  };
-
   return (
-    <Styled.InlineEdit.Select
-      type="text"
-      aria-label={name}
-      name={name}
-      value={editingValue}
-      onBlur={onBlur}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-    >
-      {values.map(({ k, v }) => (
-        <option key={k} value={k}>
-          {v}
-        </option>
-      ))}
-    </Styled.InlineEdit.Select>
+    <Styled.InlineEdit.Wrapper>
+      <Styled.InlineEdit.LabelSrOnly htmlFor={id}>{label || name}</Styled.InlineEdit.LabelSrOnly>
+      <Styled.InlineEdit.Select
+        type="text"
+        id={id}
+        name={name}
+        value={value}
+        onBlur={onBlur}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        required={required}
+      >
+        {values.map(({ k, v }) => (
+          <option key={k} value={k}>
+            {v}
+          </option>
+        ))}
+      </Styled.InlineEdit.Select>
+    </Styled.InlineEdit.Wrapper>
   );
 };
 
 TextareaEdit.defaultProps = {
   placeholder: 'placeholder',
+  label: '',
+  required: undefined,
 };
 
 TextareaEdit.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   setValue: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  label: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  required: true || undefined,
+};
+
+SelectEdit.defaultProps = {
+  label: '',
+  required: undefined,
 };
 
 SelectEdit.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   setValue: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  required: true || undefined,
 };