feat(courses): add courses page

src/App.tsx

@@ -111,9 +111,9 @@ const App = (): ReactElement => {
         </Box>
       </Drawer>
 
-      <Box component='main' sx={{ flexGrow: 1, px: 3 }}>
+      <Box component='main' sx={{ flexGrow: 1, px: 3, height: '100vh' }}>
         <Toolbar />
-        <Box sx={{ flexGrow: 1, py: 1 }}>
+        <Box sx={{ flexGrow: 1, py: 1, height: 'calc(100% - 64px)' }}>
           <Routes>
             {appRoutes.map(({ path, roles, element }) => (
               <Route

src/api/courses/course.service.ts

@@ -0,0 +1,64 @@
+import { BaseService } from '../base/service';
+import Api from '../base/api';
+import { E_COURSE_ENTITY_KEYS, TPureCourse } from './types';
+
+export type TCreateCourseData = Omit<
+  TPureCourse,
+  | E_COURSE_ENTITY_KEYS.ANNOTATION
+  | E_COURSE_ENTITY_KEYS.CREDITS
+  | E_COURSE_ENTITY_KEYS.GUARANTOR
+  | E_COURSE_ENTITY_KEYS.TEACHERS
+> & {
+  [E_COURSE_ENTITY_KEYS.CREDITS]: number;
+  [E_COURSE_ENTITY_KEYS.ANNOTATION]?: string;
+  [E_COURSE_ENTITY_KEYS.GUARANTOR]: string;
+  [E_COURSE_ENTITY_KEYS.TEACHERS]?: Array<string>;
+};
+
+export type TUpdateCourseData = Partial<TCreateCourseData>;
+
+export type TCourseCreateMutationVariables = {
+  data: TCreateCourseData;
+};
+
+export type TCourseUpdateMutationVariables = {
+  [E_COURSE_ENTITY_KEYS.ABBR]: TPureCourse[E_COURSE_ENTITY_KEYS.ABBR];
+  data: TUpdateCourseData;
+};
+
+export type TCourseDeleteMutationVariables = {
+  [E_COURSE_ENTITY_KEYS.ABBR]: TPureCourse[E_COURSE_ENTITY_KEYS.ABBR];
+};
+
+export default class CourseService extends BaseService {
+  protected static readonly endpoint = '/courses';
+
+  public static async getCourses(): Promise<Array<TPureCourse>> {
+    return await Api.instance.get<Array<TPureCourse>>(this.endpoint);
+  }
+
+  public static async createCourse(
+    data: TCreateCourseData,
+  ): Promise<TPureCourse> {
+    return await Api.instance.post<TCreateCourseData, TPureCourse>(
+      this.endpoint,
+      data,
+    );
+  }
+
+  public static async updateCourse(
+    abbr: TPureCourse[E_COURSE_ENTITY_KEYS.ABBR],
+    data: TUpdateCourseData,
+  ): Promise<TPureCourse> {
+    return await Api.instance.put<TUpdateCourseData, TPureCourse>(
+      `${this.endpoint}/${abbr}`,
+      data,
+    );
+  }
+
+  public static async deleteCourse(
+    abbr: TPureCourse[E_COURSE_ENTITY_KEYS.ABBR],
+  ): Promise<void> {
+    await Api.instance.delete<void>(`${this.endpoint}/${abbr}`);
+  }
+}

src/api/courses/types.ts

@@ -0,0 +1,19 @@
+import { TApiUser } from '../user/types';
+
+export enum E_COURSE_ENTITY_KEYS {
+  ABBR = 'abbr',
+  NAME = 'name',
+  CREDITS = 'credits',
+  ANNOTATION = 'annotation',
+  GUARANTOR = 'guarantor',
+  TEACHERS = 'teachers',
+}
+
+export type TPureCourse = {
+  [E_COURSE_ENTITY_KEYS.ABBR]: string;
+  [E_COURSE_ENTITY_KEYS.NAME]: string;
+  [E_COURSE_ENTITY_KEYS.CREDITS]: number;
+  [E_COURSE_ENTITY_KEYS.ANNOTATION]: string;
+  [E_COURSE_ENTITY_KEYS.GUARANTOR]: TApiUser;
+  [E_COURSE_ENTITY_KEYS.TEACHERS]: Array<TApiUser>;
+};

src/components/courses/data-table/error.tsx

@@ -0,0 +1,44 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CircularProgress,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { TApiError } from '../../../api/base/types';
+import { JSX } from 'react';
+
+export type TCourseDataTableErrorProps = {
+  isLoading: boolean;
+  error: TApiError | null;
+  refetch(): void;
+};
+
+export const CourseDataTableError = ({
+  isLoading,
+  error,
+  refetch,
+}: TCourseDataTableErrorProps): JSX.Element => (
+  <Card>
+    <CardContent>
+      <Stack
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        direction={'row'}
+      >
+        {isLoading && <CircularProgress />}
+        {error && (
+          <>
+            <Typography variant={'h6'}>
+              Error: {error?.message ?? 'Unknown error'}
+            </Typography>
+            <Button size={'small'} onClick={async () => refetch()}>
+              Retry
+            </Button>
+          </>
+        )}
+      </Stack>
+    </CardContent>
+  </Card>
+);