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,26 @@ 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
-                width={25} height={25}
-                src={image} alt={`ícone da página ${pageName}`}
-            />
-        </Button>
-    );
-}
+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}
+    </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/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/DisciplineFragment.tsx

@@ -6,69 +6,82 @@ import { ClassType, DisciplineType } from '@/app/utils/api/searchDiscipline';
 
 import expand_more from '@/public/icons/expand_more.png';
 import expand_less from '@/public/icons/expand_less.png';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 
 interface DisciplineFragmentPropsType {
-    index: number,
-    discipline: DisciplineType,
-    disciplineInfos: {
-        searchedDisciplineInfos: Array<DisciplineType>,
-        setSearchedDisciplineInfos: React.Dispatch<React.SetStateAction<DisciplineType[]>>
-    }
-    handleSelectClass: (discipline: DisciplineType, cls: ClassType) => void
+  index: number;
+  discipline: DisciplineType;
+  disciplineInfos: {
+    searchedDisciplineInfos: Array<DisciplineType>;
+    setSearchedDisciplineInfos: React.Dispatch<
+      React.SetStateAction<DisciplineType[]>
+    >;
+  };
+  handleSelectClass: (discipline: DisciplineType, cls: ClassType) => void;
 }
 
-function DisciplineFragmentJSX({ handleDisciplineToggle, ...props }: {
-    handleDisciplineToggle: (index: number) => void,
-    props: DisciplineFragmentPropsType
+function DisciplineFragmentJSX({
+  handleDisciplineToggle,
+  ...props
+}: {
+  handleDisciplineToggle: (index: number) => void;
+  props: DisciplineFragmentPropsType;
 }) {
-    const { index, discipline, handleSelectClass } = props.props;
+  const { index, discipline, handleSelectClass } = props.props;
 
-    return (
-        <Fragment>
-            <button
-                onClick={() => handleDisciplineToggle(index)}
-                className='flex items-center gap-3 relative'
-            >
-                <Image
-                    className='absolute left-0'
-                    height={24} width={24}
-                    src={discipline.expanded ? expand_more : expand_less} alt="expand icon" />
-                <span className='font-semibold text-left pl-6'>
-                    {discipline.name} - {discipline.code}
-                </span>
-            </button>
-            {discipline.expanded &&
-                <div className='flex flex-col gap-2'>
-                    {discipline.classes.map((cls, index) =>
-                        <ClassInfoBox
-                            key={index} currentClass={cls} currentDiscipline={discipline}
-                            onClick={() => handleSelectClass(discipline, cls)}
-                        />
-                    )}
-                </div>
-            }
-        </Fragment>
-    );
+  return (
+    <Fragment>
+      <button
+        onClick={() => handleDisciplineToggle(index)}
+        className="flex items-center gap-2 relative"
+      >
+        {discipline.expanded ? (
+          <FiChevronUp size={18} />
+        ) : (
+          <FiChevronDown size={18} />
+        )}
+
+        <span className="font-semibold text-left">
+          {discipline.name} - {discipline.code}
+        </span>
+      </button>
+      {discipline.expanded && (
+        <div className="flex flex-col gap-2">
+          {discipline.classes.map((cls, index) => (
+            <ClassInfoBox
+              key={index}
+              currentClass={cls}
+              currentDiscipline={discipline}
+              onClick={() => handleSelectClass(discipline, cls)}
+            />
+          ))}
+        </div>
+      )}
+    </Fragment>
+  );
 }
 
 export default function DisciplineFragment(props: DisciplineFragmentPropsType) {
-    const { searchedDisciplineInfos, setSearchedDisciplineInfos } = props.disciplineInfos;
+  const { searchedDisciplineInfos, setSearchedDisciplineInfos } =
+    props.disciplineInfos;
 
-    function handleDisciplineToggle(index: number) {
-        let newInfo: Array<DisciplineType> = [];
-        searchedDisciplineInfos.forEach((discipline, number) => {
-            if (number != index) newInfo.push({
-                ...discipline,
-                expanded: false
-            });
-            else newInfo.push({
-                ...discipline,
-                expanded: !discipline.expanded
-            });
+  function handleDisciplineToggle(index: number) {
+    let newInfo: Array<DisciplineType> = [];
+    searchedDisciplineInfos.forEach((discipline, number) => {
+      if (number != index)
+        newInfo.push({
+          ...discipline,
+          expanded: false,
+        });
+      else
+        newInfo.push({
+          ...discipline,
+          expanded: !discipline.expanded,
         });
+    });
 
-        setSearchedDisciplineInfos(newInfo);
-    }
+    setSearchedDisciplineInfos(newInfo);
+  }
 
-    return DisciplineFragmentJSX({ handleDisciplineToggle, props });
-}
+  return DisciplineFragmentJSX({ handleDisciplineToggle, props });
+}