Merged PR 717: [FB対応]画面更新するとヘッダーのソートがJob numberに戻ってしまう

## 概要
[Task3611: 対応](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3611)

- ソート条件を変更した際にローカルストレージに保持するように修正
  - 例　`direction:ASC,paramName:RECORDING_STARTED_DATE`
- ローカルストレージにソート条件が入っていれば、その条件でソートしたタスクを取得するように修正
- PlayBack時にローカルストレージにあるソート条件を削除するように修正
  - 削除することで、次回の画面初期表示時はPlayBackを押したときのソート条件を使用することができる。
- PlayBack時にユーザーがタイピストの時のみソート条件を保存していたがその制限は不要そうだったのでAuthorでもソート条件を更新するように修正。
  - AuthorがPlayBack押下時にソート条件を更新しても不都合はないため。

## レビューポイント
- ローカルストレージに保存する処理を入れる箇所に問題はないか

## UIの変更
-https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task3611?csf=1&web=1&e=5uG6f4

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば

dictation_client/src/components/auth/constants.ts

@@ -43,7 +43,12 @@ export const UNAUTHORIZED_TO_CONTINUE_ERROR_CODES = [
  * ローカルストレージに残すキー類
  * @const {string[]}
  */
-export const KEYS_TO_PRESERVE = ["accessToken", "refreshToken", "displayInfo"];
+export const KEYS_TO_PRESERVE = [
+  "accessToken",
+  "refreshToken",
+  "displayInfo",
+  "sortCriteria",
+];
 
 /**
  * アクセストークンを更新する基準の秒数

dictation_client/src/features/dictation/constants.ts

@@ -28,6 +28,13 @@ export const SORTABLE_COLUMN = {
 export type SortableColumnType =
   typeof SORTABLE_COLUMN[keyof typeof SORTABLE_COLUMN];
 
+export const isSortableColumnType = (
+  value: string
+): value is SortableColumnType => {
+  const arg = value as SortableColumnType;
+  return Object.values(SORTABLE_COLUMN).includes(arg);
+};
+
 export type SortableColumnList =
   typeof SORTABLE_COLUMN[keyof typeof SORTABLE_COLUMN];
 
@@ -38,6 +45,10 @@ export const DIRECTION = {
 
 export type DirectionType = typeof DIRECTION[keyof typeof DIRECTION];
 
+// DirectionTypeの型チェック関数
+export const isDirectionType = (arg: string): arg is DirectionType =>
+  arg in DIRECTION;
+
 export interface DisplayInfoType {
   JobNumber: boolean;
   Status: boolean;

dictation_client/src/features/dictation/operations.ts

@@ -280,7 +280,6 @@ export const playbackAsync = createAsyncThunk<
     direction: DirectionType;
     paramName: SortableColumnType;
     audioFileId: number;
-    isTypist: boolean;
   },
   {
     // rejectした時の返却値の型
@@ -289,7 +288,7 @@ export const playbackAsync = createAsyncThunk<
     };
   }
 >("dictations/playbackAsync", async (args, thunkApi) => {
-  const { audioFileId, direction, paramName, isTypist } = args;
+  const { audioFileId, direction, paramName } = args;
 
   // apiのConfigurationを取得する
   const { getState } = thunkApi;
@@ -300,15 +299,12 @@ export const playbackAsync = createAsyncThunk<
   const tasksApi = new TasksApi(config);
   const usersApi = new UsersApi(config);
   try {
-    // ユーザーがタイピストである場合に、ソート条件を保存する
+    await usersApi.updateSortCriteria(
-    if (isTypist) {
+      { direction, paramName },
-      await usersApi.updateSortCriteria(
+      {
-        { direction, paramName },
+        headers: { authorization: `Bearer ${accessToken}` },
-        {
+      }
-          headers: { authorization: `Bearer ${accessToken}` },
+    );
-        }
-      );
-    }
     await tasksApi.checkout(audioFileId, {
       headers: { authorization: `Bearer ${accessToken}` },
     });

dictation_client/src/pages/DictationPage/index.tsx

@@ -33,6 +33,8 @@ import {
   playbackAsync,
   cancelAsync,
   PRIORITY,
+  isSortableColumnType,
+  isDirectionType,
 } from "features/dictation";
 import { getTranslationID } from "translation";
 import { Task } from "api/api";
@@ -242,6 +244,12 @@ const DictationPage: React.FC = (): JSX.Element => {
       dispatch(changeDirection({ direction: currentDirection }));
       dispatch(changeParamName({ paramName }));
 
+      // ローカルストレージにソート情報を保存する
+      localStorage.setItem(
+        "sortCriteria",
+        `direction:${currentDirection},paramName:${paramName}`
+      );
+
       const filter = getFilter(
         filterUploaded,
         filterInProgress,
@@ -348,10 +356,11 @@ const DictationPage: React.FC = (): JSX.Element => {
           audioFileId,
           direction: sortDirection,
           paramName: sortableParamName,
-          isTypist,
         })
       );
       if (meta.requestStatus === "fulfilled") {
+        // ローカルストレージにソート情報を削除する
+        localStorage.removeItem("sortCriteria");
         const filter = getFilter(
           filterUploaded,
           filterInProgress,
@@ -388,7 +397,6 @@ const DictationPage: React.FC = (): JSX.Element => {
       filterInProgress,
       filterPending,
       filterUploaded,
-      isTypist,
       sortDirection,
       sortableParamName,
       t,
@@ -522,13 +530,39 @@ const DictationPage: React.FC = (): JSX.Element => {
       dispatch(changeDisplayInfo({ column: displayInfo }));
 
       const filter = getFilter(true, true, true, true, false);
+
       const { meta, payload } = await dispatch(getSortColumnAsync());
       if (
         meta.requestStatus === "fulfilled" &&
         payload &&
         !("error" in payload)
       ) {
-        const { direction, paramName } = payload;
+        // ソート情報をローカルストレージから取得する
+        const sortColumnValue = localStorage.getItem("sortCriteria") ?? "";
+        let direction: DirectionType;
+        let paramName: SortableColumnType;
+        if (sortColumnValue === "") {
+          direction = payload.direction;
+          paramName = payload.paramName;
+        } else {
+          // ソート情報をDirectionとParamNameに分割する
+          const sortColumn = sortColumnValue?.split(",");
+          const localStorageDirection = sortColumn[0].split(":")[1] ?? "";
+
+          const localStorageParamName = sortColumn[1]?.split(":")[1] ?? "";
+
+          // 正常なソート情報がローカルストレージに存在する場合はローカルストレージの情報を使用する
+          direction = isDirectionType(localStorageDirection)
+            ? localStorageDirection
+            : payload.direction;
+          paramName = isSortableColumnType(localStorageParamName)
+            ? localStorageParamName
+            : payload.paramName;
+
+          dispatch(changeDirection({ direction }));
+          dispatch(changeParamName({ paramName }));
+        }
+
         dispatch(
           listTasksAsync({
             limit: LIMIT_TASK_NUM,