diff --git a/dictation_client/src/components/auth/constants.ts b/dictation_client/src/components/auth/constants.ts index ef98041..dd8ec52 100644 --- a/dictation_client/src/components/auth/constants.ts +++ b/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", +]; /** * アクセストークンを更新する基準の秒数 diff --git a/dictation_client/src/features/dictation/constants.ts b/dictation_client/src/features/dictation/constants.ts index 69eae60..f7e22d1 100644 --- a/dictation_client/src/features/dictation/constants.ts +++ b/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; diff --git a/dictation_client/src/features/dictation/operations.ts b/dictation_client/src/features/dictation/operations.ts index 23b98f4..99b426e 100644 --- a/dictation_client/src/features/dictation/operations.ts +++ b/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 { - // ユーザーがタイピストである場合に、ソート条件を保存する - if (isTypist) { - await usersApi.updateSortCriteria( - { direction, paramName }, - { - headers: { authorization: `Bearer ${accessToken}` }, - } - ); - } + await usersApi.updateSortCriteria( + { direction, paramName }, + { + headers: { authorization: `Bearer ${accessToken}` }, + } + ); await tasksApi.checkout(audioFileId, { headers: { authorization: `Bearer ${accessToken}` }, }); diff --git a/dictation_client/src/pages/DictationPage/index.tsx b/dictation_client/src/pages/DictationPage/index.tsx index bb70c47..cbeed07 100644 --- a/dictation_client/src/pages/DictationPage/index.tsx +++ b/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,