task(front/home): divide aulas por secção de disciplinas na página pr…

…incipal (#205) * front(typescript): export interface to after usage * front(home): divide selected classes by section * fix(front/home): height discipline section title
unb-mds · Feb 20, 2024 · ed6ba7b · ed6ba7b
1 parent 007a8cc
commit ed6ba7b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/web/app/contexts/ClassesToShowContext.tsx b/web/app/contexts/ClassesToShowContext.tsx
@@ -4,12 +4,12 @@ import { createContext, useState } from 'react';
 
 import { ClassValueType } from './SelectedClassesContext/types';
 
-interface ClassesToShowContextType {
+export interface ClassesToShowContextType {
     classesToShow: Array<ClassValueType>,
     setClassesToShow: (value: Array<ClassValueType>) => void;
 }
 
-interface ClassesToShowContextProviderPropsType {
+export interface ClassesToShowContextProviderPropsType {
     children: React.ReactNode
 }
 

diff --git a/web/app/schedules/home/page.tsx b/web/app/schedules/home/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import useSelectedClasses from '@/app/hooks/useSelectedClasses';
 import useClassesToShow from '@/app/hooks/useClassesToShow';
 
@@ -13,6 +13,33 @@ import ClickOutsideHandler from './handlers/ClickOutsideHandler';
 
 import ShowPopUpContentContextProvider from '@/app/contexts/ShowPopUpContentContext';
 
+import { ClassValueType } from '@/app/contexts/SelectedClassesContext/types';
+
+function DisciplineBlockJSX({ ...props }: {
+    index: number,
+    cls: ClassValueType,
+    classesToShow: ClassValueType[]
+}) {
+    let classAppearance;
+    for (let indexInner = 0; indexInner < props.classesToShow.length; indexInner++) {
+        if (props.classesToShow[indexInner].discipline.code === props.cls.discipline.code) {
+            classAppearance = indexInner;
+            break;
+        }
+    }
+
+    return (
+        <Fragment key={props.index}>
+            {props.index === classAppearance &&
+                <span className='flex justify-center items-center text-center rounded-md font-medium bg-primary bg-opacity-80 w-10/12 p-2'>
+                    {props.cls.discipline.name}
+                </span>
+            }
+            <DisciplineBox currentClass={props.cls} discipline={props.cls.discipline} />
+        </Fragment>
+    );
+}
+
 export default function Home() {
     const { classesToShow, setClassesToShow } = useClassesToShow();
     const { classesChange, selectedClasses } = useSelectedClasses();
@@ -31,9 +58,9 @@ export default function Home() {
             <ClickOutsideHandler refs={{ divAddClassRef, buttonAddDisciplineRef }}>
                 <AddDisciplineButton buttonAddDisciplineRef={buttonAddDisciplineRef} />
                 <div className={`flex flex-col items-center ${classesToShow.length ? '' : 'justify-center text-center'} gap-5 overflow-auto min-h-full max-h-full pb-2`}>
-                    {classesToShow.length ? classesToShow.map((cls, index) =>
-                        <DisciplineBox key={index} currentClass={cls} discipline={cls.discipline} />
-                    ) : 'Nenhuma disciplina escolhida no momento'}
+                    {classesToShow.length ? classesToShow.map((cls, index) => {
+                        return DisciplineBlockJSX({ index, cls, classesToShow });
+                    }) : 'Nenhuma disciplina escolhida no momento'}
                 </div>
 
                 <AsideSchedulePopUp divAddClassRef={divAddClassRef} />