feat: show course leaving stats for specific course (#2915)

* feat: search reports by course id

* feat: provide courseId to api

* refactor: use generated api

* feat: add memoization to columns

Author: AlreadyBored

client/src/api/api.ts

@@ -3407,6 +3407,111 @@ export interface ExpelStatusDto {
      */
     'expellingReason': string;
 }
+/**
+ * 
+ * @export
+ * @interface ExpelledCourseDto
+ */
+export interface ExpelledCourseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ExpelledCourseDto
+     */
+    'id': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledCourseDto
+     */
+    'name': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledCourseDto
+     */
+    'fullName': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledCourseDto
+     */
+    'alias': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledCourseDto
+     */
+    'description': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledCourseDto
+     */
+    'logo': string;
+}
+/**
+ * 
+ * @export
+ * @interface ExpelledStatsDto
+ */
+export interface ExpelledStatsDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledStatsDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {ExpelledCourseDto}
+     * @memberof ExpelledStatsDto
+     */
+    'course': ExpelledCourseDto;
+    /**
+     * 
+     * @type {ExpelledUserDto}
+     * @memberof ExpelledStatsDto
+     */
+    'user': ExpelledUserDto;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof ExpelledStatsDto
+     */
+    'reasonForLeaving'?: Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledStatsDto
+     */
+    'otherComment': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledStatsDto
+     */
+    'submittedAt': string;
+}
+/**
+ * 
+ * @export
+ * @interface ExpelledUserDto
+ */
+export interface ExpelledUserDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ExpelledUserDto
+     */
+    'id': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExpelledUserDto
+     */
+    'githubId': string;
+}
 /**
  * 
  * @export
@@ -10249,6 +10354,39 @@ export const CourseStatsApiAxiosParamCreator = function (configuration?: Configu
 
 
 
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {number} courseId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCourseExpelledStats: async (courseId: number, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'courseId' is not null or undefined
+            assertParamExists('getCourseExpelledStats', 'courseId', courseId)
+            const localVarPath = `/courses/{courseId}/stats/expelled`
+                .replace(`{${"courseId"}}`, encodeURIComponent(String(courseId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -10552,6 +10690,16 @@ export const CourseStatsApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.deleteExpelledStat(id, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @param {number} courseId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getCourseExpelledStats(courseId: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<ExpelledStatsDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getCourseExpelledStats(courseId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {number} courseId 
@@ -10618,7 +10766,7 @@ export const CourseStatsApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getExpelledStats(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<CourseStatsDto>>> {
+        async getExpelledStats(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<ExpelledStatsDto>>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getExpelledStats(options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -10652,6 +10800,15 @@ export const CourseStatsApiFactory = function (configuration?: Configuration, ba
         deleteExpelledStat(id: string, options?: any): AxiosPromise<string> {
             return localVarFp.deleteExpelledStat(id, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @param {number} courseId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCourseExpelledStats(courseId: number, options?: any): AxiosPromise<Array<ExpelledStatsDto>> {
+            return localVarFp.getCourseExpelledStats(courseId, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {number} courseId 
@@ -10712,7 +10869,7 @@ export const CourseStatsApiFactory = function (configuration?: Configuration, ba
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        getExpelledStats(options?: any): AxiosPromise<Array<CourseStatsDto>> {
+        getExpelledStats(options?: any): AxiosPromise<Array<ExpelledStatsDto>> {
             return localVarFp.getExpelledStats(options).then((request) => request(axios, basePath));
         },
         /**
@@ -10746,6 +10903,17 @@ export class CourseStatsApi extends BaseAPI {
         return CourseStatsApiFp(this.configuration).deleteExpelledStat(id, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @param {number} courseId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof CourseStatsApi
+     */
+    public getCourseExpelledStats(courseId: number, options?: AxiosRequestConfig) {
+        return CourseStatsApiFp(this.configuration).getCourseExpelledStats(courseId, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @param {number} courseId 

client/src/modules/CourseManagement/components/ExpelledStudentsStats.tsx

@@ -1,6 +1,6 @@
 import { Table, Typography, Tag, Button, Row } from 'antd';
 import { ColumnsType, ColumnType } from 'antd/es/table';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { PublicSvgIcon } from '@client/components/Icons';
 import { DEFAULT_COURSE_ICONS } from '@client/configs/course-icons';
 import { dateUtcRenderer } from '@client/components/Table';
@@ -9,65 +9,70 @@ import { DetailedExpelledStat } from '@common/models';
 
 const { Title, Text } = Typography;
 
-const ExpelledStudentsStats: React.FC = () => {
-  const { data, error, loading, isDeleting, handleDelete } = useExpelledStats();
+type Props = {
+  courseId?: number;
+};
+
+const getColumns = (handleDelete: (id: string) => void, isDeleting: boolean): ColumnsType<DetailedExpelledStat> => [
+  {
+    title: 'Course',
+    dataIndex: ['course', 'name'],
+    key: 'courseName',
+    render: (_text, record) => (
+      <div>
+        <PublicSvgIcon size="25px" src={DEFAULT_COURSE_ICONS[record.course.logo]?.active} />
+        <Text strong style={{ marginLeft: 15 }}>
+          {record.course.alias}
+        </Text>
+        <br />
+        <Text type="secondary">{record.course.fullName || record.course.name}</Text>
+      </div>
+    ),
+  },
+  {
+    title: 'Student GitHub',
+    dataIndex: ['user', 'githubId'],
+    key: 'githubId',
+    render: githubId => (
+      <a href={`https://github.com/${githubId}`} target="_blank" rel="noopener noreferrer">
+        {githubId}
+      </a>
+    ),
+  },
+  {
+    title: 'Reasons for Leaving',
+    dataIndex: 'reasonForLeaving',
+    key: 'reasons',
+    render: (reasons?: string[]) => <>{reasons?.map(reason => <Tag key={reason}>{reason.replace(/_/g, ' ')}</Tag>)}</>,
+  },
+  {
+    title: 'Other Comments',
+    dataIndex: 'otherComment',
+    key: 'otherComment',
+  },
+  {
+    title: 'Date',
+    dataIndex: 'submittedAt',
+    key: 'date',
+    render: dateUtcRenderer,
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    render: (_text, record) => (
+      <Button danger onClick={() => handleDelete(record.id)} loading={isDeleting}>
+        Delete
+      </Button>
+    ),
+  },
+];
+
+const ExpelledStudentsStats: React.FC<Props> = ({ courseId }) => {
+  const { data, error, loading, isDeleting, handleDelete } = useExpelledStats(courseId);
   const [csvUrl, setCsvUrl] = React.useState<string | null>(null);
   const downloadRef = React.useRef<HTMLAnchorElement>(null);
-  const columns: ColumnsType<DetailedExpelledStat> = [
-    {
-      title: 'Course',
-      dataIndex: ['course', 'name'],
-      key: 'courseName',
-      render: (_text, record) => (
-        <div>
-          <PublicSvgIcon size="25px" src={DEFAULT_COURSE_ICONS[record.course.logo]?.active} />
-          <Text strong style={{ marginLeft: 15 }}>
-            {record.course.alias}
-          </Text>
-          <br />
-          <Text type="secondary">{record.course.fullName || record.course.name}</Text>
-        </div>
-      ),
-    },
-    {
-      title: 'Student GitHub',
-      dataIndex: ['user', 'githubId'],
-      key: 'githubId',
-      render: githubId => (
-        <a href={`https://github.com/${githubId}`} target="_blank" rel="noopener noreferrer">
-          {githubId}
-        </a>
-      ),
-    },
-    {
-      title: 'Reasons for Leaving',
-      dataIndex: 'reasonForLeaving',
-      key: 'reasons',
-      render: (reasons?: string[]) => (
-        <>{reasons?.map(reason => <Tag key={reason}>{reason.replace(/_/g, ' ')}</Tag>)}</>
-      ),
-    },
-    {
-      title: 'Other Comments',
-      dataIndex: 'otherComment',
-      key: 'otherComment',
-    },
-    {
-      title: 'Date',
-      dataIndex: 'submittedAt',
-      key: 'date',
-      render: dateUtcRenderer,
-    },
-    {
-      title: 'Action',
-      key: 'action',
-      render: (_text, record) => (
-        <Button danger onClick={() => handleDelete(record.id)} loading={isDeleting}>
-          Delete
-        </Button>
-      ),
-    },
-  ];
+
+  const columns = useMemo(() => getColumns(handleDelete, isDeleting), [handleDelete, isDeleting]);
 
   if (error) {
     return <Typography.Paragraph>Failed to load statistics.</Typography.Paragraph>;

client/src/modules/CourseManagement/hooks/useExpelledStats.ts

@@ -1,28 +1,26 @@
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
+import { CourseStatsApi } from 'api';
 import { DetailedExpelledStat } from '@common/models';
 
-const fetchExpelledStats = async (): Promise<DetailedExpelledStat[]> => {
-  const response = await fetch('/api/v2/courses/stats/expelled');
-  if (!response.ok) {
-    throw new Error('Failed to fetch stats');
-  }
-  return response.json() as Promise<DetailedExpelledStat[]>;
+const courseStatsApi = new CourseStatsApi();
+
+const fetchExpelledStats = async (courseId: number): Promise<DetailedExpelledStat[]> => {
+  const response = await courseStatsApi.getCourseExpelledStats(courseId);
+  return response.data;
 };
 
-export const useExpelledStats = () => {
-  const { data, error, loading, refresh } = useRequest(fetchExpelledStats);
+export const useExpelledStats = (courseId?: number) => {
+  const { data, error, loading, refresh } = useRequest(() => fetchExpelledStats(courseId as number), {
+    ready: !!courseId,
+    refreshDeps: [courseId],
+  });
   const [isDeleting, setIsDeleting] = useState(false);
 
   const handleDelete = async (id: string) => {
     setIsDeleting(true);
     try {
-      const response = await fetch(`/api/v2/courses/stats/expelled/${id}`, {
-        method: 'DELETE',
-      });
-      if (!response.ok) {
-        throw new Error('Failed to delete stat');
-      }
+      await courseStatsApi.deleteExpelledStat(id);
       if (typeof refresh === 'function') {
         refresh();
       }