From b7957ccb35ad91ae48025de00ffca59da9343b1f Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Wed, 3 Apr 2024 01:42:04 +0200 Subject: [PATCH 01/30] filter students roles --- src/api/FetchStudentsList.ts | 5 ++-- .../studentFilters/StudentFiltersContent.tsx | 30 +++++++++++++++++++ src/components/students/StudentsList.tsx | 6 +++- .../getUserDetail/apiGetUserDetail.ts | 1 + 4 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/api/FetchStudentsList.ts b/src/api/FetchStudentsList.ts index 2f86ebe..7636062 100644 --- a/src/api/FetchStudentsList.ts +++ b/src/api/FetchStudentsList.ts @@ -1,9 +1,10 @@ import axios from "axios"; import { IStudentList } from "../interfaces/interfaces"; -export const FetchStudentsListHome = async () => { +export const FetchStudentsListHome = async (students: string) => { try { - const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home"); + // const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home"); + const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization="+students); return response.data } catch (e) { diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index ace588d..6c04679 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -4,11 +4,16 @@ import { useEffect, useState } from 'react'; const StudentFiltersContent: React.FC = () => { const [roles, setRoles] = useState([]); const [development, setDevelopment] = useState([]); + const [selectedRoles, setSelectedRoles] = useState([]); + const [students, setStudents] = useState([]); const urlRoles = 'https://itaperfils.eurecatacademy.org/api/v1/specialization/list'; const urlDevelopment = 'https://itaperfils.eurecatacademy.org/api/v1/development/list'; + const urlFilterStudents = + 'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization='; + const fetchData = ( url: string, @@ -32,6 +37,28 @@ const StudentFiltersContent: React.FC = () => { fetchData(urlDevelopment, setDevelopment); }, [urlDevelopment]); + const changeHandler = (role: string) => { + if (!selectedRoles.includes(role)) { + setSelectedRoles([...selectedRoles, role]); + } else { + setSelectedRoles(selectedRoles.filter((r) => r !== role)); + } + } + + useEffect(() => { + console.log('selectedRoles', selectedRoles); + if (selectedRoles.length > 0) { + const roles = selectedRoles.join(','); + //Here we have to save selectedRoles to state and use it in component StudentList.tsx + console.log('roles', `${urlFilterStudents}${roles}`); + fetchData(`${urlFilterStudents}${roles}`, setStudents); + } + }, [selectedRoles]); + + useEffect(() => { + console.log('students', students); + }, [students]); + return (

Filtros

@@ -46,6 +73,9 @@ const StudentFiltersContent: React.FC = () => { > changeHandler(role)} className="border-gray-500 checkbox-primary checkbox mr-2 rounded-md border-2" /> {role} diff --git a/src/components/students/StudentsList.tsx b/src/components/students/StudentsList.tsx index 4188d22..b68432a 100644 --- a/src/components/students/StudentsList.tsx +++ b/src/components/students/StudentsList.tsx @@ -8,13 +8,17 @@ const StudentsList: React.FC = () => { const isPanelOpen = useAppSelector( (state) => state.ShowUserReducer.isUserPanelOpen, ); + const filteredStudents = useAppSelector( + (state) => state.ShowUserReducer.filteredStudents, + ); const [students, setStudents] = useState(); useEffect(() => { const fetchStudents = async () => { try { - const studentsList = await FetchStudentsListHome(); + // const studentsList = await FetchStudentsListHome(); + const studentsList = await FetchStudentsListHome(filteredStudents.join(',')); setStudents(studentsList); } catch (error) { console.error('Error fetching students:', error); diff --git a/src/store/reducers/getUserDetail/apiGetUserDetail.ts b/src/store/reducers/getUserDetail/apiGetUserDetail.ts index 281a741..9913e6f 100644 --- a/src/store/reducers/getUserDetail/apiGetUserDetail.ts +++ b/src/store/reducers/getUserDetail/apiGetUserDetail.ts @@ -3,6 +3,7 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { isUserPanelOpen: false, + filteredStudents : [] } const showUserInfo = createSlice({ From 22bcf416674d4d4d358e6d31edb9182fe148704b Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Thu, 4 Apr 2024 00:33:34 +0200 Subject: [PATCH 02/30] filter --- src/api/FetchStudentsList.ts | 1 + src/components/studentFilters/StudentFiltersContent.tsx | 8 ++++++-- src/store/reducers/getUserDetail/apiGetUserDetail.ts | 5 +++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/api/FetchStudentsList.ts b/src/api/FetchStudentsList.ts index 7636062..4d7852f 100644 --- a/src/api/FetchStudentsList.ts +++ b/src/api/FetchStudentsList.ts @@ -2,6 +2,7 @@ import axios from "axios"; import { IStudentList } from "../interfaces/interfaces"; export const FetchStudentsListHome = async (students: string) => { + console.log('STUDENTSSS',students); try { // const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home"); const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization="+students); diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index 6c04679..e864af7 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -1,5 +1,6 @@ import axios from 'axios'; import { useEffect, useState } from 'react'; +import { FetchStudentsListHome } from '../../api/FetchStudentsList'; const StudentFiltersContent: React.FC = () => { const [roles, setRoles] = useState([]); @@ -38,11 +39,14 @@ const StudentFiltersContent: React.FC = () => { }, [urlDevelopment]); const changeHandler = (role: string) => { + let newSelectedRoles; if (!selectedRoles.includes(role)) { - setSelectedRoles([...selectedRoles, role]); + newSelectedRoles = [...selectedRoles, role]; } else { - setSelectedRoles(selectedRoles.filter((r) => r !== role)); + newSelectedRoles = selectedRoles.filter((r) => r !== role); } + setSelectedRoles(newSelectedRoles); + FetchStudentsListHome(newSelectedRoles.join(',')); } useEffect(() => { diff --git a/src/store/reducers/getUserDetail/apiGetUserDetail.ts b/src/store/reducers/getUserDetail/apiGetUserDetail.ts index 9913e6f..c4df116 100644 --- a/src/store/reducers/getUserDetail/apiGetUserDetail.ts +++ b/src/store/reducers/getUserDetail/apiGetUserDetail.ts @@ -10,8 +10,9 @@ const showUserInfo = createSlice({ name: "showUserReducer", initialState, reducers: { - toggleUserPanel: (state) => {state.isUserPanelOpen = !state.isUserPanelOpen} + toggleUserPanel: (state) => {state.isUserPanelOpen = !state.isUserPanelOpen}, + setFilteredStudents: (state, action) => {state.filteredStudents = action.payload} } }) -export const { toggleUserPanel } = showUserInfo.actions; +export const { toggleUserPanel, setFilteredStudents } = showUserInfo.actions; export default showUserInfo.reducer From 980fba3e15418d7dc7ccf38ffdf26f46d23c1516 Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Sun, 7 Apr 2024 16:39:51 +0200 Subject: [PATCH 03/30] filter done --- .../studentFilters/StudentFiltersContent.tsx | 21 +++++++++++-------- src/components/students/StudentsList.tsx | 4 ++-- .../getUserDetail/apiGetUserDetail.ts | 11 ++++++---- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index e864af7..e018ad3 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -1,8 +1,12 @@ import axios from 'axios'; +import { useDispatch } from 'react-redux'; import { useEffect, useState } from 'react'; +import { setFilteredStudents } from '../../../src/store/reducers/getUserDetail/apiGetUserDetail'; //Import the setFilteredStudents function from the appropriate file import { FetchStudentsListHome } from '../../api/FetchStudentsList'; + const StudentFiltersContent: React.FC = () => { + const dispatch = useDispatch(); const [roles, setRoles] = useState([]); const [development, setDevelopment] = useState([]); const [selectedRoles, setSelectedRoles] = useState([]); @@ -49,19 +53,18 @@ const StudentFiltersContent: React.FC = () => { FetchStudentsListHome(newSelectedRoles.join(',')); } + useEffect(() => { - console.log('selectedRoles', selectedRoles); - if (selectedRoles.length > 0) { + //console.log('selectedRoles', selectedRoles); + //if (selectedRoles.length > 0) { const roles = selectedRoles.join(','); - //Here we have to save selectedRoles to state and use it in component StudentList.tsx - console.log('roles', `${urlFilterStudents}${roles}`); - fetchData(`${urlFilterStudents}${roles}`, setStudents); - } + dispatch(setFilteredStudents(roles)); // Call the setFilteredStudents function with the appropriate arguments + /* console.log('roles', `${urlFilterStudents}${roles}`); + fetchData(`${urlFilterStudents}${roles}`, setStudents); */ + //} }, [selectedRoles]); - useEffect(() => { - console.log('students', students); - }, [students]); + // ... return (
diff --git a/src/components/students/StudentsList.tsx b/src/components/students/StudentsList.tsx index b68432a..e25d42b 100644 --- a/src/components/students/StudentsList.tsx +++ b/src/components/students/StudentsList.tsx @@ -18,14 +18,14 @@ const StudentsList: React.FC = () => { const fetchStudents = async () => { try { // const studentsList = await FetchStudentsListHome(); - const studentsList = await FetchStudentsListHome(filteredStudents.join(',')); + const studentsList = await FetchStudentsListHome(filteredStudents); setStudents(studentsList); } catch (error) { console.error('Error fetching students:', error); } }; fetchStudents(); - }, []); + }, [filteredStudents]); return (
{state.isUserPanelOpen = !state.isUserPanelOpen}, - setFilteredStudents: (state, action) => {state.filteredStudents = action.payload} + toggleUserPanel: (state) => { state.isUserPanelOpen = !state.isUserPanelOpen }, + setFilteredStudents: (state, action: PayloadAction) => { + state.filteredStudents = action.payload; + }, } }) export const { toggleUserPanel, setFilteredStudents } = showUserInfo.actions; From 3df2c2919aa6bbf11f06c743dd996f19c91e1ad9 Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Tue, 9 Apr 2024 23:00:48 +0200 Subject: [PATCH 04/30] add rules --- src/store/reducers/getUserDetail/apiGetUserDetail.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/store/reducers/getUserDetail/apiGetUserDetail.ts b/src/store/reducers/getUserDetail/apiGetUserDetail.ts index b698b66..cba6d86 100644 --- a/src/store/reducers/getUserDetail/apiGetUserDetail.ts +++ b/src/store/reducers/getUserDetail/apiGetUserDetail.ts @@ -1,17 +1,20 @@ - import { createSlice, PayloadAction } from "@reduxjs/toolkit"; // import { PayloadAction } from "@reduxjs/toolkit"; const initialState = { isUserPanelOpen: false, + filteredStudents: '' } const showUserInfo = createSlice({ name: "showUserReducer", initialState, reducers: { - toggleUserPanel: (state) => {state.isUserPanelOpen = !state.isUserPanelOpen} + toggleUserPanel: (state) => {state.isUserPanelOpen = !state.isUserPanelOpen}, + setFilteredStudents: (state, action: PayloadAction) => { + state.filteredStudents = action.payload; + } } }) -export const { toggleUserPanel } = showUserInfo.actions; -export default showUserInfo.reducer +export const { toggleUserPanel, setFilteredStudents } = showUserInfo.actions; +export default showUserInfo.reducer \ No newline at end of file From e48f74d1a4d244df73e6dd78cdb21502da0659ee Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Tue, 9 Apr 2024 23:32:37 +0200 Subject: [PATCH 05/30] role filtering --- .../studentFilters/StudentFiltersContent.tsx | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index 7ac91c3..c684a61 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -1,18 +1,24 @@ import axios from 'axios'; import { useDispatch } from 'react-redux'; import { useEffect, useState } from 'react'; -import { setFilteredStudents } from '../../../src/store/reducers/getUserDetail/apiGetUserDetail'; //Import the setFilteredStudents function from the appropriate file +import { setFilteredStudents } from '../../../src/store/reducers/getUserDetail/apiGetUserDetail'; import { FetchStudentsListHome } from '../../api/FetchStudentsList'; const StudentFiltersContent: React.FC = () => { + const dispatch = useDispatch(); const [roles, setRoles] = useState([]); const [development, setDevelopment] = useState([]); + const [selectedRoles, setSelectedRoles] = useState([]); + const [students, setStudents] = useState([]); + const urlRoles = 'https://itaperfils.eurecatacademy.org/api/v1/specialization/list' const urlDevelopment = 'https://itaperfils.eurecatacademy.org/api/v1/development/list'; + const urlFilterStudents = + 'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization='; const fetchData = ( url: string, @@ -36,6 +42,25 @@ const StudentFiltersContent: React.FC = () => { fetchData(urlDevelopment, setDevelopment); }, [urlDevelopment]); + const changeHandler = (role: string) => { + let newSelectedRoles; + if (!selectedRoles.includes(role)) { + newSelectedRoles = [...selectedRoles, role]; + } else { + newSelectedRoles = selectedRoles.filter((r) => r !== role); + } + setSelectedRoles(newSelectedRoles); + FetchStudentsListHome(newSelectedRoles.join(',')); + } + + + useEffect(() => { + //console.log('selectedRoles', selectedRoles); + const roles = selectedRoles.join(','); + dispatch(setFilteredStudents(roles)); // Call the setFilteredStudents function with the appropriate arguments + //console.log('roles', `${urlFilterStudents}${roles}`); + }, [selectedRoles]); + return (

Filtros

From 879035412f8cacc08deda20029468ecaf187c362 Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Mon, 15 Apr 2024 11:25:38 +0200 Subject: [PATCH 06/30] fix FetchStudentsList --- src/api/FetchStudentsList.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/api/FetchStudentsList.ts b/src/api/FetchStudentsList.ts index e9ff91c..1e2897d 100644 --- a/src/api/FetchStudentsList.ts +++ b/src/api/FetchStudentsList.ts @@ -2,13 +2,12 @@ import axios from 'axios' import { IStudentList } from '../interfaces/interfaces' export const FetchStudentsListHome = async (students: string) => { - console.log('STUDENTSSS',students); try { - // const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home"); - const response = await axios.get("https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization="+students); + const response = await axios.get(`https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization=${students}`); return response.data } catch (e) { - console.error(e); + /* console.error(e); */ + return null; } }; \ No newline at end of file From 2bd61942f9bc68f4f09c7b065599f5bc4cc946d9 Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Wed, 17 Apr 2024 11:17:02 +0200 Subject: [PATCH 07/30] change --- .../studentFilters/StudentFiltersContent.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index c684a61..dfb51c8 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -1,7 +1,7 @@ import axios from 'axios'; import { useDispatch } from 'react-redux'; import { useEffect, useState } from 'react'; -import { setFilteredStudents } from '../../../src/store/reducers/getUserDetail/apiGetUserDetail'; +import { setFilteredStudents } from '../../store/reducers/getUserDetail/apiGetUserDetail'; import { FetchStudentsListHome } from '../../api/FetchStudentsList'; @@ -10,16 +10,16 @@ const StudentFiltersContent: React.FC = () => { const [roles, setRoles] = useState([]); const [development, setDevelopment] = useState([]); const [selectedRoles, setSelectedRoles] = useState([]); - const [students, setStudents] = useState([]); + /* const [students, setStudents] = useState([]); */ const urlRoles = 'https://itaperfils.eurecatacademy.org/api/v1/specialization/list' const urlDevelopment = 'https://itaperfils.eurecatacademy.org/api/v1/development/list'; - const urlFilterStudents = + /* const urlFilterStudents = 'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization='; - + */ const fetchData = ( url: string, setData: React.Dispatch>, @@ -30,7 +30,7 @@ const StudentFiltersContent: React.FC = () => { setData(response.data) }) .catch((error) => { - console.error(error) + throw new Error(error) }) } From 38a8953c29f7a447242c8cc73d3b358187db4d17 Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Wed, 17 Apr 2024 11:54:41 +0200 Subject: [PATCH 08/30] fix eslint --- .../studentFilters/StudentFiltersContent.tsx | 14 ++++---------- .../reducers/getUserDetail/apiGetUserDetail.ts | 10 +++++++--- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index dfb51c8..f2682b1 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -10,16 +10,12 @@ const StudentFiltersContent: React.FC = () => { const [roles, setRoles] = useState([]); const [development, setDevelopment] = useState([]); const [selectedRoles, setSelectedRoles] = useState([]); - /* const [students, setStudents] = useState([]); */ - const urlRoles = 'https://itaperfils.eurecatacademy.org/api/v1/specialization/list' const urlDevelopment = 'https://itaperfils.eurecatacademy.org/api/v1/development/list'; - /* const urlFilterStudents = - 'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization='; - */ + const fetchData = ( url: string, setData: React.Dispatch>, @@ -55,11 +51,9 @@ const StudentFiltersContent: React.FC = () => { useEffect(() => { - //console.log('selectedRoles', selectedRoles); - const roles = selectedRoles.join(','); - dispatch(setFilteredStudents(roles)); // Call the setFilteredStudents function with the appropriate arguments - //console.log('roles', `${urlFilterStudents}${roles}`); - }, [selectedRoles]); + const rolesSlug = selectedRoles.join(','); + dispatch(setFilteredStudents(rolesSlug)); + }, [selectedRoles, dispatch]); return (
diff --git a/src/store/reducers/getUserDetail/apiGetUserDetail.ts b/src/store/reducers/getUserDetail/apiGetUserDetail.ts index cba6d86..b3c3813 100644 --- a/src/store/reducers/getUserDetail/apiGetUserDetail.ts +++ b/src/store/reducers/getUserDetail/apiGetUserDetail.ts @@ -1,5 +1,4 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; -// import { PayloadAction } from "@reduxjs/toolkit"; const initialState = { isUserPanelOpen: false, @@ -10,11 +9,16 @@ const showUserInfo = createSlice({ name: "showUserReducer", initialState, reducers: { - toggleUserPanel: (state) => {state.isUserPanelOpen = !state.isUserPanelOpen}, + toggleUserPanel: (state) => { + // eslint-disable-next-line no-param-reassign + state.isUserPanelOpen = !state.isUserPanelOpen; + }, setFilteredStudents: (state, action: PayloadAction) => { + // eslint-disable-next-line no-param-reassign state.filteredStudents = action.payload; } } }) + export const { toggleUserPanel, setFilteredStudents } = showUserInfo.actions; -export default showUserInfo.reducer \ No newline at end of file +export default showUserInfo.reducer; \ No newline at end of file From 24a47305a5e31158afa92662fdf84dff9cc384f5 Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Wed, 17 Apr 2024 12:00:04 +0200 Subject: [PATCH 09/30] hot fix --- src/components/students/StudentsList.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/students/StudentsList.tsx b/src/components/students/StudentsList.tsx index 4836990..fb904fe 100644 --- a/src/components/students/StudentsList.tsx +++ b/src/components/students/StudentsList.tsx @@ -12,14 +12,15 @@ const StudentsList: React.FC = () => { (state) => state.ShowUserReducer.filteredStudents, ); - const [students, setStudents] = useState() + const [students, setStudents] = useState() useEffect(() => { const fetchStudents = async () => { try { - // const studentsList = await FetchStudentsListHome(); const studentsList = await FetchStudentsListHome(filteredStudents); - setStudents(studentsList); + if (studentsList !== null) { + setStudents(studentsList); + } } catch (error) { // eslint-disable-next-line no-console console.error('Error fetching students:', error) From 25a27801255c4099ba52ec81102cd26216c9fcce Mon Sep 17 00:00:00 2001 From: Dar-ya218 Date: Wed, 17 Apr 2024 13:15:18 +0200 Subject: [PATCH 10/30] fix checkbox --- src/components/studentFilters/StudentFiltersContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/studentFilters/StudentFiltersContent.tsx b/src/components/studentFilters/StudentFiltersContent.tsx index f2682b1..6d9e85e 100644 --- a/src/components/studentFilters/StudentFiltersContent.tsx +++ b/src/components/studentFilters/StudentFiltersContent.tsx @@ -66,10 +66,10 @@ const StudentFiltersContent: React.FC = () => {