feat: persist view sorts (#1154)

Closes #1122

front/src/modules/companies/queries/__tests__/select.test.ts

@@ -5,12 +5,11 @@ import { CompaniesSelectedSortType } from '../select';
 describe('reduceSortsToOrderBy', () => {
   it('should return an array of objects with the id as key and the order as value', () => {
     const sorts = [
-      { key: 'name', label: 'name', order: 'asc', _type: 'default_sort' },
+      { key: 'name', label: 'name', order: 'asc' },
       {
         key: 'domainName',
         label: 'domainName',
         order: 'desc',
-        _type: 'default_sort',
       },
     ] satisfies CompaniesSelectedSortType[];
     const result = reduceSortsToOrderBy(sorts);

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -1,30 +1,33 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import { companyViewFields } from '@/companies/constants/companyViewFields';
-import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { IconList } from '@/ui/icon';
 import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useViewSorts } from '@/views/hooks/useViewSorts';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
-  CompanyOrderByWithRelationInput,
   useGetCompaniesQuery,
   useUpdateOneCompanyMutation,
 } from '~/generated/graphql';
 import { companiesFilters } from '~/pages/companies/companies-filters';
 import { availableSorts } from '~/pages/companies/companies-sorts';
 
-export function CompanyTable() {
-  const [orderBy, setOrderBy] =
-    useState<CompanyOrderByWithRelationInput[]>(defaultOrderBy);
+import { defaultOrderBy } from '../../queries';
 
-  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
+export function CompanyTable() {
+  const currentViewId = useRecoilValue(currentViewIdState);
+  const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext);
+  const { updateSorts } = useViewSorts({
+    availableSorts,
+    Context: TableContext,
+  });
 
   const filters = useRecoilScopedValue(filtersScopedState, TableContext);
 
@@ -38,7 +41,7 @@ export function CompanyTable() {
         objectName="company"
         getRequestResultKey="companies"
         useGetRequest={useGetCompaniesQuery}
-        orderBy={orderBy}
+        orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
         viewFieldDefinitions={companyViewFields}
         filterDefinitionArray={companiesFilters}
@@ -47,7 +50,7 @@ export function CompanyTable() {
         viewName="All Companies"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
-        onSortsUpdate={updateSorts}
+        onSortsUpdate={currentViewId ? updateSorts : undefined}
         useUpdateEntityMutation={useUpdateOneCompanyMutation}
       />
     </>

front/src/modules/people/table/components/PeopleTable.tsx

@@ -1,31 +1,33 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 
-import { defaultOrderBy } from '@/companies/queries';
 import { peopleViewFields } from '@/people/constants/peopleViewFields';
-import { PeopleSelectedSortType } from '@/people/queries';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { IconList } from '@/ui/icon';
 import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useViewSorts } from '@/views/hooks/useViewSorts';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
-  PersonOrderByWithRelationInput,
   useGetPeopleQuery,
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
 import { peopleFilters } from '~/pages/people/people-filters';
 import { availableSorts } from '~/pages/people/people-sorts';
 
-export function PeopleTable() {
-  const [orderBy, setOrderBy] =
-    useState<PersonOrderByWithRelationInput[]>(defaultOrderBy);
+import { defaultOrderBy } from '../../queries';
 
-  const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
+export function PeopleTable() {
+  const currentViewId = useRecoilValue(currentViewIdState);
+  const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext);
+  const { updateSorts } = useViewSorts({
+    availableSorts,
+    Context: TableContext,
+  });
 
   const filters = useRecoilScopedValue(filtersScopedState, TableContext);
 
@@ -39,7 +41,7 @@ export function PeopleTable() {
         objectName="person"
         getRequestResultKey="people"
         useGetRequest={useGetPeopleQuery}
-        orderBy={orderBy}
+        orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
         viewFieldDefinitions={peopleViewFields}
         filterDefinitionArray={peopleFilters}
@@ -48,7 +50,7 @@ export function PeopleTable() {
         viewName="All People"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
-        onSortsUpdate={updateSorts}
+        onSortsUpdate={currentViewId ? updateSorts : undefined}
         useUpdateEntityMutation={useUpdateOnePersonMutation}
       />
     </>

front/src/modules/ui/filter-n-sort/helpers.ts

@@ -2,27 +2,16 @@ import { SortOrder as Order_By } from '~/generated/graphql';
 
 import { SelectedSortType } from './types/interface';
 
-const mapOrderToOrder_By = (order: string) => {
-  if (order === 'asc') return Order_By.Asc;
-  return Order_By.Desc;
-};
-
-export const defaultOrderByTemplateFactory =
-  (key: string) => (order: string) => ({
-    [key]: order,
-  });
-
 export const reduceSortsToOrderBy = <OrderByTemplate>(
-  sorts: Array<SelectedSortType<OrderByTemplate>>,
-): OrderByTemplate[] => {
-  const mappedSorts = sorts.map((sort) => {
-    if (sort.orderByTemplates) {
-      return sort.orderByTemplates?.map((orderByTemplate) =>
-        orderByTemplate(mapOrderToOrder_By(sort.order)),
+  sorts: SelectedSortType<OrderByTemplate>[],
+): OrderByTemplate[] =>
+  sorts
+    .map((sort) => {
+      const order = sort.order === 'asc' ? Order_By.Asc : Order_By.Desc;
+      return (
+        sort.orderByTemplate?.(order) || [
+          { [sort.key]: order } as OrderByTemplate,
+        ]
       );
-    }
-
-    return defaultOrderByTemplateFactory(sort.key as string)(sort.order);
-  });
-  return mappedSorts.flat() as OrderByTemplate[];
-};
+    })
+    .flat();

front/src/modules/ui/filter-n-sort/states/sortScopedState.ts

@@ -1,8 +1,28 @@
-import { atomFamily } from 'recoil';
+import { atomFamily, selectorFamily } from 'recoil';
 
-import { Filter } from '../types/Filter';
+import { reduceSortsToOrderBy } from '../helpers';
+import { SelectedSortType } from '../types/interface';
 
-export const sortScopedState = atomFamily<Filter[], string>({
+export const sortScopedState = atomFamily<SelectedSortType<any>[], string>({
   key: 'sortScopedState',
   default: [],
 });
+
+export const sortsByKeyScopedState = selectorFamily({
+  key: 'sortsByKeyScopedState',
+  get:
+    (param: string) =>
+    ({ get }) =>
+      get(sortScopedState(param)).reduce<Record<string, SelectedSortType<any>>>(
+        (result, sort) => ({ ...result, [sort.key]: sort }),
+        {},
+      ),
+});
+
+export const sortsOrderByScopedState = selectorFamily({
+  key: 'sortsOrderByScopedState',
+  get:
+    (param: string) =>
+    ({ get }) =>
+      reduceSortsToOrderBy(get(sortScopedState(param))),
+});

front/src/modules/ui/filter-n-sort/types/interface.ts

@@ -6,7 +6,7 @@ export type SortType<OrderByTemplate> = {
   label: string;
   key: string;
   icon?: ReactNode;
-  orderByTemplates?: Array<(order: Order_By) => OrderByTemplate>;
+  orderByTemplate?: (order: Order_By) => OrderByTemplate[];
 };
 
 export type SelectedSortType<OrderByTemplate> = SortType<OrderByTemplate> & {

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -5,19 +5,20 @@ import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { IconPlus } from '@/ui/icon';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { GET_VIEW_FIELDS } from '@/views/queries/select';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
   useCreateViewFieldMutation,
   useUpdateViewFieldMutation,
 } from '~/generated/graphql';
 
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
-import { toViewFieldInput } from '../hooks/useLoadView';
+import { toViewFieldInput } from '../hooks/useLoadViewFields';
 import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
 import {
   addableViewFieldDefinitionsState,
@@ -89,6 +90,7 @@ export function EntityTableHeader() {
   const theme = useTheme();
 
   const [{ objectName }, setViewFieldsState] = useRecoilState(viewFieldsState);
+  const currentViewId = useRecoilValue(currentViewIdState);
   const viewFields = useRecoilValue(visibleViewFieldsState);
   const columnWidths = useRecoilValue(columnWidthByViewFieldIdState);
   const addableViewFieldDefinitions = useRecoilValue(
@@ -176,15 +178,18 @@ export function EntityTableHeader() {
 
       createViewFieldMutation({
         variables: {
-          data: toViewFieldInput(objectName, {
-            ...viewFieldDefinition,
-            columnOrder: viewFields.length + 1,
-          }),
+          data: {
+            ...toViewFieldInput(objectName, {
+              ...viewFieldDefinition,
+              columnOrder: viewFields.length + 1,
+            }),
+            view: { connect: { id: currentViewId } },
+          },
         },
         refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
       });
     },
-    [createViewFieldMutation, objectName, viewFields.length],
+    [createViewFieldMutation, currentViewId, objectName, viewFields.length],
   );
 
   return (

front/src/modules/ui/table/components/GenericEntityTableData.tsx

@@ -6,7 +6,7 @@ import {
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 
-import { useLoadView } from '../hooks/useLoadView';
+import { useLoadViewFields } from '../hooks/useLoadViewFields';
 
 export function GenericEntityTableData({
   objectName,
@@ -27,7 +27,7 @@ export function GenericEntityTableData({
 }) {
   const setEntityTableData = useSetEntityTableData();
 
-  useLoadView({ objectName, viewFieldDefinitions });
+  useLoadViewFields({ objectName, viewFieldDefinitions });
 
   useGetRequest({
     variables: { orderBy, where: whereFilters },

front/src/modules/ui/table/hooks/useLoadViewFields.ts

@@ -1,18 +1,19 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldTextMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { GET_VIEW_FIELDS } from '@/views/queries/select';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
   SortOrder,
   useCreateViewFieldsMutation,
   useGetViewFieldsQuery,
 } from '~/generated/graphql';
 
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-  ViewFieldTextMetadata,
-} from '../../editable-field/types/ViewField';
 import { entityTableDimensionsState } from '../states/entityTableDimensionsState';
 import { viewFieldsState } from '../states/viewFieldsState';
 
@@ -33,13 +34,14 @@ export const toViewFieldInput = (
   sizeInPx: viewFieldDefinition.columnSize,
 });
 
-export const useLoadView = ({
+export const useLoadViewFields = ({
   objectName,
   viewFieldDefinitions,
 }: {
   objectName: 'company' | 'person';
   viewFieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
 }) => {
+  const currentViewId = useRecoilValue(currentViewIdState);
   const setEntityTableDimensions = useSetRecoilState(
     entityTableDimensionsState,
   );
@@ -50,7 +52,10 @@ export const useLoadView = ({
   useGetViewFieldsQuery({
     variables: {
       orderBy: { index: SortOrder.Asc },
-      where: { objectName: { equals: objectName } },
+      where: {
+        objectName: { equals: objectName },
+        viewId: { equals: currentViewId ?? null },
+      },
     },
     onCompleted: (data) => {
       if (data.viewFields.length) {
@@ -79,9 +84,10 @@ export const useLoadView = ({
       // Populate if empty
       createViewFieldsMutation({
         variables: {
-          data: viewFieldDefinitions.map((viewFieldDefinition) =>
-            toViewFieldInput(objectName, viewFieldDefinition),
-          ),
+          data: viewFieldDefinitions.map((viewFieldDefinition) => ({
+            ...toViewFieldInput(objectName, viewFieldDefinition),
+            viewId: currentViewId,
+          })),
         },
         refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
       });

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -1,12 +1,14 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback } from 'react';
 import styled from '@emotion/styled';
 
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
 import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
 import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
+import { sortScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TopBar } from '@/ui/top-bar/TopBar';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { OptionsDropdownButton } from '@/views/components/OptionsDropdownButton';
 
 import { TableContext } from '../../states/TableContext';
@@ -34,26 +36,26 @@ export function TableHeader<SortField>({
   availableSorts,
   onSortsUpdate,
 }: OwnProps<SortField>) {
-  const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
-    [],
+  const [sorts, setSorts] = useRecoilScopedState<SelectedSortType<SortField>[]>(
+    sortScopedState,
+    TableContext,
   );
+  const handleSortsUpdate = onSortsUpdate ?? setSorts;
 
   const sortSelect = useCallback(
     (newSort: SelectedSortType<SortField>) => {
       const newSorts = updateSortOrFilterByKey(sorts, newSort);
-      innerSetSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
+      handleSortsUpdate(newSorts);
     },
-    [onSortsUpdate, sorts],
+    [handleSortsUpdate, sorts],
   );
 
   const sortUnselect = useCallback(
     (sortKey: string) => {
       const newSorts = sorts.filter((sort) => sort.key !== sortKey);
-      innerSetSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
+      handleSortsUpdate(newSorts);
     },
-    [onSortsUpdate, sorts],
+    [handleSortsUpdate, sorts],
   );
 
   return (
@@ -88,8 +90,7 @@ export function TableHeader<SortField>({
           sorts={sorts}
           onRemoveSort={sortUnselect}
           onCancelClick={() => {
-            innerSetSorts([]);
-            onSortsUpdate && onSortsUpdate([]);
+            handleSortsUpdate([]);
           }}
         />
       }

front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts

@@ -1,10 +1,10 @@
 import { Context, useContext } from 'react';
-import { RecoilState, useRecoilValue } from 'recoil';
+import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
 
 import { RecoilScopeContext } from '../states/RecoilScopeContext';
 
 export function useRecoilScopedValue<T>(
-  recoilState: (param: string) => RecoilState<T>,
+  recoilState: (param: string) => RecoilState<T> | RecoilValueReadOnly<T>,
   SpecificContext?: Context<string | null>,
 ) {
   const recoilScopeId = useContext(SpecificContext ?? RecoilScopeContext);

front/src/modules/views/hooks/useViewSorts.ts

@@ -0,0 +1,152 @@
+import { Context, useCallback } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilValue } from 'recoil';
+
+import {
+  sortsByKeyScopedState,
+  sortScopedState,
+} from '@/ui/filter-n-sort/states/sortScopedState';
+import type {
+  SelectedSortType,
+  SortType,
+} from '@/ui/filter-n-sort/types/interface';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
+import {
+  useCreateViewSortsMutation,
+  useDeleteViewSortsMutation,
+  useGetViewSortsQuery,
+  useUpdateViewSortMutation,
+  ViewSortDirection,
+} from '~/generated/graphql';
+
+import { GET_VIEW_SORTS } from '../queries/select';
+
+export const useViewSorts = <SortField>({
+  availableSorts,
+  Context,
+}: {
+  availableSorts: SortType<SortField>[];
+  Context?: Context<string | null>;
+}) => {
+  const currentViewId = useRecoilValue(currentViewIdState);
+  const [, setSorts] = useRecoilScopedState(sortScopedState, Context);
+  const sortsByKey = useRecoilScopedValue(sortsByKeyScopedState, Context);
+
+  useGetViewSortsQuery({
+    skip: !currentViewId,
+    variables: {
+      where: {
+        viewId: { equals: currentViewId },
+      },
+    },
+    onCompleted: (data) => {
+      setSorts(
+        data.viewSorts
+          .map((viewSort) => ({
+            ...availableSorts.find((sort) => sort.key === viewSort.key),
+            label: viewSort.name,
+            order: viewSort.direction.toLowerCase(),
+          }))
+          .filter((sort): sort is SelectedSortType<SortField> => !!sort),
+      );
+    },
+  });
+
+  const [createViewSortsMutation] = useCreateViewSortsMutation();
+  const [updateViewSortMutation] = useUpdateViewSortMutation();
+  const [deleteViewSortsMutation] = useDeleteViewSortsMutation();
+
+  const createViewSorts = useCallback(
+    (sorts: SelectedSortType<SortField>[]) => {
+      if (!currentViewId || !sorts.length) return;
+
+      return createViewSortsMutation({
+        variables: {
+          data: sorts.map((sort) => ({
+            key: sort.key,
+            direction: sort.order as ViewSortDirection,
+            name: sort.label,
+            viewId: currentViewId,
+          })),
+        },
+        refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
+      });
+    },
+    [createViewSortsMutation, currentViewId],
+  );
+
+  const updateViewSorts = useCallback(
+    (sorts: SelectedSortType<SortField>[]) => {
+      if (!currentViewId || !sorts.length) return;
+
+      return Promise.all(
+        sorts.map((sort) =>
+          updateViewSortMutation({
+            variables: {
+              data: {
+                direction: sort.order as ViewSortDirection,
+              },
+              where: {
+                viewId_key: { key: sort.key, viewId: currentViewId },
+              },
+            },
+            refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
+          }),
+        ),
+      );
+    },
+    [currentViewId, updateViewSortMutation],
+  );
+
+  const deleteViewSorts = useCallback(
+    (sortKeys: string[]) => {
+      if (!currentViewId || !sortKeys.length) return;
+
+      return deleteViewSortsMutation({
+        variables: {
+          where: {
+            key: { in: sortKeys },
+            viewId: { equals: currentViewId },
+          },
+        },
+        refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
+      });
+    },
+    [currentViewId, deleteViewSortsMutation],
+  );
+
+  const updateSorts = useCallback(
+    async (nextSorts: SelectedSortType<SortField>[]) => {
+      if (!currentViewId) return;
+
+      const sortsToCreate = nextSorts.filter(
+        (nextSort) => !sortsByKey[nextSort.key],
+      );
+      await createViewSorts(sortsToCreate);
+
+      const sortsToUpdate = nextSorts.filter(
+        (nextSort) =>
+          sortsByKey[nextSort.key] &&
+          sortsByKey[nextSort.key].order !== nextSort.order,
+      );
+      await updateViewSorts(sortsToUpdate);
+
+      const nextSortKeys = nextSorts.map((nextSort) => nextSort.key);
+      const sortKeysToDelete = Object.keys(sortsByKey).filter(
+        (previousSortKey) => !nextSortKeys.includes(previousSortKey),
+      );
+      return deleteViewSorts(sortKeysToDelete);
+    },
+    [
+      createViewSorts,
+      currentViewId,
+      deleteViewSorts,
+      sortsByKey,
+      updateViewSorts,
+    ],
+  );
+
+  return { updateSorts };
+};

front/src/modules/views/queries/create.ts

@@ -19,3 +19,11 @@ export const CREATE_VIEW_FIELDS = gql`
     }
   }
 `;
+
+export const CREATE_VIEW_SORTS = gql`
+  mutation CreateViewSorts($data: [ViewSortCreateManyInput!]!) {
+    createManyViewSort(data: $data) {
+      count
+    }
+  }
+`;

front/src/modules/views/queries/delete.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_VIEW_SORTS = gql`
+  mutation DeleteViewSorts($where: ViewSortWhereInput!) {
+    deleteManyViewSort(where: $where) {
+      count
+    }
+  }
+`;

front/src/modules/views/queries/select.ts

@@ -14,3 +14,13 @@ export const GET_VIEW_FIELDS = gql`
     }
   }
 `;
+
+export const GET_VIEW_SORTS = gql`
+  query GetViewSorts($where: ViewSortWhereInput) {
+    viewSorts: findManyViewSort(where: $where) {
+      direction
+      key
+      name
+    }
+  }
+`;

front/src/modules/views/queries/update.ts

@@ -14,3 +14,16 @@ export const UPDATE_VIEW_FIELD = gql`
     }
   }
 `;
+
+export const UPDATE_VIEW_SORT = gql`
+  mutation UpdateViewSort(
+    $data: ViewSortUpdateInput!
+    $where: ViewSortWhereUniqueInput!
+  ) {
+    viewSort: updateOneViewSort(data: $data, where: $where) {
+      direction
+      key
+      name
+    }
+  }
+`;

front/src/modules/views/states/currentViewIdState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const currentViewIdState = atom<string | undefined>({
+  key: 'currentViewIdState',
+  default: undefined,
+});