diff --git a/packages/app/src/features/student/hooks/useStudent.tsx b/packages/app/src/features/student/hooks/useStudent.tsx index f24017d8..b8685e61 100644 --- a/packages/app/src/features/student/hooks/useStudent.tsx +++ b/packages/app/src/features/student/hooks/useStudent.tsx @@ -15,11 +15,12 @@ interface StudentsParams extends StudentParam { const useStudent = () => { const dispatch = useDispatch() const { addToast } = useToast() - const { studentParam, studentList, totalSize } = useSelector( + const { studentParam, studentList, totalSize, nextStop } = useSelector( (state: RootState) => ({ studentParam: state.studentParam, studentList: state.studentList.studentList, totalSize: state.studentList.totalSize, + nextStop: state.studentParam.nextStop, }) ) @@ -50,10 +51,8 @@ const useStudent = () => { totalSize?: number, last?: boolean ) => { - if (!students || !totalSize || !last) return - dispatch(actions.resetStudents()) - dispatch(actions.addStudents(students)) + dispatch(actions.addStudents(students || [])) dispatch(actions.setTotoalSize(totalSize)) if (last) dispatch(actions.nextStop()) } @@ -63,6 +62,7 @@ const useStudent = () => { totalSize, refetchStudents, setStudentList, + nextStop, } } diff --git a/packages/app/src/features/student/molecules/StudentList/index.tsx b/packages/app/src/features/student/molecules/StudentList/index.tsx index c8204ad4..0225cebb 100644 --- a/packages/app/src/features/student/molecules/StudentList/index.tsx +++ b/packages/app/src/features/student/molecules/StudentList/index.tsx @@ -8,7 +8,7 @@ import * as S from './style' const StudentList = () => { const router = useRouter() - const { studentList, totalSize } = useStudent() + const { studentList, totalSize, nextStop } = useStudent() const { observe } = useScrollObserver() const { onShow } = useModal() @@ -24,16 +24,17 @@ const StudentList = () => { - {!studentList.length && - Array(...Array(20)).map((_, idx) => ( - - ))} {studentList?.map((i) => ( onClick(i.id)} /> ))} - -
+ {!nextStop && + Array(...Array(10)).map((_, idx) => ( +
+ +
+ ))} + ) } diff --git a/packages/app/src/features/student/stores/studentListSlice.ts b/packages/app/src/features/student/stores/studentListSlice.ts index c3a4ce2c..f000ac18 100644 --- a/packages/app/src/features/student/stores/studentListSlice.ts +++ b/packages/app/src/features/student/stores/studentListSlice.ts @@ -3,11 +3,12 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit' interface InitialState { studentList: StudentType[] - totalSize?: number + totalSize: number } const initialState: InitialState = { studentList: [], + totalSize: 0, } const studentListSlice = createSlice({ @@ -20,8 +21,8 @@ const studentListSlice = createSlice({ resetStudents: (state) => { state.studentList = [] }, - setTotoalSize: (state, { payload }: PayloadAction) => { - state.totalSize = payload + setTotoalSize: (state, { payload }: PayloadAction) => { + state.totalSize = payload || 0 }, }, }) diff --git a/packages/app/src/features/student/stores/studentParamSlice.ts b/packages/app/src/features/student/stores/studentParamSlice.ts index a68cd4d0..cad46ee0 100644 --- a/packages/app/src/features/student/stores/studentParamSlice.ts +++ b/packages/app/src/features/student/stores/studentParamSlice.ts @@ -19,7 +19,7 @@ const initialState: InitialState = { techStacks: [], formOfEmployment: [], }, - page: 1, + page: 2, size: 20, isLoading: false, isReady: false, diff --git a/packages/shared/src/atoms/Skeleton/index.tsx b/packages/shared/src/atoms/Skeleton/index.tsx index ffe89452..0dca5fd7 100644 --- a/packages/shared/src/atoms/Skeleton/index.tsx +++ b/packages/shared/src/atoms/Skeleton/index.tsx @@ -27,7 +27,7 @@ interface TextProps { } export const SkeletonText = ({ - width, + width = '100%', height = '1em', marginRight, marginBottom, diff --git a/packages/shared/src/atoms/StudentCard/style.ts b/packages/shared/src/atoms/StudentCard/style.ts index a697de1d..f1f25345 100644 --- a/packages/shared/src/atoms/StudentCard/style.ts +++ b/packages/shared/src/atoms/StudentCard/style.ts @@ -78,6 +78,7 @@ export const UserInfo = styled.div` flex-direction: column; gap: 1rem; overflow: hidden; + width: 100%; @media (max-width: 41.5rem) { gap: 1.25rem;