diff --git a/litmus-portal/frontend/.eslintrc.json b/litmus-portal/frontend/.eslintrc.json index cf6e07f00..0ebe8a915 100644 --- a/litmus-portal/frontend/.eslintrc.json +++ b/litmus-portal/frontend/.eslintrc.json @@ -18,7 +18,6 @@ } }, "rules": { - "import/no-cycle": 0, "new-cap": 0, "no-underscore-dangle": 0, "react/static-property-placement": [ diff --git a/litmus-portal/frontend/client_id b/litmus-portal/frontend/client_id new file mode 100644 index 000000000..50b5f15b6 --- /dev/null +++ b/litmus-portal/frontend/client_id @@ -0,0 +1 @@ +273b5b51-0311-4d9e-a428-e5abca4d6a51 \ No newline at end of file diff --git a/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx b/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx index 7df51b204..337f8f067 100644 --- a/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx +++ b/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx @@ -23,7 +23,7 @@ import { import { ProjectsCallBackType } from '../../models/header'; import useActions from '../../redux/actions'; import * as UserActions from '../../redux/actions/user'; -import { history } from '../../redux/configureStore'; +import configureStore, { history } from '../../redux/configureStore'; import { RootState } from '../../redux/reducers'; import getToken from '../../utils/getToken'; import userAvatar from '../../utils/user'; @@ -67,10 +67,11 @@ const ProfileInfoDropdownItems: React.FC = ({ const [switchableProjects, setSwitchableProjects] = useState([]); const [loggedOut, doLogout] = useState(false); const userData = useSelector((state: RootState) => state.userData); + // Use the persistor object + const { persistor } = configureStore(); const logOut = () => { doLogout(true); - user.userLogout(); fetch(`${config.auth.url}/logout`, { method: 'POST', @@ -86,6 +87,9 @@ const ProfileInfoDropdownItems: React.FC = ({ .catch((err) => { console.error(err); }); + user.userLogout(); + // Clear data from persistor + persistor.purge(); }; const CallbackFromProjectListItem = (selectedProjectIDFromList: string) => { diff --git a/litmus-portal/frontend/src/components/Header/index.tsx b/litmus-portal/frontend/src/components/Header/index.tsx index 4c31f85e7..1809af60f 100644 --- a/litmus-portal/frontend/src/components/Header/index.tsx +++ b/litmus-portal/frontend/src/components/Header/index.tsx @@ -15,6 +15,7 @@ import { import { Message, NotificationIds } from '../../models/header'; import useActions from '../../redux/actions'; import * as UserActions from '../../redux/actions/user'; +import configureStore from '../../redux/configureStore'; import { RootState } from '../../redux/reducers'; import CustomBreadCrumbs from '../BreadCrumbs'; import NotificationsDropdown from './NotificationDropdown'; @@ -30,8 +31,10 @@ interface SelectedProjectDetails { const Header: React.FC = () => { const classes = useStyles(); const userData = useSelector((state: RootState) => state.userData); - const user = useActions(UserActions); + // Use the persistor object + const { persistor } = configureStore(); + // Query to get user details const { data } = useQuery( GET_USER, @@ -61,6 +64,9 @@ const Header: React.FC = () => { userRole: member.role, selectedProjectName: project.name, }); + // Flush data to persistor immediately + persistor.flush(); + setSelectedProjectDetails({ selectedProjectID, selectedUserRole: member.role, diff --git a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx index 012c7ac9f..d2b7e8d2c 100644 --- a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx +++ b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx @@ -6,6 +6,7 @@ import { useSelector } from 'react-redux'; import { Link } from 'react-router-dom'; import config from '../../config'; import { CREATE_USER } from '../../graphql'; +import { CreateUserData } from '../../models/graphql/user'; import { RootState } from '../../redux/reducers'; import getToken from '../../utils/getToken'; import { @@ -26,15 +27,16 @@ const CStepper: React.FC = ({ handleModal }) => { const classes = useStyles(); const { t } = useTranslation(); - const { userData } = useSelector((state: RootState) => state); + const userData = useSelector((state: RootState) => state.userData); const [activeStep, setActiveStep] = React.useState(0); const isError = useRef(true); const isSuccess = useRef(false); - const [info, setInfo] = React.useState({ + const [info, setInfo] = React.useState({ + username: userData.username, email: '', name: '', - projectName: '', + project_name: '', }); const handleBack = () => { @@ -57,7 +59,7 @@ const CStepper: React.FC = ({ handleModal }) => { window.location.reload(); }; - const [CreateUser] = useMutation(CREATE_USER, { + const [CreateUser] = useMutation(CREATE_USER, { onCompleted: () => { rerender(); }, @@ -86,7 +88,7 @@ const CStepper: React.FC = ({ handleModal }) => { username: userData.username, email: info.email, name: info.name, - project_name: info.projectName, + project_name: info.project_name, }, }, }); @@ -117,8 +119,8 @@ const CStepper: React.FC = ({ handleModal }) => { // [Button State: Disabled] if (activeStep === 0) { if ( - info.projectName.length > 0 && - validateStartEmptySpacing(info.projectName) === false + info.project_name.length > 0 && + validateStartEmptySpacing(info.project_name) === false ) { isError.current = false; } else { @@ -242,19 +244,19 @@ const CStepper: React.FC = ({ handleModal }) => {
{ - setData('projectName', event.target.value); + setData('project_name', event.target.value); }} />
diff --git a/litmus-portal/frontend/src/models/graphql/user.ts b/litmus-portal/frontend/src/models/graphql/user.ts index b5672c630..bba3175ed 100644 --- a/litmus-portal/frontend/src/models/graphql/user.ts +++ b/litmus-portal/frontend/src/models/graphql/user.ts @@ -35,3 +35,10 @@ export interface CurrentUserDetails { export interface CurrentUserDedtailsVars { username: string; } + +export interface CreateUserData { + username: string; + email: string; + name: string; + project_name: string; +} diff --git a/litmus-portal/frontend/src/pages/HomePage/index.tsx b/litmus-portal/frontend/src/pages/HomePage/index.tsx index 187286f65..818b2d3a0 100644 --- a/litmus-portal/frontend/src/pages/HomePage/index.tsx +++ b/litmus-portal/frontend/src/pages/HomePage/index.tsx @@ -21,7 +21,7 @@ import useActions from '../../redux/actions'; import * as TabActions from '../../redux/actions/tabs'; import * as TemplateSelectionActions from '../../redux/actions/template'; import * as UserActions from '../../redux/actions/user'; -import { history } from '../../redux/configureStore'; +import configureStore, { history } from '../../redux/configureStore'; import { RootState } from '../../redux/reducers'; import useStyles from './style'; @@ -63,6 +63,8 @@ const HomePage: React.FC = () => { const { t } = useTranslation(); const user = useActions(UserActions); const tabs = useActions(TabActions); + // Use the persistor object + const { persistor } = configureStore(); // Query to get user details const { data, loading } = useQuery< @@ -82,7 +84,10 @@ const HomePage: React.FC = () => { if (data?.getUser.username === userData.username) { setIsOpen(false); if (userData.selectedProjectID === '') { - let isOwnerOfProject = { id: '', name: '' }; + let isOwnerOfProject = { + id: '', + name: '', + }; const projectList: Project[] = data?.getUser.projects; projectList.forEach((project) => { const memberList: Member[] = project.members; @@ -91,7 +96,10 @@ const HomePage: React.FC = () => { member.user_name === data?.getUser.username && member.role === 'Owner' ) { - isOwnerOfProject = { id: project.id, name: project.name }; + isOwnerOfProject = { + id: project.id, + name: project.name, + }; } }); }); @@ -100,6 +108,8 @@ const HomePage: React.FC = () => { userRole: 'Owner', selectedProjectName: isOwnerOfProject.name, }); + // Flush data to persistor immediately + persistor.flush(); } } }, [data]); diff --git a/litmus-portal/frontend/src/redux/reducers/user.ts b/litmus-portal/frontend/src/redux/reducers/user.ts index 984dc9458..101166861 100644 --- a/litmus-portal/frontend/src/redux/reducers/user.ts +++ b/litmus-portal/frontend/src/redux/reducers/user.ts @@ -7,7 +7,6 @@ import { UserData, } from '../../models/redux/user'; import { setCookie } from '../../utils/cookies'; -import { history } from '../configureStore'; import createReducer from './createReducer'; const initialState: UserData = { @@ -22,11 +21,9 @@ export const userData = createReducer(initialState, { try { const jwt = action.payload as string; const data: any = jwtDecode.decode(jwt); - const expirationTime = - new Date(data.exp * 1000).getHours() - - new Date(data.iat * 1000).getHours(); - + const expirationTime = (data.exp - data.iat) / 3600; setCookie('token', jwt, expirationTime); + return { ...state, ...data, @@ -46,7 +43,6 @@ export const userData = createReducer(initialState, { }, [UserActions.LOGOUT_USER](state: UserData, action: UserAction) { setCookie('token', '', 1); - history.push('/login'); return { ...initialState, }; diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx index 5f98c0b48..57eff60c1 100644 --- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx +++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx @@ -115,7 +115,7 @@ const UserManagement: React.FC = () => { setAnchorEl(null); }; - const [currRow, setCurrRow] = React.useState(rows[0]); + const [currRow, setCurrRow] = React.useState(); const formatDate = (date: string) => { const day = moment(date).format('Do MMM,YYYY LT'); @@ -135,9 +135,9 @@ const UserManagement: React.FC = () => {
setEditDiv(false)} - email={currRow.email} - fullName={currRow.name} - userName={currRow.username} + email={currRow?.email ?? ''} + fullName={currRow?.name ?? ''} + userName={currRow?.username ?? ''} />
) : (