refactor: add smaller changes

frontend/src/components/notification/Toast/index.ts

@@ -2,6 +2,17 @@
  * @prettier
  */
 
+/**
+ * @fileoverview
+ * @author tmsnvk
+ *
+ *
+ * Copyright © [Daigaku].
+ *
+ * This file contains proprietary code.
+ * Unauthorized copying, modification, or distribution of this file, whether in whole or in part is prohibited.
+ */
+
 import { Toast } from './toast.component';
 
 export { Toast };

frontend/src/components/notification/Toast/toast.component.tsx

@@ -2,9 +2,26 @@
  * @prettier
  */
 
+/**
+ * @fileoverview
+ * @author tmsnvk
+ *
+ *
+ * Copyright © [Daigaku].
+ *
+ * This file contains proprietary code.
+ * Unauthorized copying, modification, or distribution of this file, whether in whole or in part is prohibited.
+ */
+
 /* component, style imports */
 import { Section } from './toast.styles.ts';
 
+/**
+ * ===============
+ * Component {@link Toast}
+ * ===============
+ */
+
 /* interfaces, types, enums */
 interface ComponentProps {
  readonly isVisible: boolean;

frontend/src/components/notification/Toast/toast.styles.ts

@@ -2,12 +2,29 @@
  * @prettier
  */
 
+/**
+ * @fileoverview
+ * @author tmsnvk
+ *
+ *
+ * Copyright © [Daigaku].
+ *
+ * This file contains proprietary code.
+ * Unauthorized copying, modification, or distribution of this file, whether in whole or in part is prohibited.
+ */
+
 /* external imports */
 import styled, { keyframes } from 'styled-components';
 
 /* component, style imports */
 import { BaseLightBorder } from '@components/base-styles';
 
+/**
+ * ===============
+ * Styled Component {@link Section}
+ * ===============
+ */
+
 const fadeIn = keyframes`
  100% {
  opacity: 1;

frontend/src/components/notification/index.ts

@@ -2,6 +2,17 @@
  * @prettier
  */
 
+/**
+ * @fileoverview
+ * @author tmsnvk
+ *
+ *
+ * Copyright © [Daigaku].
+ *
+ * This file contains proprietary code.
+ * Unauthorized copying, modification, or distribution of this file, whether in whole or in part is prohibited.
+ */
+
 import { ConfirmationModal } from './confirmation-modal';
 import { GlobalErrorModal } from './global-error-modal';
 import { GlobalLoadingModal } from './global-loading-modal';

frontend/src/pages/common/Applications/components/column-selector-modal/column-selector-modal.component.tsx

@@ -13,12 +13,12 @@
  * Unauthorized copying, modification, or distribution of this file, whether in whole or in part is prohibited.
  */
 
-/* component, style imports */
-import { Dialog } from './column-selector-modal.styles';
-
 /* logic imports */
 import { useRenderModal } from '@hooks/index';
 
+/* component, style imports */
+import { Dialog } from './column-selector-modal.styles';
+
 /* interface, type, enum imports */
 import { RenderModal } from '@hooks/modal-components/use-render-modal';
 import { Column } from '../../applications.hooks';
@@ -37,10 +37,15 @@ interface ComponentProps {
  readonly onToggle: () => void;
 }
 
-/*
- * custom component - TODO - add functionality description
+/**
+ * @description
+ * The component renders the column selector modal that lets users to choose which data columns they wish to view on the page.
+ *
+ * @returns {JSX.Element}
+ *
+ * @since 0.0.1
  */
-export const ColumnSelectorModal = ({ columns, onToggleColumnVisibility, isModalVisible, onToggle }: ComponentProps) => {
+export const ColumnSelectorModal = ({ columns, onToggleColumnVisibility, isModalVisible, onToggle }: ComponentProps): JSX.Element => {
  const { dialogRef }: RenderModal = useRenderModal(isModalVisible);
 
  return (

frontend/src/pages/common/Applications/components/data-rows/data-rows.component.tsx

@@ -22,7 +22,7 @@ import { Cell, TableBodyRow } from './data-rows.styles';
 
 /* configuration, utilities, constants imports */
 import { iconLibraryConfig } from '@configuration';
-import { isColumnFound } from './data-rows.utilities';
+import { shouldColumnBeVisible } from './data-rows.utilities';
 
 /* interface, type, enum imports */
 import { Application } from '@common-types';
@@ -33,27 +33,34 @@ import { Column } from '../../applications.hooks';
  * Component {@link DataRows}
  * ===============
  */
+
 /* interfaces, types, enums */
 interface ComponentProps {
  readonly columns: Array<Column>;
  readonly applications: Array<Application>;
 }
 
-/*
- * component - TODO - add functionality description
+/**
+ * @description
+ * The component renders a `JSX.Element` for each data element in the applications array.
+ * In addition, it appends an edit and a view buttons to the end of the row in table.
+ *
+ * @returns {Array<JSX.Element>}
+ *
+ * @since 0.0.1
  */
-export const DataRows = ({ columns, applications }: ComponentProps) => {
+export const DataRows = ({ columns, applications }: ComponentProps): Array<JSX.Element> => {
  return applications.map((application: Application) => {
  return (
  <TableBodyRow key={application.uuid}>
- <Cell $shouldDisplay={isColumnFound(columns, 'courseName')}>{application.courseName}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'university')}>{application.university}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'country')}>{application.country}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'applicationStatus')}>{application.applicationStatus ?? '-'}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'interviewStatus')}>{application.interviewStatus ?? '-'}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'offerStatus')}>{application.offerStatus ?? '-'}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'responseStatus')}>{application.responseStatus ?? '-'}</Cell>
- <Cell $shouldDisplay={isColumnFound(columns, 'finalDestinationStatus')}>{application.finalDestinationStatus ?? '-'}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'courseName')}>{application.courseName}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'university')}>{application.university}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'country')}>{application.country}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'applicationStatus')}>{application.applicationStatus ?? '-'}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'interviewStatus')}>{application.interviewStatus ?? '-'}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'offerStatus')}>{application.offerStatus ?? '-'}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'responseStatus')}>{application.responseStatus ?? '-'}</Cell>
+ <Cell $shouldDisplay={shouldColumnBeVisible(columns, 'finalDestinationStatus')}>{application.finalDestinationStatus ?? '-'}</Cell>
  <td>
  <Link
  to={`edit/${application.uuid}`}

frontend/src/pages/common/Applications/components/data-rows/data-rows.styles.ts

@@ -22,11 +22,6 @@ import styled from 'styled-components';
  * ===============
  */
 
-/* interfaces, types, enums */
-interface RowType {
- readonly $shouldDisplay: boolean;
-}
-
 export const TableBodyRow = styled.tr`
  &:nth-child(odd) {
  background-color: ${({ theme }) => theme.color.primaryLight};
@@ -51,6 +46,11 @@ export const TableBodyRow = styled.tr`
  * ===============
  */
 
+/* interfaces, types, enums */
+interface RowType {
+ readonly $shouldDisplay: boolean;
+}
+
 export const Cell = styled.td<RowType>`
  display: ${({ $shouldDisplay }) => ($shouldDisplay ? '' : 'none')};
 `;

frontend/src/pages/common/Applications/components/data-rows/data-rows.utilities.ts

@@ -18,13 +18,14 @@ import { Column } from '../../applications.hooks.tsx';
 
 /**
  * ===============
- * Helper Method {@link isColumnFound}
+ * Helper Method {@link shouldColumnBeVisible}
  * ===============
  */
 
 /**
  * @description
- * The helper method determines if a column with a specific `columnId` is found in the array of columns and returns its `isVisible` value.
+ * The helper method determines if a column with a specific `columnId` is found in the array of columns to be displayed
+ * and returns its `isVisible` value.
  *
  * @param {Array<Column>} columns
  * An array of column objects.
@@ -36,7 +37,7 @@ import { Column } from '../../applications.hooks.tsx';
  *
  * @since 0.0.1
  */
-export const isColumnFound = (columns: Array<Column>, columnId: string): boolean => {
+export const shouldColumnBeVisible = (columns: Array<Column>, columnId: string): boolean => {
  const column: Column | undefined = columns.find((column: Column) => column.id === columnId);
 
  if (column) {

frontend/src/pages/common/Applications/components/table-header/table-header.component.tsx

@@ -23,7 +23,7 @@ import { RequestPdfDownload, useRequestPdfDownload } from './table-header.hooks'
 
 /* component, style imports */
 import { LoadingIndicator } from '@components/general';
-import { GlobalErrorModal } from '@components/notification';
+import { GlobalErrorModal, Toast } from '@components/notification';
 import { TableHeadRow } from './table-header.styles';
 
 /* configuration, utilities, constants imports */
@@ -58,7 +58,7 @@ interface ComponentProps {
  * @since 0.0.1
  */
 export const TableHeader = ({ columns, onColumnSort, onToggleModal, onRefetch }: ComponentProps): JSX.Element => {
- const { mutate, isPending, isError, error }: RequestPdfDownload = useRequestPdfDownload();
+ const { mutate, isSuccess, isPending, isError, error }: RequestPdfDownload = useRequestPdfDownload();
 
  if (isError) {
  let errorMessage = '';
@@ -78,49 +78,55 @@ export const TableHeader = ({ columns, onColumnSort, onToggleModal, onRefetch }:
  }
 
  return (
- <TableHeadRow>
- {columns.map((column: Column) => {
- return (
- column.isVisible && (
- <th key={column.id}>
- <button
- type={'button'}
- onClick={() => onColumnSort(column.id)}
- >
- {column.name}
- <FontAwesomeIcon icon={iconLibraryConfig.faSort} />
- </button>
- </th>
- )
- );
- })}
- <th>
- <button
- type={'button'}
- onClick={() => onRefetch({ cancelRefetch: false })}
- >
- Refresh
- <FontAwesomeIcon icon={iconLibraryConfig.faRotateRight} />
- </button>
- <button
- type={'button'}
- onClick={onToggleModal}
- >
- Display
- <FontAwesomeIcon icon={iconLibraryConfig.faTable} />
- </button>
- {isPending ? (
- <LoadingIndicator loadingText={constants.uiMessage.DOWNLOAD_REQUEST} />
- ) : (
+ <>
+ <TableHeadRow>
+ {columns.map((column: Column) => {
+ return (
+ column.isVisible && (
+ <th key={column.id}>
+ <button
+ type={'button'}
+ onClick={() => onColumnSort(column.id)}
+ >
+ {column.name}
+ <FontAwesomeIcon icon={iconLibraryConfig.faSort} />
+ </button>
+ </th>
+ )
+ );
+ })}
+ <th>
  <button
  type={'button'}
- onClick={() => mutate()}
+ onClick={() => onRefetch({ cancelRefetch: false })}
  >
- Download
- <FontAwesomeIcon icon={iconLibraryConfig.faFileArrowDown} />
+ Refresh
+ <FontAwesomeIcon icon={iconLibraryConfig.faRotateRight} />
  </button>
- )}
- </th>
- </TableHeadRow>
+ <button
+ type={'button'}
+ onClick={onToggleModal}
+ >
+ Display
+ <FontAwesomeIcon icon={iconLibraryConfig.faTable} />
+ </button>
+ {isPending ? (
+ <LoadingIndicator loadingText={constants.uiMessage.DOWNLOAD_REQUEST} />
+ ) : (
+ <button
+ type={'button'}
+ onClick={() => mutate()}
+ >
+ Download
+ <FontAwesomeIcon icon={iconLibraryConfig.faFileArrowDown} />
+ </button>
+ )}
+ </th>
+ </TableHeadRow>
+ <Toast
+ isVisible={isSuccess}
+ message={constants.uiMessage.DOWNLOAD_TOAST}
+ />
+ </>
  );
 };

frontend/src/pages/common/Applications/components/table-header/table-header.constants.ts

@@ -17,5 +17,6 @@ export const constants = {
  uiMessage: {
  LOADING: 'The application is compiling your data...',
  DOWNLOAD_REQUEST: 'Handling your request...',
+ DOWNLOAD_TOAST: 'Your request has been received. You will receive an email soon with the details.',
  },
 };

frontend/src/pages/common/Applications/components/table-header/table-header.hooks.tsx

@@ -44,10 +44,5 @@ export const useRequestPdfDownload = (): RequestPdfDownload => {
  return useMutation({
  mutationKey: [mutationKeys.application.POST_REQUEST_PDF_DOWNLOAD],
  mutationFn: () => applicationStudentService.requestPdfDownload(),
- onSuccess: () => {
- // TODO - modal pop-up to confirm an email will arrive soon
- // confirmation modal, pass in the showModal() method same as in reset-form
- },
- onError: (error: AxiosError<SendDownloadRequestErrorT>) => {},
  });
 };

frontend/src/pages/common/Applications/index.ts

@@ -12,6 +12,7 @@
  * This file contains proprietary code.
  * Unauthorized copying, modification, or distribution of this file, whether in whole or in part is prohibited.
  */
+
 import { Applications } from './applications.page';
 
 export { Applications };