Bug withdrawn application frontend

frontend/src/Pages/RecruitmentApplicationsOverviewPage/RecruitmentApplicationsOverviewPage.module.scss

@@ -28,42 +28,3 @@ $back-button-width: 5rem;
 .empty_div {
   width: $back-button-width;
 }
-
-.arrows {
-  &:hover {
-    filter: brightness(150%);
-    transform: scale(1.05);
-  }
-  &:active {
-    filter: brightness(200%);
-    transform: scale(1.10);
-  }
-}
-
-.withdrawnHeader {
-  background-color: $red-samf;
-  color: $white;
-  &:hover {
-    background-color: $red-samf;
-    filter: brightness(95%);
-  }
-  border:none;
-}
-
-.withdrawnRow {
-  background-color: $grey-3;
-  &:hover {
-    background-color: $grey-3;
-    filter: brightness(95%);
-  }
-  border-bottom: none;
-  border-top: 1px solid $grey-2;
-}
-
-.withdrawnContainer {
-  margin-top: 2em;
-}
-
-.withdrawnText {
-  color: $red;
-}

frontend/src/Pages/RecruitmentApplicationsOverviewPage/RecruitmentApplicationsOverviewPage.tsx

@@ -1,147 +1,25 @@
-import { Icon } from '@iconify/react';
-import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { Button, Link, Page } from '~/Components';
+import { useParams } from 'react-router-dom';
+import { Button, Page } from '~/Components';
 import { OccupiedFormModal } from '~/Components/OccupiedForm';
