Skip to content

Commit

Permalink
fix: reseting explore state on error component #433
Browse files Browse the repository at this point in the history
  • Loading branch information
BruceRodrigues committed Oct 31, 2023
1 parent f0d08cd commit 5ffa5e8
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 61 deletions.
15 changes: 14 additions & 1 deletion packages/data-explorer-ui/src/components/Error/error.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Divider, Typography } from "@mui/material";
import Link from "next/link";
import React from "react";
import { useExploreState } from "../../hooks/useExploreState";
import { ExploreActionKind } from "../../providers/exploreState";
import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
import { Grid } from "../common/Grid/grid";
Expand Down Expand Up @@ -47,6 +49,15 @@ export const Error = ({
requestUrlMessage,
rootPath,
}: ErrorProps): JSX.Element => {
const { exploreDispatch } = useExploreState();

const handleToHomePageClicked = (): void => {
exploreDispatch({
payload: "",
type: ExploreActionKind.ResetState,
});
};

return (
<CustomError>
<ErrorSection>
Expand All @@ -62,7 +73,9 @@ export const Error = ({
{rootPath && (
<SectionActions>
<Link href={rootPath} passHref>
<ButtonPrimary href="passHref">To Homepage</ButtonPrimary>
<ButtonPrimary onClick={handleToHomePageClicked} href="passHref">
To Homepage
</ButtonPrimary>
</Link>
</SectionActions>
)}
Expand Down
147 changes: 87 additions & 60 deletions packages/data-explorer-ui/src/providers/exploreState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ import {
SelectedFilter,
} from "../common/entities";
import { getInitialTableColumnVisibility } from "../components/Table/common/utils";
import { CategoryConfig, EntityConfig, EntityPath } from "../config/entities";
import {
CategoryConfig,
EntityConfig,
EntityPath,
SiteConfig,
} from "../config/entities";
import { getDefaultSorting } from "../config/utils";
import { useCategoryConfigs } from "../hooks/useCategoryConfigs";
import {
Expand All @@ -24,17 +29,7 @@ import {
} from "../hooks/useCategoryFilter";
import { useConfig } from "../hooks/useConfig";
import { useURLFilterParams } from "../hooks/useURLFilterParams";

// Template constants
const defaultPaginationState = {
currentPage: 1,
index: null,
nextIndex: null,
pageSize: 25,
pages: 1,
previousIndex: null,
rows: 0,
};
import { DEFAULT_PAGINATION_STATE, INITIAL_STATE } from "./initial";

/**
* Entity view.
Expand All @@ -49,7 +44,9 @@ export enum EntityView {
*/
export interface ExploreContext {
categoryConfigs?: CategoryConfig[];
config: SiteConfig;
entityConfig: EntityConfig;
entityList: string;
}

/**
Expand Down Expand Up @@ -163,6 +160,57 @@ export interface RelatedResponse {
relatedListItems: RelatedListItems;
}

/**
* function used to create the explore's initial state
*
* @param config - current site config
* @param entityConfig - current entity config
* @param entityListType - path of the current entity
* @param decodedFilterParam - decoded filters from url params
* @returns a object of type #ExploreState
*/
const createInitialState = (
config: SiteConfig,
entityConfig: EntityConfig,
entityListType: string,
decodedFilterParam: string
): ExploreState => {
// Define filter state, from URL "filter" parameter, if present and valid.
let filterState: SelectedFilter[] = [];
try {
filterState = JSON.parse(decodedFilterParam);
} catch {
// do nothing
}

return {
...INITIAL_STATE,
categoryViews: [],
entityPageState: config.entities.reduce(
(acc, entity) => ({
...acc,
[entity.route]: {
columnsVisibility: getInitialTableColumnVisibility(
entity.list.columns
),
sorting: getDefaultSorting(entity),
},
}),
{}
),
filterState,
isRelatedView: false,
listItems: [],
listStaticLoad: entityConfig.staticLoad ?? false,
listView: EntityView.EXACT,
loading: true,
paginationState: DEFAULT_PAGINATION_STATE,
relatedListItems: undefined,
staticLoaded: false,
tabValue: entityListType,
};
};

/**
* Explore state context for storing and using filter-related and explore state.
*/
Expand All @@ -176,20 +224,7 @@ export const ExploreStateContext = createContext<ExploreStateContextProps>({
*/
// eslint-disable-next-line @typescript-eslint/no-empty-function -- default note used
exploreDispatch: () => {},
exploreState: {
categoryViews: [],
entityPageState: {},
filterState: [],
isRelatedView: false,
listItems: [],
listStaticLoad: false,
listView: undefined,
loading: false,
paginationState: defaultPaginationState,
relatedListItems: undefined,
staticLoaded: false,
tabValue: "",
},
exploreState: INITIAL_STATE,
});

/**
Expand All @@ -209,41 +244,17 @@ export function ExploreStateProvider({
const { config, defaultEntityListType, entityConfig } = useConfig();
const categoryConfigs = useCategoryConfigs();
const { decodedFilterParam } = useURLFilterParams();
// Define filter state, from URL "filter" parameter, if present and valid.
let filterState: SelectedFilter[] = [];
try {
filterState = JSON.parse(decodedFilterParam);
} catch {
// do nothing
}
const entityList = entityListType || defaultEntityListType;

const [exploreState, exploreDispatch] = useReducer(
(s: ExploreState, a: ExploreAction) =>
exploreReducer(s, a, { categoryConfigs, entityConfig }),
{
categoryViews: [],
entityPageState: config.entities.reduce(
(acc, entity) => ({
...acc,
[entity.route]: {
columnsVisibility: getInitialTableColumnVisibility(
entity.list.columns
),
sorting: getDefaultSorting(entity),
},
}),
{}
),
filterState,
isRelatedView: false,
listItems: [],
listStaticLoad: entityConfig.staticLoad ?? false,
listView: EntityView.EXACT,
loading: true,
paginationState: defaultPaginationState,
relatedListItems: undefined,
staticLoaded: false,
tabValue: entityListType || defaultEntityListType,
}
exploreReducer(s, a, {
categoryConfigs,
config,
entityConfig,
entityList,
}),
createInitialState(config, entityConfig, entityList, decodedFilterParam)
);

// does this help? https://hswolff.com/blog/how-to-usecontext-with-usereducer/
Expand All @@ -267,6 +278,7 @@ export enum ExploreActionKind {
ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
ProcessExploreStaticResponse = "PROCESS_EXPLORE_STATIC_RESPONSE",
ProcessRelatedResponse = "PROCESS_RELATED_RESPONSE",
ResetState = "RESET_STATE",
SelectEntityType = "SELECT_ENTITY_TYPE",
ToggleEntityView = "TOGGLE_ENTITY_VIEW",
UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
Expand All @@ -283,6 +295,7 @@ type ExploreAction =
| ProcessExploreResponseAction
| ProcessExploreStaticResponseAction
| ProcessRelatedResponseAction
| ResetStateAction
| SelectEntityTypeAction
| ToggleEntityView
| UpdateColumnVisibilityAction
Expand Down Expand Up @@ -329,6 +342,14 @@ type ProcessRelatedResponseAction = {
type: ExploreActionKind.ProcessRelatedResponse;
};

/**
* Reset state type action.
*/
type ResetStateAction = {
payload: "";
type: ExploreActionKind.ResetState;
};

/**
* Select entity type action.
*/
Expand Down Expand Up @@ -391,7 +412,7 @@ function exploreReducer(
exploreContext: ExploreContext
): ExploreState {
const { payload, type } = action;
const { categoryConfigs, entityConfig } = exploreContext;
const { categoryConfigs, config, entityConfig, entityList } = exploreContext;

switch (type) {
/**
Expand Down Expand Up @@ -482,6 +503,12 @@ function exploreReducer(
relatedListItems: payload.relatedListItems,
};
}
/**
* Reset the current state to the initial
*/
case ExploreActionKind.ResetState: {
return createInitialState(config, entityConfig, entityList, "");
}
/**
* Select entity type
**/
Expand Down
28 changes: 28 additions & 0 deletions packages/data-explorer-ui/src/providers/initial.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { ExploreState, PaginationState } from "./exploreState";

// Template constants
export const DEFAULT_PAGINATION_STATE: PaginationState = {
currentPage: 1,
index: null,
nextIndex: null,
pageSize: 25,
pages: 1,
previousIndex: null,
rows: 0,
};

// Initial state
export const INITIAL_STATE: ExploreState = {
categoryViews: [],
entityPageState: {},
filterState: [],
isRelatedView: false,
listItems: [],
listStaticLoad: false,
listView: undefined,
loading: false,
paginationState: DEFAULT_PAGINATION_STATE,
relatedListItems: undefined,
staticLoaded: false,
tabValue: "",
};

0 comments on commit 5ffa5e8

Please sign in to comment.