Merge branch '274-orcid-sign-in' into 'development'

Resolve "ORCID Sign in"

Closes #274

See merge request !225

src/components/FunctionalArea/Modal/Modal.component.tsx

@@ -57,6 +57,11 @@ export const Modal = (): React.ReactNode => {
           <AccessDeniedModal />
         </ModalLayout>
       )}
+      {isOpen && modalName === 'select-project' && (
+        <ModalLayout>
+          <AccessDeniedModal />
+        </ModalLayout>
+      )}
       {isOpen && modalName === 'add-comment' && (
         <ModalLayout>
           <AddCommentModal />

src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx

@@ -29,6 +29,7 @@ export const ModalLayout = ({ children }: ModalLayoutProps): JSX.Element => {
             'flex h-5/6 w-10/12	flex-col	overflow-hidden rounded-lg',
             modalName === 'login' && 'h-auto w-[400px]',
             modalName === 'access-denied' && 'h-auto w-[400px]',
+            modalName === 'select-project' && 'h-auto w-[400px]',
             modalName === 'add-comment' && 'h-auto w-[400px]',
             modalName === 'error-report' && 'h-auto w-[800px]',
             ['edit-overlay', 'logged-in-menu'].includes(modalName) && 'h-auto w-[432px]',

src/redux/modal/modal.reducers.ts

@@ -73,6 +73,12 @@ export const openAccessDeniedModalReducer = (state: ModalState): void => {
   state.modalTitle = 'Access denied!';
 };
 
+export const openSelectProjectModalReducer = (state: ModalState): void => {
+  state.isOpen = true;
+  state.modalName = 'select-project';
+  state.modalTitle = 'Select project!';
+};
+
 export const setOverviewImageIdReducer = (
   state: ModalState,
   action: PayloadAction<number>,

src/redux/modal/modal.slice.ts

@@ -13,6 +13,7 @@ import {
   openAddCommentModalReducer,
   openErrorReportModalReducer,
   openAccessDeniedModalReducer,
+  openSelectProjectModalReducer,
 } from './modal.reducers';
 
 const modalSlice = createSlice({
@@ -31,6 +32,7 @@ const modalSlice = createSlice({
     openLoggedInMenuModal: openLoggedInMenuModalReducer,
     openErrorReportModal: openErrorReportModalReducer,
     openAccessDeniedModal: openAccessDeniedModalReducer,
+    openSelectProjectModal: openSelectProjectModalReducer,
   },
 });
 
@@ -47,6 +49,7 @@ export const {
   openLoggedInMenuModal,
   openErrorReportModal,
   openAccessDeniedModal,
+  openSelectProjectModal,
 } = modalSlice.actions;
 
 export default modalSlice.reducer;

src/redux/root/init.thunks.ts

@@ -12,6 +12,8 @@ import {
   getDrugAutocomplete,
   getSearchAutocomplete,
 } from '@/redux/autocomplete/autocomplete.thunks';
+import { openSelectProjectModal } from '@/redux/modal/modal.slice';
+import { getProjects } from '@/redux/projects/projects.thunks';
 import { getAllBackgroundsByProjectId } from '../backgrounds/backgrounds.thunks';
 import { getConfiguration, getConfigurationOptions } from '../configuration/configuration.thunks';
 import {
@@ -117,4 +119,8 @@ export const fetchInitialAppData = createAsyncThunk<
       dispatch(openOverlaysDrawer());
     }
   }
+  if (queryData.oauthLogin === 'success') {
+    await dispatch(getProjects());
+    dispatch(openSelectProjectModal());
+  }
 });

src/types/modal.ts

@@ -8,4 +8,5 @@ export type ModalName =
   | 'edit-overlay'
   | 'error-report'
   | 'access-denied'
+  | 'select-project'
   | 'logged-in-menu';

src/types/query.ts

@@ -9,6 +9,7 @@ export interface QueryData {
   initialPosition?: Partial<Point>;
   overlaysId?: number[];
   pluginsId?: string[];
+  oauthLogin?: string;
 }
 
 export interface QueryDataParams {
@@ -35,4 +36,5 @@ export interface QueryDataRouterParams {
   z?: string;
   overlaysId?: string;
   pluginsId?: string;
+  oauthLogin?: string;
 }

src/utils/parseQueryToTypes.ts

@@ -13,4 +13,5 @@ export const parseQueryToTypes = (query: QueryDataRouterParams): QueryData => ({
   },
   overlaysId: query.overlaysId?.split(',').map(Number),
   pluginsId: query.pluginsId?.split(',').map(String),
+  oauthLogin: query.oauthLogin,
 });