refactor: improve accessibility, maintainability, scalability and UI/UX

web/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

web/app/components/AsideButton.tsx

@@ -3,20 +3,30 @@ import Image, { StaticImageData } from 'next/image';
 import Button from './Button';
 
 interface AsideButtonPropsType {
-    image: StaticImageData;
-    pageName: string;
-    innerRef?: (node: any) => void;
-    onClick?: () => void;
+  image: React.ReactNode;
+  pageName: string;
+  innerRef?: (node: any) => void;
+  onClick?: () => void;
 }
 
-
-export default function AsideButton({ image, pageName, innerRef, onClick }: AsideButtonPropsType) {
-    return (
-        <Button innerRef={innerRef} onClick={onClick} className='z-10 flex-col w-full !gap-1 !pb-2 !shadow-none !text-black' name={pageName}>
-            <Image
+export default function AsideButton({
+  image,
+  pageName,
+  innerRef,
+  onClick,
+}: AsideButtonPropsType) {
+  return (
+    <Button
+      innerRef={innerRef}
+      onClick={onClick}
+      className="z-10 flex-col w-full !gap-1 !pb-2 !shadow-none !text-black"
+      name={pageName}
+    >
+      {image}
+      {/* <Image
                 width={25} height={25}
                 src={image} alt={`ícone da página ${pageName}`}
-            />
-        </Button>
-    );
-}
+            /> */}
+    </Button>
+  );
+}

web/app/components/AsideSchedulePopUp/ClassInfoBox.tsx

@@ -7,47 +7,54 @@ import Image from 'next/image';
 
 import addIcon from '@/public/icons/add.jpg';
 import removeIcon from '@/public/icons/remove.jpg';
+import { twMerge } from 'tailwind-merge';
+import { FiPlus, FiMinus } from 'react-icons/fi';
 
 interface ClassInfoBoxPropsType extends HTMLProps<HTMLDivElement> {
-    currentDiscipline: DisciplineType,
-    currentClass: ClassType,
+  currentDiscipline: DisciplineType;
+  currentClass: ClassType;
 }
 
-export default function ClassInfoBox({ currentDiscipline, currentClass, ...props }: ClassInfoBoxPropsType) {
-    const { classesChange, selectedClasses } = useSelectedClasses();
-    const [selected, setSelected] = useState(false);
+export default function ClassInfoBox({
+  currentDiscipline,
+  currentClass,
+  ...props
+}: ClassInfoBoxPropsType) {
+  const { classesChange, selectedClasses } = useSelectedClasses();
+  const [selected, setSelected] = useState(false);
 
-    useEffect(() => {
-        if (selectedClasses.get(currentDiscipline.id)?.has(currentClass.id)) setSelected(true);
-        else setSelected(false);
-    }, [selectedClasses, classesChange, currentDiscipline, currentClass]);
+  useEffect(() => {
+    if (selectedClasses.get(currentDiscipline.id)?.has(currentClass.id))
+      setSelected(true);
+    else setSelected(false);
+  }, [selectedClasses, classesChange, currentDiscipline, currentClass]);
 
-    return (
-        <div
-            className={`grid grid-cols-7 ${selected ? 'bg-primary bg-opacity-40' : 'hover:bg-gray-300'} hover:bg-opacity-40 hover:cursor-pointer rounded-md py-1 px-2 ${props.className || ''}`}
-        >
-            <ClassInfo currentClass={{
-                class: currentClass,
-                discipline: {
-                    id: currentDiscipline.id,
-                    name: currentDiscipline.name,
-                    code: currentDiscipline.code
-                }
-            }} />
-            <button
-                onClick={props.onClick as MouseEventHandler<HTMLButtonElement> | undefined}
-                className='hover:cursor-pointer col-start-7 flex justify-center items-center'>
-                {selected ?
-                    <Image
-                        width={25} height={25}
-                        src={removeIcon} alt='ícone remover matéria'
-                    />
-                    : <Image
-                        width={25} height={25}
-                        src={addIcon} alt='ícone adicionar matéria'
-                    />
-                }
-            </button>
-        </div>
-    );
-}
+  return (
+    <div
+      className={twMerge(
+        'grid grid-cols-7 hover:bg-opacity-40 hover:cursor-pointer rounded-md py-1 px-2',
+        selected ? 'bg-primary bg-opacity-40' : 'hover:bg-gray-300',
+        props.className
+      )}
+    >
+      <ClassInfo
+        currentClass={{
+          class: currentClass,
+          discipline: {
+            id: currentDiscipline.id,
+            name: currentDiscipline.name,
+            code: currentDiscipline.code,
+          },
+        }}
+      />
+      <button
+        onClick={
+          props.onClick as MouseEventHandler<HTMLButtonElement> | undefined
+        }
+        className="hover:cursor-pointer col-start-7 flex justify-center items-center"
+      >
+        {selected ? <FiMinus size={24} /> : <FiPlus size={24} />}
+      </button>
+    </div>
+  );
+}

web/app/components/AsideSchedulePopUp/Form/InputForm.tsx

@@ -6,69 +6,90 @@ import Image from 'next/image';
 
 import searchIcon from '@/public/icons/search.jpg';
 
-import searchDiscipline, { DisciplineType } from '@/app/utils/api/searchDiscipline';
+import searchDiscipline, {
+  DisciplineType,
+} from '@/app/utils/api/searchDiscipline';
 
 import { FormData, FormType, InputFormPropsType } from '../types/types';
+import { FiSearch } from 'react-icons/fi';
 
 interface FormPropsType {
-    form: FormType,
-    handleSearch: (event: React.FormEvent<HTMLFormElement>) => Promise<void>,
-    inputRef: React.RefObject<HTMLInputElement>
+  form: FormType;
+  handleSearch: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+  inputRef: React.RefObject<HTMLInputElement>;
 }
 
 function Form(props: FormPropsType) {
-    const { formData, setFormData } = props.form;
-    const { handleSearch, inputRef } = props;
-
-    return (
-        <form className='flex items-center w-11/12 px-2 bg-white shadow-md rounded-xl' onSubmit={handleSearch}>
-            <input
-                type="text"
-                placeholder='Nome da matéria...'
-                value={formData.search}
-                onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                ref={inputRef}
-                className='h-14 p-2 w-full rounded-xl focus:outline-none'
-            />
-            <button type='submit' >
-                <Image 
-                    width={30} height={30}
-                    src={searchIcon} alt='ícone de pesquisa'
-                />
-            </button>
-        </form>
-    );
+  const { formData, setFormData } = props.form;
+  const { handleSearch, inputRef } = props;
+
+  return (
+    <form
+      className="flex items-center w-11/12 px-2 bg-white shadow-md rounded-xl"
+      onSubmit={handleSearch}
+    >
+      <input
+        type="text"
+        placeholder="Nome da matéria..."
+        value={formData.search}
+        onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+        ref={inputRef}
+        className="h-14 p-2 w-full rounded-xl focus:outline-none"
+      />
+      <button type="submit" className="p-2">
+        <FiSearch size={24} />
+        {/* <Image
+          width={30}
+          height={30}
+          src={searchIcon}
+          alt="ícone de pesquisa"
+        /> */}
+      </button>
+    </form>
+  );
 }
 
-async function makeDisciplineSearch(textSearch: string, year: string, period: string, setInfos: (infos: Array<DisciplineType>) => void) {
-    const data = await searchDiscipline(textSearch, year, period);
-    if (data) {
-        let infos: Array<DisciplineType> = [];
-        data.forEach(discipline => infos.push({ ...discipline, expanded: false }));
-        setInfos(infos);
-    }
+async function makeDisciplineSearch(
+  textSearch: string,
+  year: string,
+  period: string,
+  setInfos: (infos: Array<DisciplineType>) => void
+) {
+  const data = await searchDiscipline(textSearch, year, period);
+  if (data) {
+    let infos: Array<DisciplineType> = [];
+    data.forEach((discipline) =>
+      infos.push({ ...discipline, expanded: false })
+    );
+    setInfos(infos);
+  }
 }
 
-async function handleDisciplineSearch(formData: FormData, setInfos: (infos: Array<DisciplineType>) => void) {
-    const { search, year, period } = formData;
-    const textSearch = search.trim();
+async function handleDisciplineSearch(
+  formData: FormData,
+  setInfos: (infos: Array<DisciplineType>) => void
+) {
+  const { search, year, period } = formData;
+  const textSearch = search.trim();
 
-    if (!textSearch) toast.error('Escreva no nome da disciplina');
-    else if (!year || !period) toast.error('Escolha o ano/período');
-    else await makeDisciplineSearch(textSearch, year, period, setInfos);
+  if (!textSearch) toast.error('Escreva no nome da disciplina');
+  else if (!year || !period) toast.error('Escolha o ano/período');
+  else await makeDisciplineSearch(textSearch, year, period, setInfos);
 }
 
 export default function InputForm(props: InputFormPropsType) {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const { formData } = props.form;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { formData } = props.form;
 
-    async function handleSearch(event: React.FormEvent<HTMLFormElement>) {
-        event.preventDefault();
+  async function handleSearch(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
 
-        if (inputRef && inputRef.current) inputRef.current.blur();
+    if (inputRef && inputRef.current) inputRef.current.blur();
 
-        await handleDisciplineSearch(formData, props.setInfos);
-    }
+    await handleDisciplineSearch(formData, props.setInfos);
+  }
 
-    return <Form form={props.form} handleSearch={handleSearch} inputRef={inputRef} />;
-}
+  return (
+    <Form form={props.form} handleSearch={handleSearch} inputRef={inputRef} />
+  );
+}