diff --git a/src/app/Pods/_Layout/Layout.tsx b/src/app/Pods/_Layout/Layout.tsx index 9363fbab..2c988698 100644 --- a/src/app/Pods/_Layout/Layout.tsx +++ b/src/app/Pods/_Layout/Layout.tsx @@ -4,7 +4,7 @@ import { NavPods } from '../_components'; import PodToolbar from '../_components/PodToolbar'; import { Router } from '../_Router'; import { Provider } from 'react-redux'; -import store from '../redux/store'; +import store from '@redux/store'; const Layout: React.FC = () => { const body = ( diff --git a/src/app/Pods/_components/Modals/DeleteSnapshotModal.tsx b/src/app/Pods/_components/Modals/DeleteSnapshotModal.tsx index 7c6e2ee6..f7501e43 100644 --- a/src/app/Pods/_components/Modals/DeleteSnapshotModal.tsx +++ b/src/app/Pods/_components/Modals/DeleteSnapshotModal.tsx @@ -11,9 +11,8 @@ import * as Yup from 'yup'; import { useQueryClient } from 'react-query'; import { Pods as Hooks } from '@tapis/tapisui-hooks'; import { useLocation, useHistory } from 'react-router-dom'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; -import { useDispatch } from 'react-redux'; -import { updateState } from '../../redux/podsSlice'; const DeleteSnapshotModal: React.FC = ({ toggle }) => { const { data } = Hooks.useListSnapshots(); //{search: `owner.like.${''}`,} @@ -22,7 +21,7 @@ const DeleteSnapshotModal: React.FC = ({ toggle }) => { // Allows the pod list to update without the user having to refresh the page const queryClient = useQueryClient(); const history = useHistory(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const onSuccess = useCallback(() => { queryClient.invalidateQueries(Hooks.queryKeys.listSnapshots); diff --git a/src/app/Pods/_components/Modals/DeleteVolumeModal.tsx b/src/app/Pods/_components/Modals/DeleteVolumeModal.tsx index 71e1316a..04cb58b1 100644 --- a/src/app/Pods/_components/Modals/DeleteVolumeModal.tsx +++ b/src/app/Pods/_components/Modals/DeleteVolumeModal.tsx @@ -11,9 +11,8 @@ import * as Yup from 'yup'; import { useQueryClient } from 'react-query'; import { Pods as Hooks } from '@tapis/tapisui-hooks'; import { useLocation, useHistory } from 'react-router-dom'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; -import { useDispatch } from 'react-redux'; -import { updateState } from '../../redux/podsSlice'; const DeleteVolumeModal: React.FC = ({ toggle }) => { const { data } = Hooks.useListVolumes(); //{search: `owner.like.${''}`,} @@ -22,7 +21,7 @@ const DeleteVolumeModal: React.FC = ({ toggle }) => { // Allows the pod list to update without the user having to refresh the page const queryClient = useQueryClient(); const history = useHistory(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const onSuccess = useCallback(() => { queryClient.invalidateQueries(Hooks.queryKeys.listVolumes); diff --git a/src/app/Pods/_components/NavTemplates/NavTemplates.tsx b/src/app/Pods/_components/NavTemplates/NavTemplates.tsx index e4702cce..143f6132 100644 --- a/src/app/Pods/_components/NavTemplates/NavTemplates.tsx +++ b/src/app/Pods/_components/NavTemplates/NavTemplates.tsx @@ -17,9 +17,7 @@ import DisabledByDefaultRoundedIcon from '@mui/icons-material/DisabledByDefaultR import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded'; import { format } from 'date-fns'; import styles from '../Pages.module.scss'; -import { useSelector, useDispatch } from 'react-redux'; -import { updateState } from '../../redux/podsSlice'; -import { RootState } from '../../redux/store'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; interface CustomTreeItemProps extends TreeItemProps { isLeaf?: boolean; @@ -69,10 +67,9 @@ const NavTemplates: React.FC = () => { const definitions = data?.result || {}; const loadingText = PodsLoadingText(); const history = useHistory(); - const dispatch = useDispatch(); - + const dispatch = useAppDispatch(); const { templateNavExpandedItems, templateNavSelectedItems, templateTab } = - useSelector((state: RootState) => state.pods); + useAppSelector((state) => state.pods); const handleItemClick = (event: React.MouseEvent, itemId: string) => { var tabState = 'details'; diff --git a/src/app/Pods/_components/PageImages/PageImages.tsx b/src/app/Pods/_components/PageImages/PageImages.tsx index ff9e1b45..11706162 100644 --- a/src/app/Pods/_components/PageImages/PageImages.tsx +++ b/src/app/Pods/_components/PageImages/PageImages.tsx @@ -38,16 +38,11 @@ import { NavPods, PodsCodeMirror, PodsNavigation } from 'app/Pods/_components'; import PodsLoadingText from '../PodsLoadingText'; import { NavLink } from 'react-router-dom'; -import { useSelector, useDispatch } from 'react-redux'; -import { RootState } from '../../redux/store'; -import { updateState } from '../../redux/podsSlice'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; const PageImages: React.FC<{ objId: string | undefined }> = ({ objId }) => { - const dispatch = useDispatch(); - const navigate = useHistory(); - const { imageTab, imageRootTab } = useSelector( - (state: RootState) => state.pods - ); + const dispatch = useAppDispatch(); + const { imageTab, imageRootTab } = useAppSelector((state) => state.pods); const { data, isLoading, isFetching, error, invalidate } = Hooks.useGetImage({ imageId: objId, diff --git a/src/app/Pods/_components/PagePods/PagePods.tsx b/src/app/Pods/_components/PagePods/PagePods.tsx index 174b6288..bb38fad2 100644 --- a/src/app/Pods/_components/PagePods/PagePods.tsx +++ b/src/app/Pods/_components/PagePods/PagePods.tsx @@ -35,17 +35,11 @@ import { PodPermissionModal } from '../Modals'; import { useHistory } from 'react-router-dom'; import { NavPods, PodsCodeMirror, PodsNavigation } from 'app/Pods/_components'; import PodsLoadingText from '../PodsLoadingText'; - -import { NavLink } from 'react-router-dom'; - -import { useSelector, useDispatch } from 'react-redux'; -import { RootState } from '../../redux/store'; -import { updateState } from '../../redux/podsSlice'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; const PagePods: React.FC<{ objId: string | undefined }> = ({ objId }) => { - const dispatch = useDispatch(); - const navigate = useHistory(); - const { podTab, podRootTab } = useSelector((state: RootState) => state.pods); + const dispatch = useAppDispatch(); + const { podTab, podRootTab } = useAppSelector((state) => state.pods); const { data, isLoading, isFetching, error, invalidate } = Hooks.useGetPod({ podId: objId, diff --git a/src/app/Pods/_components/PageSnapshots/PageSnapshots.tsx b/src/app/Pods/_components/PageSnapshots/PageSnapshots.tsx index 37fd68d7..57f3245e 100644 --- a/src/app/Pods/_components/PageSnapshots/PageSnapshots.tsx +++ b/src/app/Pods/_components/PageSnapshots/PageSnapshots.tsx @@ -36,17 +36,11 @@ import { useHistory } from 'react-router-dom'; import { NavPods, PodsCodeMirror, PodsNavigation } from 'app/Pods/_components'; import PodsLoadingText from '../PodsLoadingText'; import { NavLink } from 'react-router-dom'; - -import { useSelector, useDispatch } from 'react-redux'; -import { RootState } from '../../redux/store'; -import { updateState } from '../../redux/podsSlice'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; const PageSnapshots: React.FC<{ objId: string | undefined }> = ({ objId }) => { - const dispatch = useDispatch(); - const navigate = useHistory(); - const { snapshotTab, snapshotRootTab } = useSelector( - (state: RootState) => state.pods - ); + const dispatch = useAppDispatch(); + const { snapshotTab, snapshotRootTab } = useAppSelector((state) => state.pods); const { data, isLoading, isFetching, error, invalidate } = Hooks.useGetSnapshot({ diff --git a/src/app/Pods/_components/PageTemplates/PageTemplates.tsx b/src/app/Pods/_components/PageTemplates/PageTemplates.tsx index f5446352..0d0dce28 100644 --- a/src/app/Pods/_components/PageTemplates/PageTemplates.tsx +++ b/src/app/Pods/_components/PageTemplates/PageTemplates.tsx @@ -35,16 +35,13 @@ import { PodsCodeMirror, } from 'app/Pods/_components'; import PodsLoadingText from '../PodsLoadingText'; -import { useSelector, useDispatch } from 'react-redux'; -import { RootState } from '../../redux/store'; -import { updateState } from '../../redux/podsSlice'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; const PageTemplates: React.FC<{ objId: string | undefined; tagId: string; }> = ({ objId, tagId }) => { - const dispatch = useDispatch(); - const navigate = useHistory(); + const dispatch = useAppDispatch(); const { data, isLoading, isFetching, error, invalidate } = Hooks.useGetTemplate({ templateId: objId, @@ -84,7 +81,7 @@ const PageTemplates: React.FC<{ templateRootTab, templateNavSelectedItems, templateNavExpandedItems, - } = useSelector((state: RootState) => state.pods); + } = useAppSelector((state) => state.pods); const loadingText = PodsLoadingText(); diff --git a/src/app/Pods/_components/PageVolumes/PageVolumes.tsx b/src/app/Pods/_components/PageVolumes/PageVolumes.tsx index 605ac313..82386525 100644 --- a/src/app/Pods/_components/PageVolumes/PageVolumes.tsx +++ b/src/app/Pods/_components/PageVolumes/PageVolumes.tsx @@ -38,16 +38,11 @@ import PodsLoadingText from '../PodsLoadingText'; import { set } from 'date-fns'; import { NavLink } from 'react-router-dom'; -import { useSelector, useDispatch } from 'react-redux'; -import { RootState } from '../../redux/store'; -import { updateState } from '../../redux/podsSlice'; +import { useAppSelector, updateState, useAppDispatch } from '@redux'; const PageVolumes: React.FC<{ objId: string | undefined }> = ({ objId }) => { - const dispatch = useDispatch(); - const navigate = useHistory(); - const { volumeTab, volumeRootTab } = useSelector( - (state: RootState) => state.pods - ); + const dispatch = useAppDispatch(); + const { volumeTab, volumeRootTab } = useAppSelector((state) => state.pods); const { data, isLoading, isFetching, error, invalidate } = Hooks.useGetVolume( { volumeId: objId } diff --git a/src/app/Pods/_components/PodsLoadingText/PodsLoadingText.tsx b/src/app/Pods/_components/PodsLoadingText/PodsLoadingText.tsx index d81b81a5..95e19e50 100644 --- a/src/app/Pods/_components/PodsLoadingText/PodsLoadingText.tsx +++ b/src/app/Pods/_components/PodsLoadingText/PodsLoadingText.tsx @@ -1,10 +1,8 @@ import { useState, useEffect } from 'react'; -const PodsLoadingText = ( - initialText = 'loading...', - intervalDuration = 333 -) => { +const PodsLoadingText = (initialText = 'loading.', intervalDuration = 333) => { const [loadingText, setLoadingText] = useState(initialText); + // useEffect(() => { // let loadingState = 0; // const loadingStates = ['loading...', 'loading', 'loading.', 'loading..']; @@ -17,7 +15,7 @@ const PodsLoadingText = ( // return () => clearInterval(interval); // }, [intervalDuration]); - return initialText; // "oadingText; + return loadingText; }; export default PodsLoadingText; diff --git a/src/app/Pods/_components/PodsNavigation/PodsNavigation.tsx b/src/app/Pods/_components/PodsNavigation/PodsNavigation.tsx index 29accf54..1121d20a 100644 --- a/src/app/Pods/_components/PodsNavigation/PodsNavigation.tsx +++ b/src/app/Pods/_components/PodsNavigation/PodsNavigation.tsx @@ -1,8 +1,6 @@ import React, { useEffect } from 'react'; import { useHistory } from 'react-router-dom'; -import { useSelector, useDispatch } from 'react-redux'; -import { updateState } from '../../redux/podsSlice'; -import { RootState } from '../../redux/store'; +import { useAppSelector, updateState, useAppDispatch, PodsState } from '@redux'; import { Stack, Button } from '@mui/material'; interface PodsNavigationProps { @@ -13,7 +11,7 @@ interface PodsNavigationProps { const PodsNavigation: React.FC = ({ from, id, id2 }) => { const history = useHistory(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const { podTab, podRootTab, @@ -35,7 +33,7 @@ const PodsNavigation: React.FC = ({ from, id, id2 }) => { activeTemplateTag, activePage, - } = useSelector((state: RootState) => state.pods); + } = useAppSelector((state) => state.pods); useEffect(() => { // If history.location = '/pods' change activePage to podspage, for managing pressing on pods tab sidebar @@ -66,7 +64,7 @@ const PodsNavigation: React.FC = ({ from, id, id2 }) => { from?: string, id?: string ) => { - const stateUpdates: Partial = {}; + const stateUpdates: Partial = {}; console.log(`from: ${from}, id: ${id}, activePage: ${activePage}`); diff --git a/src/app/Pods/redux/store.ts b/src/app/Pods/redux/store.ts deleted file mode 100644 index 70098989..00000000 --- a/src/app/Pods/redux/store.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { configureStore } from '@reduxjs/toolkit'; -import podsReducer from './podsSlice'; - -const store = configureStore({ - reducer: { - pods: podsReducer, - }, -}); - -export type RootState = ReturnType; -export type AppDispatch = typeof store.dispatch; -export default store; diff --git a/src/redux/index.tsx b/src/redux/index.tsx new file mode 100644 index 00000000..69b0cc01 --- /dev/null +++ b/src/redux/index.tsx @@ -0,0 +1,3 @@ +// src/redux/index.ts +export { default as store, useAppDispatch, useAppSelector, useAppStore } from './store'; +export { updateState, type PodsState } from './podsSlice'; \ No newline at end of file diff --git a/src/app/Pods/redux/podsSlice.tsx b/src/redux/podsSlice.tsx similarity index 89% rename from src/app/Pods/redux/podsSlice.tsx rename to src/redux/podsSlice.tsx index 002875b6..4f5547ce 100644 --- a/src/app/Pods/redux/podsSlice.tsx +++ b/src/redux/podsSlice.tsx @@ -1,7 +1,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { set } from 'date-fns'; -interface PodsState { +export interface PodsState { // arctiveXxxId: string; // Active item ID, used to store state when moving in and out of specific items. // Tab bars, used to store state when moving in and out of specific tabs. podTab: string; @@ -62,3 +62,9 @@ const podsSlice = createSlice({ export const { updateState } = podsSlice.actions; export default podsSlice.reducer; + +// GET +// const { podTab, podRootTab } = useAppSelector((state) => state.pods); + +// POST +// dispatch(updateState({"podTab": tabValue, "podRootTab": rootTabValue})); diff --git a/src/redux/store.ts b/src/redux/store.ts new file mode 100644 index 00000000..ae98fd27 --- /dev/null +++ b/src/redux/store.ts @@ -0,0 +1,20 @@ +import { configureStore } from '@reduxjs/toolkit'; +import type { TypedUseSelectorHook } from 'react-redux'; +import { useDispatch, useSelector, useStore } from 'react-redux'; +import podsReducer from './podsSlice'; +// import systemsReducer from './systemsSlice'; + +const store = configureStore({ + reducer: { + pods: podsReducer, + // systems: systemsReducer + }, +}); + +export type AppStore = typeof store; +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +export const useAppSelector: TypedUseSelectorHook = useSelector; +export const useAppStore: () => AppStore = useStore; +export const useAppDispatch = useDispatch.withTypes(); // Export a hook that can be reused to resolve types +export default store; diff --git a/tsconfig.json b/tsconfig.json index da477e3c..56047152 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { "target": "esnext", + "paths": { + "@redux": ["./redux/index.tsx"], + "@redux/*": ["./redux/*"] + }, "lib": ["dom", "dom.iterable", "esnext"], // "lib": ["es6", "dom"], "noImplicitAny": true,