Merge pull request #23 from roziqinkhoeru/main #build

`feat(school)` enhancement school

src/api/coreApi.ts

@@ -66,6 +66,6 @@ const baseQueryWithReauth: BaseQueryFn<
 export const coreApi = createApi({
   reducerPath: 'api',
   baseQuery: baseQueryWithReauth,
-  tagTypes: ['Auth', 'Profile', 'Student'],
+  tagTypes: ['Auth', 'Profile', 'Student', 'School'],
   endpoints: () => ({}),
 });

src/pages/School/components/SchoolTable.tsx

@@ -22,9 +22,10 @@ import {
   Trash2Icon,
 } from 'lucide-react';
 import AlertDelete from '../../../components/AlertDialog/AlertDelete';
+import { showErrorToast, showSuccessToast } from '../../../components/Toast';
+import { useDeleteSchoolMutation } from '../../../services/schoolApi';
 
-import { SchoolProps } from '../../../types';
-import schoolData from '../../../data/SCHOOL_DATA.json';
+import { School, SchoolTableProps } from '../../../types';
 
 function IndeterminateCheckbox({
   indeterminate,
@@ -48,23 +49,22 @@ function IndeterminateCheckbox({
   );
 }
 
-function SchoolTable() {
+function SchoolTable({ refetchSchool, school }: SchoolTableProps) {
   const [filter, setFilter] = useState('');
   const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([]);
   const [isOpenDeleteDialog, setIsOpenDeleteDialog] = useState(false);
   const [deleteId, setDeleteId] = useState<string>('');
-  const [isLoadingDelete, setIsLoadingDelete] = useState<boolean>(false);
   const [isLargeView, setIsLargeView] = useState<boolean>(
     window.innerWidth > 1024
   );
-  const data = useMemo(() => schoolData, []);
   const headerClass: Record<string, string> = {
     checkboxs: 'w-14 text-center',
     row_number: 'w-12',
   };
+  const [deleteSchool, { isLoading }] = useDeleteSchoolMutation();
 
-  const columnHelper = createColumnHelper<SchoolProps>();
+  const columnHelper = createColumnHelper<School>();
   const defaultColumns = useMemo(
     () => [
       columnHelper.display({
@@ -149,15 +149,15 @@ function SchoolTable() {
   );
 
   const table = useReactTable({
-    data,
+    data: school,
     columns: defaultColumns,
     state: {
       globalFilter: filter,
       rowSelection,
       sorting,
     },
     enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel<SchoolProps>(),
+    getCoreRowModel: getCoreRowModel<School>(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -179,14 +179,17 @@ function SchoolTable() {
     setIsOpenDeleteDialog(false);
   };
 
-  const handleDelete = () => {
-    setIsLoadingDelete(true);
-    console.log(`delete id:${deleteId}...`);
-    setTimeout(() => {
-      console.log('delete success');
-      setIsLoadingDelete(false);
-      setIsOpenDeleteDialog(false);
-    }, 3000);
+  const handleDelete = async () => {
+    try {
+      const responseDelete = await deleteSchool({ id: deleteId }).unwrap();
+      if (responseDelete.success) {
+        showSuccessToast('Berhasil menghapus data siswa');
+        refetchSchool();
+      }
+    } catch (error) {
+      showErrorToast('Gagal menghapus data siswa');
+    }
+    setIsOpenDeleteDialog(false);
   };
 
   useEffect(() => {
@@ -195,6 +198,23 @@ function SchoolTable() {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
+  const handleSelectedDelete = async (school: School[]) => {
+    const schoolId = school[0]._id;
+    if (school.length === 1) {
+      try {
+        const responseDelete = await deleteSchool({ id: schoolId }).unwrap();
+        if (responseDelete.success) {
+          showSuccessToast('Berhasil menghapus data siswa');
+          refetchSchool();
+        }
+      } catch (error) {
+        showErrorToast('Gagal menghapus data siswa');
+      }
+    } else {
+      showErrorToast('Gagal menghapus data siswa');
+    }
+    table.setRowSelection({});
+  };
 
   return (
     <div className="">
@@ -323,7 +343,7 @@ function SchoolTable() {
               </div>
             </div>
             {/* total data */}
-            <p className="text-gray-500 ml-3">dari {data.length} data</p>
+            <p className="text-gray-500 ml-3">dari {school?.length} data</p>
           </div>
           <div className="flex space-x-3">
             {isLargeView && (
@@ -386,11 +406,11 @@ function SchoolTable() {
             <button
               className="px-3 py-1 font-medium rounded-full border border-red-500 flex items-center bg-red-500 text-gray-50 disabled:bg-red-300 disabled:border-red-300 disabled:cursor-not-allowed"
               onClick={() => {
-                const selectedIds = Object.keys(rowSelection);
-                const newData = data.filter(
-                  (item) => !selectedIds.includes(item._id)
+                const selectedRow = table.getSelectedRowModel().flatRows;
+                const selectedRowOriginal = selectedRow.map(
+                  (row) => row.original
                 );
-                console.log('newData', newData);
+                handleSelectedDelete(selectedRowOriginal);
               }}>
               <Trash2Icon
                 size={16}
@@ -406,7 +426,7 @@ function SchoolTable() {
       <AlertDelete
         isOpen={isOpenDeleteDialog}
         message="sekolah"
-        isLoading={isLoadingDelete}
+        isLoading={isLoading}
         onCancel={closeDeleteDialog}
         onConfirm={handleDelete}
       />

src/pages/School/index.tsx

@@ -1,12 +1,72 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import SchoolTable from './components/SchoolTable';
 import Breadcrumb from '../../components/Breadcrumb';
 import { useAppDispatch } from '../../app/hooks';
 import { setBreadcrumb } from '../../features/breadcrumbSlice';
 import HeaderContainer from '../../components/HeaderContainer';
+import { useGetSchoolMutation } from '../../services/schoolApi';
+import { showErrorToast } from '../../components/Toast';
 
 function School() {
+  const refInitMount = useRef(true);
   const dispatch = useAppDispatch();
+  const [getSchool, { isLoading, isSuccess, isError, data: school }] =
+    useGetSchoolMutation();
+  let content;
+
+  const fetchSchool = async () => {
+    try {
+      await getSchool({
+        search: '',
+        page: 1,
+        limit: 100,
+      });
+    } catch (error) {
+      showErrorToast('Gagal mengambil data siswa');
+    }
+  };
+
+  if (isLoading) {
+    content = (
+      <div>
+        <svg
+          className="animate-spin-fast -ml-1 mr-3 h-5 w-5 text-neutral-800 inline-block"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24">
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+    );
+  } else if (isSuccess) {
+    content = (
+      <SchoolTable
+        school={school.data}
+        refetchSchool={fetchSchool}
+      />
+    );
+  } else if (isError) {
+    content = (
+      <div className="text-center">
+        <p className="text-neutral-500 text-sm">Gagal memuat data sekolah</p>
+        <button
+          onClick={fetchSchool}
+          className="mt-2 px-4 py-2 rounded-lg bg-primary-600 text-white">
+          Coba Lagi
+        </button>
+      </div>
+    );
+  }
 
   useEffect(() => {
     const newBreadcrumb = [
@@ -19,6 +79,14 @@ function School() {
     dispatch(setBreadcrumb(newBreadcrumb));
   }, [dispatch]);
 
+  useEffect(() => {
+    if (refInitMount.current) {
+      refInitMount.current = false;
+      return;
+    }
+    fetchSchool();
+  }, []);
+
   return (
     <div className="">
       <div className="mb-6">
@@ -30,9 +98,7 @@ function School() {
           btnText="Tambah Sekolah"
         />
       </div>
-      <div className="bg-white p-5 rounded-xl">
-        <SchoolTable />
-      </div>
+      <div className="bg-white p-5 rounded-xl">{content}</div>
     </div>
   );
 }

src/pages/Students/RTK/Students.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { PlusIcon } from 'lucide-react';
 import StudentsTable from './components/StudentsTable';
 import Breadcrumb from '../../../components/Breadcrumb';
 import { useAppDispatch } from '../../../app/hooks';
 import { useGetStudentMutation } from '../../../services/studentApi';
 import { showErrorToast } from '../../../components/Toast';
 import { setBreadcrumb } from '../../../features/breadcrumbSlice';
+import HeaderContainer from '../../../components/HeaderContainer';
 
 function Students() {
   const refInitMount = useRef(true);
@@ -81,25 +80,12 @@ function Students() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <div className="flex justify-between">
-          <div className="">
-            <h5 className="font-semibold text-3xl mb-1.5">Siswa</h5>
-            <p className="text-gray-500">Lihat daftar siswa yang terdaftar.</p>
-          </div>
-          <div className="">
-            <Link
-              type="button"
-              className="leading-normal ml-4 inline-flex justify-center rounded-lg border border-transparent bg-violet-600 px-4 py-2.5 text-sm font-medium text-gray-100 hover:bg-violet-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-violet-500 disabled:focus-visible:ring-2 disabled:focus-visible:ring-violet-500 disabled:focus-visible:ring-offset-2"
-              to="/student/add">
-              <PlusIcon
-                size={20}
-                className="mr-1.5 stroke-current"
-                strokeWidth={2}
-              />
-              Tambah Siswa
-            </Link>
-          </div>
-        </div>
+        <HeaderContainer
+          title="Siswa"
+          subtitle="Lihat daftar siswa yang terdaftar."
+          btnHref="/student/add"
+          btnText="Tambah Siswa"
+        />
       </div>
       <div className="bg-white p-5 rounded-xl">{content}</div>
     </div>

src/pages/Students/RTK/components/StudentsTable.tsx

@@ -24,7 +24,7 @@ import AlertDelete from '../../../../components/AlertDialog/AlertDelete';
 import { showErrorToast, showSuccessToast } from '../../../../components/Toast';
 import { useDeleteStudentMutation } from '../../../../services/studentApi';
 
-import { Student, StudentTable } from '../../../../types';
+import { Student, StudentTableProps } from '../../../../types';
 
 function IndeterminateCheckbox({
   indeterminate,
@@ -48,7 +48,7 @@ function IndeterminateCheckbox({
   );
 }
 
-function StudentsTable({ student, refetchStudent }: StudentTable) {
+function StudentsTable({ student, refetchStudent }: StudentTableProps) {
   const [filter, setFilter] = useState('');
   const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -201,7 +201,7 @@ function StudentsTable({ student, refetchStudent }: StudentTable) {
     }
     setIsOpenDeleteDialog(false);
   };
-  const handleSlectedDelete = async (student: Student[]) => {
+  const handleSelectedDelete = async (student: Student[]) => {
     const studentId = student[0]._id;
     if (student.length === 1) {
       try {
@@ -353,7 +353,7 @@ function StudentsTable({ student, refetchStudent }: StudentTable) {
               </div>
             </div>
             {/* total data */}
-            <p className="text-gray-500 ml-3">dari {student.length} data</p>
+            <p className="text-gray-500 ml-3">dari {student?.length} data</p>
           </div>
           <div className="flex space-x-3">
             {isLargeView && (
@@ -420,7 +420,7 @@ function StudentsTable({ student, refetchStudent }: StudentTable) {
                 const selectedRowOriginal = selectedRow.map(
                   (row) => row.original
                 );
-                handleSlectedDelete(selectedRowOriginal);
+                handleSelectedDelete(selectedRowOriginal);
               }}>
               <Trash2Icon
                 size={16}