Generate types

api/queries/useActivitiesQuery.ts

@@ -1,15 +1,16 @@
 import type { QueryHookOptions, QueryResult } from '@apollo/client';
 import ActivitiesQuery from 'graphql/queries/pages/activities.graphql';
 
-import type { ActivityData, ActivityVariables } from 'api/types/user/activity';
+// import type { ActivityData, ActivityVariables } from 'api/types/user/activity';
 import useQuery from 'api/hooks/useQueryHook';
+import { ActivitiesVariables, Activities } from 'graphql/queries/pages/__generated__/Activities';
 
-type ActivitiesQueryOptions = QueryHookOptions<ActivityData, ActivityVariables>;
+type ActivitiesQueryOptions = QueryHookOptions<Activities, ActivitiesVariables>;
 
-type ActivitiesQueryResult = QueryResult<ActivityData, ActivityVariables>;
+type ActivitiesQueryResult = QueryResult<Activities, ActivitiesVariables>;
 
 const useActivitiesQuery = (options: ActivitiesQueryOptions): ActivitiesQueryResult => {
-  return useQuery<ActivityData, ActivityVariables>(ActivitiesQuery, {
+  return useQuery<Activities, ActivitiesVariables>(ActivitiesQuery, {
     fetchPolicy: 'cache-and-network',
     nextFetchPolicy: 'cache-first',
     ...options,

components/pages/activity/ActivityPage.tsx

@@ -14,6 +14,7 @@ import ErrorMessage from 'components/shared/atoms/ErrorMessage';
 import DefaultTemplate from 'components/shared/templates/DefaultTemplate';
 
 import { NotifierProvider } from 'contexts/NotifierContext';
+import { ActivityEvent } from '__generated__/globalTypes';
 import ActivityDropdown from './components/ActivityDropdown';
 import ActivityTable from './components/ActivityTable';
 import ActivityPagination from './components/ActivityPagination';
@@ -23,7 +24,7 @@ import { Wrapper, filterDropdownStyles, pageSizeDropdownStyles } from './styled'
 const Activity = () => {
   const [beforeCursor, setBeforeCursor] = useState<undefined | string>();
   const [afterCursor, setAfterCursor] = useState<undefined | string>();
-  const [filterValue, setFilterValue] = useState<undefined | string>();
+  const [filterValue, setFilterValue] = useState<undefined | ActivityEvent>();
 
   const [pageNumber, setPageNumber] = useState(1);
   const [pageSize, setPageSize] = useState(activityPageSizes[0]);
@@ -44,7 +45,7 @@ const Activity = () => {
   };
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setFilterValue(event.target.value);
+    setFilterValue(event.target.value as ActivityEvent);
     resetState();
   };
 

components/pages/activity/components/ActivityPagination/ActivityPagination.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 
 import PaginationButton from 'components/shared/atoms/PaginationButton';
 
-import { PageInfo } from 'types/activityType';
+// import { PageInfo } from 'types/activityType';
 
+import { Activities_activities_pageInfo } from 'graphql/queries/pages/__generated__/Activities';
 import { Wrapper, LeftPointerIcon, PageNumber, RightPointerIcon, prevButtonStyles, nextButtonStyles } from './styled';
 
 type ActivityPaginationType = {
-  pageInfo: PageInfo;
+  pageInfo: Activities_activities_pageInfo;
   setBeforeCursor: React.Dispatch<React.SetStateAction<string | undefined>>;
   setAfterCursor: React.Dispatch<React.SetStateAction<string | undefined>>;
   setPageNumber: React.Dispatch<React.SetStateAction<number>>;
@@ -24,13 +25,13 @@ const ActivityPagination = ({
   const { hasPreviousPage, hasNextPage, startCursor, endCursor } = pageInfo;
 
   const goToPrevPage = () => {
-    setBeforeCursor(startCursor);
+    setBeforeCursor(startCursor || undefined);
     setAfterCursor(undefined);
     setPageNumber((prevPageNumber) => prevPageNumber - 1);
   };
 
   const goToNextPage = () => {
-    setAfterCursor(endCursor);
+    setAfterCursor(endCursor || undefined);
     setBeforeCursor(undefined);
     setPageNumber((prevPageNumber) => prevPageNumber + 1);
   };

config/activityEvents.ts

@@ -1,7 +1,9 @@
+import { ActivityEvent } from '__generated__/globalTypes';
+
 export default [
-  { value: 'USER_LOGGED_IN', name: 'User logged in', color: '#00e676' },
-  { value: 'USER_REGISTERED', name: 'User registered', color: '#f50057' },
-  { value: 'USER_RESET_PASSWORD', name: 'User reset password', color: '#d500f9' },
-  { value: 'RESET_PASSWORD_REQUESTED', name: 'Reset password requested', color: '#ffea00' },
-  { value: 'USER_UPDATED', name: 'User updated', color: '#2979ff' },
+  { value: ActivityEvent.USER_LOGGED_IN, name: 'User logged in', color: '#00e676' },
+  { value: ActivityEvent.USER_REGISTERED, name: 'User registered', color: '#f50057' },
+  { value: ActivityEvent.USER_RESET_PASSWORD, name: 'User reset password', color: '#d500f9' },
+  { value: ActivityEvent.RESET_PASSWORD_REQUESTED, name: 'Reset password requested', color: '#ffea00' },
+  { value: ActivityEvent.USER_UPDATED, name: 'User updated', color: '#2979ff' },
 ];

customGraphql/uiState.graphql

@@ -0,0 +1,3 @@
+query UIState {
+  companySidebar @client
+}