-import { Table } from '~/Components/Table';
-import { Text } from '~/Components/Text/Text';
-import {
-  getRecruitmentApplicationsForApplicant,
-  putRecruitmentPriorityForUser,
-  withdrawRecruitmentApplicationApplicant,
-} from '~/api';
-import type { RecruitmentApplicationDto, UserPriorityDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
-import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
-import { dbT, niceDateTime } from '~/utils';
 import styles from './RecruitmentApplicationsOverviewPage.module.scss';
+import { ActiveApplications, WithdrawnApplications } from './components';
+
+export type ApplicantApplicationManagementQK = {
+  applications: (recruitmentId: string) => readonly ['applications', string];
+  withdrawnApplications: (recruitmentId: string) => readonly ['withdrawnApplications', string];
+};
 
 export function RecruitmentApplicationsOverviewPage() {
   const { recruitmentId } = useParams();
-  const [applications, setApplications] = useState<RecruitmentApplicationDto[]>([]);
-  const [withdrawnApplications, setWithdrawnApplications] = useState<RecruitmentApplicationDto[]>([]);
-  const navigate = useNavigate();
-
   const { t } = useTranslation();
 
-  function handleChangePriority(id: string, direction: 'up' | 'down') {
-    const data: UserPriorityDto = { direction: direction === 'up' ? 1 : -1 };
-    putRecruitmentPriorityForUser(id, data).then((response) => {
-      setApplications(response.data);
-    });
-  }
-
-  function upDownArrow(id: string) {
-    return (
-      <>
-        <Icon icon="bxs:up-arrow" className={styles.arrows} onClick={() => handleChangePriority(id, 'up')} />
-        <Icon icon="bxs:down-arrow" className={styles.arrows} onClick={() => handleChangePriority(id, 'down')} />
-      </>
-    );
-  }
-
-  useEffect(() => {
-    if (recruitmentId) {
-      getRecruitmentApplicationsForApplicant(recruitmentId).then((response) => {
-        setApplications(response.data.filter((application) => !application.withdrawn));
-        setWithdrawnApplications(response.data.filter((application) => application.withdrawn));
-      });
-    }
-  }, [recruitmentId]);
-
-  const tableColumns = [
-    { sortable: false, content: t(KEY.recruitment_position) },
-    { sortable: false, content: t(KEY.recruitment_interview_time) },
-    { sortable: false, content: t(KEY.recruitment_interview_location) },
-    { sortable: true, content: t(KEY.recruitment_priority) },
-    { sortable: false, content: '' },
-    { sortable: false, content: '' },
-  ];
-
-  function applicationToTableRow(application: RecruitmentApplicationDto) {
-    const position = [
-      {
-        content: (
-          <Link
-            url={reverse({
-              pattern: ROUTES.frontend.recruitment_application,
-              urlParams: {
-                positionId: application.recruitment_position.id,
-                gangId: application.recruitment_position.gang.id,
-              },
-            })}
-            className={styles.position_name}
-          >
-            {dbT(application.recruitment_position, 'name')}
-          </Link>
-        ),
-      },
-    ];
-    const notWithdrawn = [
-      niceDateTime(application.interview?.interview_time),
-      application.interview?.interview_location,
-      application.applicant_priority,
-      { content: upDownArrow(application.id) },
-    ];
-    const withdrawn = [
-      {
-        content: (
-          <Text as="strong" className={styles.withdrawnText}>
-            {t(KEY.recruitment_withdrawn)}
-          </Text>
-        ),
-      },
-    ];
-    const widthdrawButton = {
-      content: (
-        <Button
-          theme="samf"
-          onClick={() => {
-            if (window.confirm(t(KEY.recruitment_withdraw_application))) {
-              withdrawRecruitmentApplicationApplicant(application.recruitment_position.id)
-                .then(() => {
-                  // redirect to the same page to refresh the data
-                  navigate(0);
-                })
-                .catch(() => {
-                  toast.error(t(KEY.common_something_went_wrong));
-                });
-            }
-          }}
-        >
-          {t(KEY.recruitment_withdraw_application)}
-        </Button>
-      ),
-    };
-    return [...position, ...(application.withdrawn ? withdrawn : notWithdrawn), widthdrawButton];
-  }
-
-  const withdrawnTableColumns = [{ sortable: true, content: t(KEY.recruitment_withdrawn) }];
-
-  function withdrawnApplicationToTableRow(application: RecruitmentApplicationDto) {
-    return [
-      {
-        value: dbT(application.recruitment_position, 'name'),
-        content: (
-          <Link
-            url={reverse({
-              pattern: ROUTES.frontend.recruitment_application,
-              urlParams: {
-                positionId: application.recruitment_position.id,
-                gangId: application.recruitment_position.gang.id,
-              },
-            })}
-            className={styles.withdrawnLink}
-          >
-            {dbT(application.recruitment_position, 'name')}
-          </Link>
-        ),
-      },
-    ];
-  }
+  const QUERY_KEYS: ApplicantApplicationManagementQK = {
+    applications: (recruitmentId: string) => ['applications', recruitmentId] as const,
+    withdrawnApplications: (recruitmentId: string) => ['withdrawnApplications', recruitmentId] as const,
+  };
 
   return (
     <Page>
@@ -153,32 +31,10 @@ export function RecruitmentApplicationsOverviewPage() {
           <h1 className={styles.header}>{t(KEY.recruitment_my_applications)}</h1>
           <div className={styles.empty_div} />
         </div>
-        <p>{t(KEY.recruitment_will_be_anonymized)}</p>
-        {applications.length > 0 ? (
-          <Table
-            data={applications.map((application) => ({ cells: applicationToTableRow(application) }))}
-            columns={tableColumns}
-            defaultSortColumn={3}
-          />
-        ) : (
-          <p>{t(KEY.recruitment_not_applied)}</p>
-        )}
-
         <OccupiedFormModal recruitmentId={Number.parseInt(recruitmentId ?? '')} />
-
-        {withdrawnApplications.length > 0 && (
-          <div className={styles.withdrawnContainer}>
-            <Table
-              bodyRowClassName={styles.withdrawnRow}
-              headerClassName={styles.withdrawnHeader}
-              headerColumnClassName={styles.withdrawnHeader}
-              data={withdrawnApplications.map((application) => ({
-                cells: withdrawnApplicationToTableRow(application),
-              }))}
-              columns={withdrawnTableColumns}
-            />
-          </div>
-        )}
+        <p>{t(KEY.recruitment_will_be_anonymized)}</p>
+        <ActiveApplications recruitmentId={recruitmentId} queryKey={QUERY_KEYS} />
+        <WithdrawnApplications recruitmentId={recruitmentId} queryKey={QUERY_KEYS} />
       </div>
     </Page>
   );

frontend/src/Pages/RecruitmentApplicationsOverviewPage/components/ActiveApplications/ActiveApplications.module.scss

@@ -0,0 +1,58 @@
+.priorityControllArrow {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(150%);
+    transform: scale(1.5);
+  }
+  &:active {
+    cursor: none;
+    filter: brightness(200%);
+    transform: scale(0.5);
+  }
+}
+
+.priorityControllBtnWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  gap: 1rem;
+}
+
+.positionName {
+  display: inline-block;
+}
+
+.positionLinkWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.priorityChangeIndicator {
+  position: absolute;
+  top: -1rem;
+  right: -2.25rem;
+  font-size: 3rem;
+  opacity: 0;
+  animation: fadeInOut 2s ease;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  15% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  85% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}