From 8623ee3518b4db69e85b00510240653b4b605b47 Mon Sep 17 00:00:00 2001 From: Arkajyoti Mukherjee <32966391+arkajyotiMukherjee@users.noreply.github.com> Date: Thu, 10 Sep 2020 12:05:56 +0530 Subject: [PATCH] chore: (litmus-portal) Refactoring and bug fixes (#2027) This commit has the following changes: - folder structure change for models and useEffect fixes - user redux fixed - graphql documents re-organised Signed-off-by: arkajyotiMukherjee --- .../BrowseSchedule/TableData.tsx | 2 +- .../ChaosWorkflows/BrowseSchedule/index.tsx | 2 +- .../BrowseWorkflow/TableData.tsx | 5 +- .../ChaosWorkflows/BrowseWorkflow/index.tsx | 2 +- .../CreateWorkflow/ReliabilityScore/index.tsx | 12 +- .../CreateWorkflow/TuneWorkflow/index.tsx | 8 +- .../CreateWorkflow/VerifyCommit/index.tsx | 4 +- .../AccountsTab/PersonalDetails/index.tsx | 14 +- .../Invitation/ReceivedInvitations/index.tsx | 43 +++--- .../Invitation/SentInvitations/index.tsx | 20 ++- .../TeammingTab/InviteNew/Invite/index.tsx | 12 +- .../Sections/Settings/TeammingTab/index.tsx | 12 +- .../WorkflowDetails/ArgoWorkflow/index.tsx | 2 +- .../WorkflowDetails/WorkflowInfo/index.tsx | 2 +- .../src/components/WorkflowStepper/index.tsx | 12 +- .../frontend/src/containers/app/App.tsx | 2 +- .../layouts/Header/ProfileDropdownItems.tsx | 17 +-- .../layouts/Header/ProfileDropdownSection.tsx | 1 - .../layouts/Header/ProjectListItem.tsx | 4 +- .../src/containers/layouts/Header/index.tsx | 22 +-- litmus-portal/frontend/src/graphql/index.ts | 127 +----------------- .../frontend/src/graphql/mutations.ts | 47 +++++++ litmus-portal/frontend/src/graphql/quries.ts | 65 +++++++++ .../frontend/src/graphql/subscriptions.ts | 16 +++ .../createWorkflowData.ts} | 0 .../src/models/{ => graphql}/invite.ts | 0 .../frontend/src/models/graphql/user.ts | 37 +++++ .../src/models/{ => graphql}/workflowData.ts | 0 litmus-portal/frontend/src/models/project.ts | 15 --- .../src/models/{ => redux}/analytics.ts | 0 .../frontend/src/models/{ => redux}/index.ts | 0 .../src/models/{ => redux}/nodeSelection.ts | 2 +- .../frontend/src/models/redux/user.ts | 26 ++++ .../src/models/{ => redux}/workflow.ts | 0 litmus-portal/frontend/src/models/user.ts | 48 ------- .../frontend/src/pages/HomePage/index.tsx | 12 +- .../src/pages/WorkflowDetails/index.tsx | 2 +- .../frontend/src/redux/actions/analytics.ts | 2 +- .../src/redux/actions/nodeSelection.ts | 4 +- .../frontend/src/redux/actions/user.ts | 28 ++-- .../frontend/src/redux/actions/workflow.ts | 2 +- .../frontend/src/redux/reducers/analytics.ts | 2 +- .../src/redux/reducers/createReducer.ts | 2 +- .../frontend/src/redux/reducers/index.ts | 8 +- .../src/redux/reducers/nodeSelection.ts | 4 +- .../frontend/src/redux/reducers/user.ts | 9 +- .../frontend/src/redux/reducers/workflow.ts | 2 +- 47 files changed, 329 insertions(+), 329 deletions(-) create mode 100644 litmus-portal/frontend/src/graphql/mutations.ts create mode 100644 litmus-portal/frontend/src/graphql/quries.ts create mode 100644 litmus-portal/frontend/src/graphql/subscriptions.ts rename litmus-portal/frontend/src/models/{CreateWorkflowData.ts => graphql/createWorkflowData.ts} (100%) rename litmus-portal/frontend/src/models/{ => graphql}/invite.ts (100%) create mode 100644 litmus-portal/frontend/src/models/graphql/user.ts rename litmus-portal/frontend/src/models/{ => graphql}/workflowData.ts (100%) delete mode 100644 litmus-portal/frontend/src/models/project.ts rename litmus-portal/frontend/src/models/{ => redux}/analytics.ts (100%) rename litmus-portal/frontend/src/models/{ => redux}/index.ts (100%) rename litmus-portal/frontend/src/models/{ => redux}/nodeSelection.ts (84%) create mode 100644 litmus-portal/frontend/src/models/redux/user.ts rename litmus-portal/frontend/src/models/{ => redux}/workflow.ts (100%) delete mode 100644 litmus-portal/frontend/src/models/user.ts diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx index 59128173beb..d257cbd2bb2 100644 --- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx +++ b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx @@ -12,7 +12,7 @@ import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import moment from 'moment'; import React from 'react'; -import { WorkflowRun } from '../../../../models/workflowData'; +import { WorkflowRun } from '../../../../models/graphql/workflowData'; import { history } from '../../../../redux/configureStore'; import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar'; import useStyles from './styles'; diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx index 4eb04b3c85b..c31fa1ee0a4 100644 --- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx @@ -27,7 +27,7 @@ import { Workflow, WorkflowDataVars, WorkflowRun, -} from '../../../../models/workflowData'; +} from '../../../../models/graphql/workflowData'; import { RootState } from '../../../../redux/reducers'; import { sortAlphaAsc, diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx index 621d5c450bf..7477f8c3c8b 100644 --- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx +++ b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx @@ -7,7 +7,10 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import React from 'react'; -import { ExecutionData, WorkflowRun } from '../../../../models/workflowData'; +import { + ExecutionData, + WorkflowRun, +} from '../../../../models/graphql/workflowData'; import { history } from '../../../../redux/configureStore'; import timeDifferenceForDate from '../../../../utils/datesModifier'; import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar'; diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx index e2447e05164..55b9a10976a 100644 --- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx @@ -22,7 +22,7 @@ import { WorkflowDataVars, WorkflowRun, WorkflowSubscription, -} from '../../../../models/workflowData'; +} from '../../../../models/graphql/workflowData'; import { RootState } from '../../../../redux/reducers'; import { sortAlphaAsc, diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx index 96f8b4982f5..3acc505ec7f 100644 --- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx @@ -2,17 +2,17 @@ import { Typography } from '@material-ui/core'; import React from 'react'; import { useSelector } from 'react-redux'; import Center from '../../../../containers/layouts/Center'; +import Unimodal from '../../../../containers/layouts/Unimodal'; +import { experimentMap, WorkflowData } from '../../../../models/redux/workflow'; +import useActions from '../../../../redux/actions'; +import * as WorkflowActions from '../../../../redux/actions/workflow'; +import { RootState } from '../../../../redux/reducers'; import ButtonFilled from '../../../Button/ButtonFilled'; import ButtonOutline from '../../../Button/ButtonOutline'; -import WeightSlider from '../WeightSlider'; import InfoTooltip from '../../../InfoTooltip'; +import WeightSlider from '../WeightSlider'; import ResultTable from './ResultTable'; import useStyles from './styles'; -import { WorkflowData, experimentMap } from '../../../../models/workflow'; -import { RootState } from '../../../../redux/reducers'; -import useActions from '../../../../redux/actions'; -import * as WorkflowActions from '../../../../redux/actions/workflow'; -import Unimodal from '../../../../containers/layouts/Unimodal'; const ReliablityScore = () => { const classes = useStyles(); diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx index 8a1ee0d9246..7b653b758ea 100644 --- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx @@ -1,15 +1,15 @@ -import React, { useState, useEffect } from 'react'; import { Typography } from '@material-ui/core'; import Divider from '@material-ui/core/Divider'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import YAML from 'yaml'; -import useStyles from './styles'; -import { WorkflowData } from '../../../../models/workflow'; -import { RootState } from '../../../../redux/reducers'; +import { WorkflowData } from '../../../../models/redux/workflow'; import useActions from '../../../../redux/actions'; import * as WorkflowActions from '../../../../redux/actions/workflow'; +import { RootState } from '../../../../redux/reducers'; import Loader from '../../../Loader'; import YamlEditor from '../../../YamlEditor/Editor'; +import useStyles from './styles'; const TuneWorkflow: React.FC = () => { const classes = useStyles(); diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx index 86f745b64bd..c96eec92f3d 100644 --- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx @@ -1,7 +1,8 @@ import { Divider, Typography } from '@material-ui/core'; import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -import { experimentMap, WorkflowData } from '../../../../models/workflow'; +import Unimodal from '../../../../containers/layouts/Unimodal'; +import { experimentMap, WorkflowData } from '../../../../models/redux/workflow'; import useActions from '../../../../redux/actions'; import * as WorkflowActions from '../../../../redux/actions/workflow'; import { RootState } from '../../../../redux/reducers'; @@ -17,7 +18,6 @@ import { parseYamlValidations, } from '../../../YamlEditor/Validations'; import useStyles from './styles'; -import Unimodal from '../../../../containers/layouts/Unimodal'; interface VerifyCommitProps { gotoStep: (page: number) => void; diff --git a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx b/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx index f75e96bbd3a..41a5916623d 100644 --- a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx @@ -1,17 +1,16 @@ +import { useQuery } from '@apollo/client'; import { Button, Typography } from '@material-ui/core'; import React from 'react'; import { useSelector } from 'react-redux'; -import { useQuery } from '@apollo/client'; +import Unimodal from '../../../../../containers/layouts/Unimodal'; +import { GET_USER } from '../../../../../graphql'; import { - UserData, - CurrentUserDetails, CurrentUserDedtailsVars, -} from '../../../../../models/user'; + CurrentUserDetails, +} from '../../../../../models/graphql/user'; import { RootState } from '../../../../../redux/reducers'; import UserDetails from '../../UserManagementTab/CreateUser/UserDetails'; import useStyles from './styles'; -import Unimodal from '../../../../../containers/layouts/Unimodal'; -import { GET_USER } from '../../../../../graphql'; interface personaData { email: string; @@ -22,8 +21,7 @@ interface personaData { // Displays the personals details on the "accounts" tab const PersonalDetails: React.FC = () => { const classes = useStyles(); - const userData: UserData = useSelector((state: RootState) => state.userData); - const { username } = userData; + const username = useSelector((state: RootState) => state.userData.username); // Query to get user details const { data } = useQuery( diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx index f3643fb84e4..2cc4f6c79c5 100644 --- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx @@ -14,12 +14,11 @@ import { DECLINE_INVITE, GET_USER, } from '../../../../../../graphql'; -import { MemberInvitation } from '../../../../../../models/invite'; -import { Project } from '../../../../../../models/project'; +import { MemberInvitation } from '../../../../../../models/graphql/invite'; import { CurrentUserDedtailsVars, CurrentUserDetails, -} from '../../../../../../models/user'; +} from '../../../../../../models/graphql/user'; import { RootState } from '../../../../../../redux/reducers'; import userAvatar from '../../../../../../utils/user'; import ButtonFilled from '../../../../../Button/ButtonFilled'; @@ -39,7 +38,7 @@ const ReceivedInvitations: React.FC = () => { // for response data const [rows, setRows] = useState([]); - const { userData } = useSelector((state: RootState) => state); + const username = useSelector((state: RootState) => state.userData.username); // stores the user whose invitation is accepted/declined const [acceptDecline, setAcceptDecline] = useState(''); @@ -54,9 +53,7 @@ const ReceivedInvitations: React.FC = () => { ); }, onError: () => {}, - refetchQueries: [ - { query: GET_USER, variables: { username: userData.username } }, - ], + refetchQueries: [{ query: GET_USER, variables: { username } }], }); // mutation to decline the invitation @@ -69,22 +66,18 @@ const ReceivedInvitations: React.FC = () => { ); }, onError: () => {}, - refetchQueries: [ - { query: GET_USER, variables: { username: userData.username } }, - ], + refetchQueries: [{ query: GET_USER, variables: { username } }], }); // query for getting all the data for the logged in user - const { data, loading } = useQuery< - CurrentUserDetails, - CurrentUserDedtailsVars - >(GET_USER, { - variables: { username: userData.username }, - }); + const { data } = useQuery( + GET_USER, + { variables: { username } } + ); useEffect(() => { - if (data?.getUser.username === userData.username) { - const projectList: Project[] = data?.getUser.projects; + if (data?.getUser.username === username) { + const projectList = data?.getUser.projects; let users: ReceivedInvitation[] = []; let flag = 0; @@ -92,7 +85,7 @@ const ReceivedInvitations: React.FC = () => { projectList.forEach((project) => { project.members.forEach((member) => { if ( - member.user_name === userData.username && + member.user_name === username && member.role !== 'Owner' && member.invitation === 'Pending' ) { @@ -101,10 +94,7 @@ const ReceivedInvitations: React.FC = () => { }); if (flag === 1) { project.members.forEach((member) => { - if ( - member.user_name !== userData.username && - member.role === 'Owner' - ) { + if (member.user_name !== username && member.role === 'Owner') { users = users.concat(rows, { username: member.user_name, role: member.role, @@ -119,7 +109,8 @@ const ReceivedInvitations: React.FC = () => { setRows(users); } - }, [loading]); + }, [data]); + return (
@@ -153,7 +144,7 @@ const ReceivedInvitations: React.FC = () => { variables: { member: { project_id: row.projectID, - user_name: userData.username, + user_name: username, }, }, }); @@ -170,7 +161,7 @@ const ReceivedInvitations: React.FC = () => { variables: { member: { project_id: row.projectID, - user_name: userData.username, + user_name: username, }, }, }); diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx index edba493be54..1e372091f23 100644 --- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx @@ -10,11 +10,11 @@ import { import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { GET_USER } from '../../../../../../graphql'; -import { Member, Project } from '../../../../../../models/project'; import { CurrentUserDedtailsVars, CurrentUserDetails, -} from '../../../../../../models/user'; + Member, +} from '../../../../../../models/graphql/user'; import { RootState } from '../../../../../../redux/reducers'; import userAvatar from '../../../../../../utils/user'; import ButtonFilled from '../../../../../Button/ButtonFilled'; @@ -25,21 +25,19 @@ const SentInvitations: React.FC = () => { // for response data const [rows, setRows] = useState([]); - const { userData } = useSelector((state: RootState) => state); + const userData = useSelector((state: RootState) => state.userData); // query for getting all the data for the logged in user - const { data, loading } = useQuery< - CurrentUserDetails, - CurrentUserDedtailsVars - >(GET_USER, { - variables: { username: userData.username }, - }); + const { data } = useQuery( + GET_USER, + { variables: { username: userData.username } } + ); let memberList: Member[]; let users: Member[] = []; useEffect(() => { if (data?.getUser.username === userData.username) { - const projectList: Project[] = data?.getUser.projects; + const projectList = data?.getUser.projects; projectList.forEach((project) => { if (project.id === userData.selectedProjectID) { @@ -54,7 +52,7 @@ const SentInvitations: React.FC = () => { setRows(users); }); } - }, [loading]); + }, [data]); return (
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx index ce35307d182..4381b12d49c 100644 --- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx @@ -12,12 +12,12 @@ import { import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { ALL_USERS, GET_USER, SEND_INVITE } from '../../../../../../graphql'; -import { MemberInviteNew } from '../../../../../../models/invite'; -import { Project } from '../../../../../../models/project'; +import { MemberInviteNew } from '../../../../../../models/graphql/invite'; import { CurrentUserDedtailsVars, CurrentUserDetails, -} from '../../../../../../models/user'; + Project, +} from '../../../../../../models/graphql/user'; import { RootState } from '../../../../../../redux/reducers'; import ButtonFilled from '../../../../../Button/ButtonFilled'; import Loader from '../../../../../Loader'; @@ -55,7 +55,7 @@ const Invite: React.FC = ({ handleModal }) => { // for response data const [rows, setRows] = useState([]); - const { userData } = useSelector((state: RootState) => state); + const userData = useSelector((state: RootState) => state.userData); // for setting the role of the user while sending invitation const [roles, setRoles] = useState([]); @@ -80,9 +80,7 @@ const Invite: React.FC = ({ handleModal }) => { // query for getting all the data for the logged in user const { data: dataB } = useQuery( GET_USER, - { - variables: { username: userData.username }, - } + { variables: { username: userData.username } } ); // query to list all the users diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx index f2b4516560d..93b0f464c17 100644 --- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx @@ -27,11 +27,11 @@ import moment from 'moment'; import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { GET_USER } from '../../../../graphql'; -import { Member, Project } from '../../../../models/project'; import { CurrentUserDedtailsVars, CurrentUserDetails, -} from '../../../../models/user'; + Member, +} from '../../../../models/graphql/user'; import { RootState } from '../../../../redux/reducers'; import userAvatar from '../../../../utils/user'; import DelUser from '../UserManagementTab/EditUser/DelUser'; @@ -64,7 +64,7 @@ interface PaginationData { // TeammingTab displays team member table const TeammingTab: React.FC = () => { const classes = useStyles(); - const { userData } = useSelector((state: RootState) => state); + const userData = useSelector((state: RootState) => state.userData); // for response data const [rows, setRows] = useState([]); @@ -72,9 +72,7 @@ const TeammingTab: React.FC = () => { // query for getting all the data for the logged in user const { data } = useQuery( GET_USER, - { - variables: { username: userData.username }, - } + { variables: { username: userData.username } } ); // State for pagination @@ -96,7 +94,7 @@ const TeammingTab: React.FC = () => { let users: Member[] = []; useEffect(() => { if (data?.getUser.username === userData.username) { - const projectList: Project[] = data?.getUser.projects; + const projectList = data?.getUser.projects; projectList.forEach((project) => { if (project.id === userData.selectedProjectID) { diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx index 28f3978a750..dad0c413ce0 100644 --- a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Nodes } from '../../../../models/workflowData'; +import { Nodes } from '../../../../models/graphql/workflowData'; import useActions from '../../../../redux/actions'; import * as NodeSelectionActions from '../../../../redux/actions/nodeSelection'; import DagreGraph, { d3Link, d3Node } from '../../../DagreGraph'; diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx b/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx index ce02591af02..670410d2510 100644 --- a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx @@ -3,7 +3,7 @@ import { Typography } from '@material-ui/core'; import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -import { ExecutionData } from '../../../../models/workflowData'; +import { ExecutionData } from '../../../../models/graphql/workflowData'; import { RootState } from '../../../../redux/reducers'; import timeDifference from '../../../../utils/datesModifier'; import useStyles from './styles'; diff --git a/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx b/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx index bd549c3f4ce..f74e1031e66 100644 --- a/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx +++ b/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx @@ -9,7 +9,12 @@ import { useSelector } from 'react-redux'; import YAML from 'yaml'; import Unimodal from '../../containers/layouts/Unimodal'; import { CREATE_WORKFLOW } from '../../graphql'; -import { experimentMap, WorkflowData } from '../../models/workflow'; +import { + CreateWorkFlowInput, + CreateWorkflowResponse, + WeightMap, +} from '../../models/graphql/createWorkflowData'; +import { experimentMap, WorkflowData } from '../../models/redux/workflow'; import useActions from '../../redux/actions'; import * as WorkflowActions from '../../redux/actions/workflow'; import { history } from '../../redux/configureStore'; @@ -26,11 +31,6 @@ import ChooseAWorkflowCluster from '../Sections/CreateWorkflow/WorkflowCluster'; import QontoConnector from './quontoConnector'; import useStyles from './styles'; import useQontoStepIconStyles from './useQontoStepIconStyles'; -import { - CreateWorkFlowInput, - CreateWorkflowResponse, - WeightMap, -} from '../../models/CreateWorkflowData'; function getSteps(): string[] { return [ diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx index a9827338371..62ec2727b3c 100644 --- a/litmus-portal/frontend/src/containers/app/App.tsx +++ b/litmus-portal/frontend/src/containers/app/App.tsx @@ -2,7 +2,7 @@ import React, { lazy, Suspense, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { Redirect, Route, Router, Switch } from 'react-router-dom'; import Loader from '../../components/Loader'; -import { UserData } from '../../models/user'; +import { UserData } from '../../models/redux/user'; import useActions from '../../redux/actions'; import * as AnalyticsActions from '../../redux/actions/analytics'; import { history } from '../../redux/configureStore'; diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx index bb505e16ae0..6be3f268191 100644 --- a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx @@ -1,4 +1,5 @@ /* eslint-disable react/no-array-index-key */ +import { useQuery } from '@apollo/client'; import { Avatar, Button, @@ -11,21 +12,21 @@ import { } from '@material-ui/core'; import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -import { useQuery } from '@apollo/client'; import config from '../../../config'; +import { GET_USER } from '../../../graphql'; +import { + CurrentUserDedtailsVars, + CurrentUserDetails, + Member, + Project, +} from '../../../models/graphql/user'; import { ProjectsCallBackType } from '../../../models/header'; import useActions from '../../../redux/actions'; import * as UserActions from '../../../redux/actions/user'; import { RootState } from '../../../redux/reducers'; +import userAvatar from '../../../utils/user'; import ProjectListItem from './ProjectListItem'; import useStyles from './styles'; -import { Member, Project } from '../../../models/project'; -import userAvatar from '../../../utils/user'; -import { - CurrentUserDedtailsVars, - CurrentUserDetails, -} from '../../../models/user'; -import { GET_USER } from '../../../graphql'; interface ProfileInfoDropdownItemProps { anchorEl: HTMLElement; diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx index 6140e699d5c..683a2b0721c 100644 --- a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ import { Box, IconButton } from '@material-ui/core'; import Avatar from '@material-ui/core/Avatar'; import Typography from '@material-ui/core/Typography'; diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx b/litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx index e982c3a08ea..77c3030df4c 100644 --- a/litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx @@ -10,9 +10,9 @@ import CheckCircleSharpIcon from '@material-ui/icons/CheckCircleSharp'; import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined'; import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; import React, { useState } from 'react'; -import useStyles from './styles'; +import { Project } from '../../../models/graphql/user'; import { ProjectsCallBackType } from '../../../models/header'; -import { Project } from '../../../models/project'; +import useStyles from './styles'; interface ProjectListItemProps { project: Project; diff --git a/litmus-portal/frontend/src/containers/layouts/Header/index.tsx b/litmus-portal/frontend/src/containers/layouts/Header/index.tsx index 168939e76e8..943f50516c4 100644 --- a/litmus-portal/frontend/src/containers/layouts/Header/index.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Header/index.tsx @@ -6,20 +6,20 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import CustomBreadCrumbs from '../../../components/BreadCrumbs'; -import { Message, NotificationIds } from '../../../models/header'; +import { GET_USER } from '../../../graphql'; import { CurrentUserDedtailsVars, CurrentUserDetails, - UserData, -} from '../../../models/user'; + Member, + Project, +} from '../../../models/graphql/user'; +import { Message, NotificationIds } from '../../../models/header'; +import useActions from '../../../redux/actions'; +import * as UserActions from '../../../redux/actions/user'; import { RootState } from '../../../redux/reducers'; import NotificationsDropdown from './NotificationDropdown'; import ProfileDropdownSection from './ProfileDropdownSection'; import useStyles from './styles'; -import { GET_USER } from '../../../graphql'; -import { Member, Project } from '../../../models/project'; -import useActions from '../../../redux/actions'; -import * as UserActions from '../../../redux/actions/user'; interface SelectedProjectDetails { selectedProjectID: string; @@ -29,13 +29,13 @@ interface SelectedProjectDetails { const Header: React.FC = () => { const classes = useStyles(); - const userData: UserData = useSelector((state: RootState) => state.userData); - const { username } = userData; + const userData = useSelector((state: RootState) => state.userData); + const user = useActions(UserActions); // Query to get user details const { data } = useQuery( GET_USER, - { variables: { username } } + { variables: { username: userData.username } } ); const name: string = data?.getUser.name ?? ''; const email: string = data?.getUser.email ?? ''; @@ -171,7 +171,7 @@ const Header: React.FC = () => { { + type: T; + payload: P; +} + +export type UserAction = + | UserActionType + | UserActionType + | UserActionType; diff --git a/litmus-portal/frontend/src/models/workflow.ts b/litmus-portal/frontend/src/models/redux/workflow.ts similarity index 100% rename from litmus-portal/frontend/src/models/workflow.ts rename to litmus-portal/frontend/src/models/redux/workflow.ts diff --git a/litmus-portal/frontend/src/models/user.ts b/litmus-portal/frontend/src/models/user.ts deleted file mode 100644 index 163523a87f9..00000000000 --- a/litmus-portal/frontend/src/models/user.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Project } from './project'; - -export interface UserData { - selectedProjectID: string; - username: string; - exp: number; - token: string; - selectedProjectName: string; - userRole: string; -} - -export interface UserDetails { - username: string; - projects: Project[]; - name: string; - email: string; - company_name: string; - updated_at: string; - created_at: string; - removed_at: string; - is_email_verified: string; - state: string; - role: string; -} - -export interface CurrentUserDetails { - getUser: UserDetails; -} - -export interface CurrentUserDedtailsVars { - username: string; -} - -export enum UserActions { - LOAD_USER_DETAILS = 'LOAD_USER_DETAILS', - UPDATE_USER_DETAILS = 'UPDATE_USER_DETAILS', - LOGOUT_USER = 'LOGOUT_USER', -} - -interface UserActionType { - type: T; - payload: P; -} - -export type UserAction = - | UserActionType - | UserActionType - | UserActionType; diff --git a/litmus-portal/frontend/src/pages/HomePage/index.tsx b/litmus-portal/frontend/src/pages/HomePage/index.tsx index 3fcf0b9bf75..d742c0a4832 100644 --- a/litmus-portal/frontend/src/pages/HomePage/index.tsx +++ b/litmus-portal/frontend/src/pages/HomePage/index.tsx @@ -11,8 +11,12 @@ import QuickActionCard from '../../components/QuickActionCard'; import WelcomeModal from '../../components/WelcomeModal'; import Scaffold from '../../containers/layouts/Scaffold'; import { GET_USER } from '../../graphql'; -import { Member, Project } from '../../models/project'; -import { CurrentUserDedtailsVars, CurrentUserDetails } from '../../models/user'; +import { + CurrentUserDedtailsVars, + CurrentUserDetails, + Member, + Project, +} from '../../models/graphql/user'; import useActions from '../../redux/actions'; import * as UserActions from '../../redux/actions/user'; import { RootState } from '../../redux/reducers'; @@ -49,7 +53,7 @@ const CreateWorkflowCard = () => { const HomePage = () => { const [isOpen, setIsOpen] = useState(true); - const { userData } = useSelector((state: RootState) => state); + const userData = useSelector((state: RootState) => state.userData); const classes = useStyles(); const { t } = useTranslation(); const user = useActions(UserActions); @@ -92,7 +96,7 @@ const HomePage = () => { }); } } - }, [loading]); + }, [data]); return (
diff --git a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx b/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx index 5ba50d58079..e36965afd44 100644 --- a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx +++ b/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx @@ -13,7 +13,7 @@ import { Workflow, WorkflowDataVars, WorkflowSubscription, -} from '../../models/workflowData'; +} from '../../models/graphql/workflowData'; import { RootState } from '../../redux/reducers'; import useStyles from './styles'; diff --git a/litmus-portal/frontend/src/redux/actions/analytics.ts b/litmus-portal/frontend/src/redux/actions/analytics.ts index 4b8d26ae00a..48973bc3c59 100644 --- a/litmus-portal/frontend/src/redux/actions/analytics.ts +++ b/litmus-portal/frontend/src/redux/actions/analytics.ts @@ -1,6 +1,6 @@ /* eslint-disable import/prefer-default-export */ import config from '../../config'; -import { AnalyticsActions } from '../../models/analytics'; +import { AnalyticsActions } from '../../models/redux/analytics'; export const loadCommunityAnalytics = () => (dispatch: Function) => { fetch(`${config.analytics.url}`) diff --git a/litmus-portal/frontend/src/redux/actions/nodeSelection.ts b/litmus-portal/frontend/src/redux/actions/nodeSelection.ts index 7a7f69847c9..95ea7612f8c 100644 --- a/litmus-portal/frontend/src/redux/actions/nodeSelection.ts +++ b/litmus-portal/frontend/src/redux/actions/nodeSelection.ts @@ -1,9 +1,9 @@ /* eslint-disable import/prefer-default-export */ +import { Node } from '../../models/graphql/workflowData'; import { NodeSelectionAction, NodeSelectionActions, -} from '../../models/nodeSelection'; -import { Node } from '../../models/workflowData'; +} from '../../models/redux/nodeSelection'; export function selectNode(node: Node): NodeSelectionAction { return { diff --git a/litmus-portal/frontend/src/redux/actions/user.ts b/litmus-portal/frontend/src/redux/actions/user.ts index 4df0b64d8de..5d6955956c8 100644 --- a/litmus-portal/frontend/src/redux/actions/user.ts +++ b/litmus-portal/frontend/src/redux/actions/user.ts @@ -1,25 +1,23 @@ /* eslint-disable import/prefer-default-export */ -import { UserActions } from '../../models/user'; +import { UpdateUser, UserActions } from '../../models/redux/user'; -export const setUserDetails = (jwt: string) => (dispatch: Function) => { - dispatch({ +export function setUserDetails(jwt: string) { + return { type: UserActions.LOAD_USER_DETAILS, payload: jwt, - }); -}; + }; +} -export const updateUserDetails = (data: { selectedProjectID: string }) => ( - dispatch: Function -) => { - dispatch({ +export function updateUserDetails(data: UpdateUser) { + return { type: UserActions.UPDATE_USER_DETAILS, payload: data, - }); -}; + }; +} -export const userLogout = () => (dispatch: Function) => { - dispatch({ +export function userLogout() { + return { type: UserActions.LOGOUT_USER, payload: '', - }); -}; + }; +} diff --git a/litmus-portal/frontend/src/redux/actions/workflow.ts b/litmus-portal/frontend/src/redux/actions/workflow.ts index 0b62ce0a015..6bf06f5cbe3 100644 --- a/litmus-portal/frontend/src/redux/actions/workflow.ts +++ b/litmus-portal/frontend/src/redux/actions/workflow.ts @@ -1,5 +1,5 @@ /* eslint-disable import/prefer-default-export */ -import { WorkflowActions, experimentMap } from '../../models/workflow'; +import { experimentMap, WorkflowActions } from '../../models/redux/workflow'; export const setWorkflowDetails = (data: { name: string; diff --git a/litmus-portal/frontend/src/redux/reducers/analytics.ts b/litmus-portal/frontend/src/redux/reducers/analytics.ts index 33198bc05a2..da977dc0fc3 100644 --- a/litmus-portal/frontend/src/redux/reducers/analytics.ts +++ b/litmus-portal/frontend/src/redux/reducers/analytics.ts @@ -4,7 +4,7 @@ import { CommunityData, GeoCity, SeriesData, -} from '../../models/analytics'; +} from '../../models/redux/analytics'; import createReducer from './createReducer'; const initialState: CommunityData = { diff --git a/litmus-portal/frontend/src/redux/reducers/createReducer.ts b/litmus-portal/frontend/src/redux/reducers/createReducer.ts index 4b5f1043902..7ef197f16a6 100644 --- a/litmus-portal/frontend/src/redux/reducers/createReducer.ts +++ b/litmus-portal/frontend/src/redux/reducers/createReducer.ts @@ -1,6 +1,6 @@ /* eslint-disable no-prototype-builtins */ import { Reducer } from 'redux'; -import { Action } from '../../models'; +import { Action } from '../../models/redux'; export default function createReducer( initialState: S, diff --git a/litmus-portal/frontend/src/redux/reducers/index.ts b/litmus-portal/frontend/src/redux/reducers/index.ts index 2757df72017..883fa16a310 100644 --- a/litmus-portal/frontend/src/redux/reducers/index.ts +++ b/litmus-portal/frontend/src/redux/reducers/index.ts @@ -1,8 +1,8 @@ import { combineReducers } from 'redux'; -import { CommunityData } from '../../models/analytics'; -import { UserData } from '../../models/user'; -import { WorkflowData } from '../../models/workflow'; -import { Node } from '../../models/workflowData'; +import { Node } from '../../models/graphql/workflowData'; +import { CommunityData } from '../../models/redux/analytics'; +import { UserData } from '../../models/redux/user'; +import { WorkflowData } from '../../models/redux/workflow'; import * as analyticsReducer from './analytics'; import * as nodeSelectionReducer from './nodeSelection'; import * as userReducer from './user'; diff --git a/litmus-portal/frontend/src/redux/reducers/nodeSelection.ts b/litmus-portal/frontend/src/redux/reducers/nodeSelection.ts index ccee66a2c0a..21e85d95e3c 100644 --- a/litmus-portal/frontend/src/redux/reducers/nodeSelection.ts +++ b/litmus-portal/frontend/src/redux/reducers/nodeSelection.ts @@ -1,8 +1,8 @@ +import { Node } from '../../models/graphql/workflowData'; import { NodeSelectionAction, NodeSelectionActions, -} from '../../models/nodeSelection'; -import { Node } from '../../models/workflowData'; +} from '../../models/redux/nodeSelection'; import createReducer from './createReducer'; const initialState: Node = { diff --git a/litmus-portal/frontend/src/redux/reducers/user.ts b/litmus-portal/frontend/src/redux/reducers/user.ts index 143a0224c79..14b328ff71d 100644 --- a/litmus-portal/frontend/src/redux/reducers/user.ts +++ b/litmus-portal/frontend/src/redux/reducers/user.ts @@ -1,6 +1,11 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import jwtDecode from 'jsonwebtoken'; -import { UserAction, UserActions, UserData } from '../../models/user'; +import { + UpdateUser, + UserAction, + UserActions, + UserData, +} from '../../models/redux/user'; import { setCookie } from '../../utils/cookies'; import createReducer from './createReducer'; @@ -34,7 +39,7 @@ export const userData = createReducer(initialState, { [UserActions.UPDATE_USER_DETAILS](state: UserData, action: UserAction) { return { ...state, - ...(action.payload as Object), + ...(action.payload as UpdateUser), }; }, [UserActions.LOGOUT_USER](state: UserData, action: UserAction) { diff --git a/litmus-portal/frontend/src/redux/reducers/workflow.ts b/litmus-portal/frontend/src/redux/reducers/workflow.ts index 2e831f06e37..7a2a5065027 100644 --- a/litmus-portal/frontend/src/redux/reducers/workflow.ts +++ b/litmus-portal/frontend/src/redux/reducers/workflow.ts @@ -3,7 +3,7 @@ import { WorkflowAction, WorkflowActions, WorkflowData, -} from '../../models/workflow'; +} from '../../models/redux/workflow'; import createReducer from './createReducer'; const initialState: WorkflowData = {