Merge pull request #22 from roziqinkhoeru/main

`refactor` single responsibility principle
educational-game-project · Jan 26, 2024 · c3accaf · c3accaf
2 parents ff912d9 + 328f66e
commit c3accaf
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 79 deletions.
diff --git a/src/components/HeaderContainer.tsx b/src/components/HeaderContainer.tsx
@@ -0,0 +1,37 @@
+import { PlusIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+import { HeaderContainerProps } from '../types';
+
+function HeaderContainer({
+  title,
+  subtitle,
+  btnHref,
+  btnText,
+}: HeaderContainerProps) {
+  return (
+    <div className="flex justify-between">
+      <div className="">
+        <h5 className="font-semibold text-3xl mb-1.5">{title}</h5>
+        <p className="text-gray-500">{subtitle}</p>
+      </div>
+      {btnHref && btnText && (
+        <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={btnHref}>
+            <PlusIcon
+              size={20}
+              className="mr-1.5 stroke-current"
+              strokeWidth={2}
+            />
+            {btnText}
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default HeaderContainer;
diff --git a/src/pages/Admin/index.tsx b/src/pages/Admin/index.tsx
@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import { PlusIcon } from 'lucide-react';
 import AdminTable from './components/AdminTable';
 import Breadcrumb from '../../components/Breadcrumb';
 import { useAppDispatch } from '../../app/hooks';
 import { setBreadcrumb } from '../../features/breadcrumbSlice';
+import HeaderContainer from '../../components/HeaderContainer';
 
 function Admin() {
   const dispatch = useAppDispatch();
@@ -24,27 +23,12 @@ function Admin() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <div className="flex justify-between">
-          <div className="">
-            <h5 className="font-semibold text-3xl mb-1.5">Admin</h5>
-            <p className="text-gray-500">
-              Kelola admin yang dapat mengakses dashboard.
-            </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="/admin/add">
-              <PlusIcon
-                size={20}
-                className="mr-1.5 stroke-current"
-                strokeWidth={2}
-              />
-              Tambah Admin
-            </Link>
-          </div>
-        </div>
+        <HeaderContainer
+          title="Admin"
+          subtitle="Kelola admin yang dapat mengakses dashboard."
+          btnHref="/admin/add"
+          btnText="Tambah Admin"
+        />
       </div>
       <div className="bg-white p-5 rounded-xl">
         <AdminTable />

diff --git a/src/pages/Analysis.tsx b/src/pages/Analysis.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useAppDispatch } from '../app/hooks';
 import { setBreadcrumb } from '../features/breadcrumbSlice';
 import Breadcrumb from '../components/Breadcrumb';
+import HeaderContainer from '../components/HeaderContainer';
 
 function Analysis() {
   const dispatch = useAppDispatch();
@@ -21,8 +22,10 @@ function Analysis() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <h5 className="font-semibold text-3xl mb-1.5">Analisis</h5>
-        <p className="text-gray-500">Lihat analisis data.</p>
+        <HeaderContainer
+          title="Analisis"
+          subtitle="Lihat analisis data."
+        />
       </div>
       <div className="h-[1500px] bg-white p-5 rounded-xl"></div>
     </div>

diff --git a/src/pages/Preferences.tsx b/src/pages/Preferences.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import Breadcrumb from '../components/Breadcrumb';
 import { useAppDispatch } from '../app/hooks';
 import { setBreadcrumb } from '../features/breadcrumbSlice';
+import HeaderContainer from '../components/HeaderContainer';
 
 function Preferences() {
   const dispatch = useAppDispatch();
@@ -21,8 +22,10 @@ function Preferences() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <h5 className="font-semibold text-3xl mb-1.5">Preferences</h5>
-        <p className="text-gray-500">Lihat dan ubah preferensi pengguna.</p>
+        <HeaderContainer
+          title="Preferences"
+          subtitle="Lihat dan ubah preferensi pengguna."
+        />
       </div>
       <div className="h-[1500px] bg-white p-5 rounded-xl"></div>
     </div>

diff --git a/src/pages/School/index.tsx b/src/pages/School/index.tsx
@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import { PlusIcon } from 'lucide-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';
 
 function School() {
   const dispatch = useAppDispatch();
@@ -24,27 +23,12 @@ function School() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <div className="flex justify-between">
-          <div className="">
-            <h5 className="font-semibold text-3xl mb-1.5">Sekolah</h5>
-            <p className="text-gray-500">
-              Lihat daftar sekolah 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="/school/add">
-              <PlusIcon
-                size={20}
-                className="mr-1.5 stroke-current"
-                strokeWidth={2}
-              />
-              Tambah Sekolah
-            </Link>
-          </div>
-        </div>
+        <HeaderContainer
+          title="Sekolah"
+          subtitle="Lihat daftar sekolah yang terdaftar."
+          btnHref="/school/add"
+          btnText="Tambah Sekolah"
+        />
       </div>
       <div className="bg-white p-5 rounded-xl">
         <SchoolTable />

diff --git a/src/pages/Score/index.tsx b/src/pages/Score/index.tsx
@@ -3,6 +3,7 @@ import ScoreTable from './components/ScoreTable';
 import Breadcrumb from '../../components/Breadcrumb';
 import { useAppDispatch } from '../../app/hooks';
 import { setBreadcrumb } from '../../features/breadcrumbSlice';
+import HeaderContainer from '../../components/HeaderContainer';
 
 function Score() {
   const dispatch = useAppDispatch();
@@ -22,10 +23,10 @@ function Score() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <h5 className="font-semibold text-3xl mb-1.5">Skor</h5>
-        <p className="text-gray-500">
-          Lihat poin yang didapat oleh setiap pemain.
-        </p>
+        <HeaderContainer
+          title="Skor"
+          subtitle="Lihat poin yang didapat oleh setiap pemain."
+        />
       </div>
       <div className="bg-white p-5 rounded-xl">
         <ScoreTable />

diff --git a/src/pages/Students/index.tsx b/src/pages/Students/index.tsx
@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import { PlusIcon } from 'lucide-react';
 import StudentsTable from './components/StudentsTable';
 import Breadcrumb from '../../components/Breadcrumb';
 import { setBreadcrumb } from '../../features/breadcrumbSlice';
 import { useAppDispatch } from '../../app/hooks';
+import HeaderContainer from '../../components/HeaderContainer';
 
 function Students() {
   const dispatch = useAppDispatch();
@@ -24,25 +23,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">
         <StudentsTable />

diff --git a/src/pages/Support.tsx b/src/pages/Support.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import Breadcrumb from '../components/Breadcrumb';
 import { useAppDispatch } from '../app/hooks';
 import { setBreadcrumb } from '../features/breadcrumbSlice';
+import HeaderContainer from '../components/HeaderContainer';
 
 function Support() {
   const dispatch = useAppDispatch();
@@ -21,10 +22,10 @@ function Support() {
     <div className="">
       <div className="mb-6">
         <Breadcrumb />
-        <h5 className="font-semibold text-3xl mb-1.5">Support</h5>
-        <p className="text-gray-500">
-          Hubungi kami untuk bantuan lebih lanjut.
-        </p>
+        <HeaderContainer
+          title="Support"
+          subtitle="Hubungi kami untuk bantuan lebih lanjut."
+        />
       </div>
       <div className="h-[1500px] bg-white p-5 rounded-xl"></div>
     </div>

diff --git a/src/services/SchoolApi.ts b/src/services/SchoolApi.ts
diff --git a/src/types/componentType.ts b/src/types/componentType.ts
@@ -38,6 +38,14 @@ interface ToastProviderProps {
   children: ReactNode;
 }
 
+// header
+interface HeaderContainerProps {
+  title: string;
+  subtitle: string;
+  btnHref?: string;
+  btnText?: string;
+}
+
 // student
 interface StudentTable {
   student: Student[];
@@ -58,6 +66,7 @@ export type {
   Breadcrumb,
   BreadcrumbState,
   BreadcrumbIconProps,
+  HeaderContainerProps,
   HeaderProfileProps,
   ProfileUserProps,
   ToastState,