Merge pull request #1396 from chhsiao1981/refactor-routes

refactor routes

Author: chhsiao1981

src/components/Routing/RouterContext.tsx

@@ -1,56 +1,44 @@
 import React from "react";
 
-interface RouterContextProps<S, A = any> {
+type RouterContextProps<S, A = any> = {
   state: S;
   actions?: A;
-}
+};
 
 type RouterContextType<S, A = any> = React.Context<RouterObjectType<S, A>>;
+
 type RouterObjectType<S, A = any> = {
   state: S;
   actions: A;
 };
 
-export function RouterContext<S, A = any>({
-  state,
-  actions,
-}: RouterContextProps<S, A>): [S, RouterContextType<S, A>] {
+export const RouterContext = <S, A = any>(
+  props: RouterContextProps<S, A>,
+): [S, RouterContextType<S, A>] => {
+  const { state, actions } = props;
   return [
     state,
     React.createContext<RouterObjectType<S, A>>({
       actions: actions ? actions : ({} as A),
       state,
     }),
   ];
-}
+};
 
-interface RouterProviderProps<S = any, A = any> {
+type RouterProviderProps<S = any, A = any> = {
   context: RouterContextType<S>;
   state: S;
   actions: A;
   children: React.ReactNode;
-}
+};
 
-export function RouterProvider({
-  context,
-  actions,
-  state,
-  children,
-}: RouterProviderProps) {
-  const props = {
-    context,
-    actions,
-    state,
-    children,
-  };
-  return <RouterComponent propsElement={props} />;
-}
+export const RouterProvider = (props: RouterProviderProps) => {
+  return <RouterComponent {...props} />;
+};
+
+const RouterComponent = (props: RouterProviderProps) => {
+  const { context, state, actions, children } = props;
 
-const RouterComponent = ({
-  propsElement: { context, actions, state, children },
-}: {
-  propsElement: RouterProviderProps;
-}) => {
   return (
     <context.Provider
       value={{
@@ -62,5 +50,3 @@ const RouterComponent = ({
     </context.Provider>
   );
 };
-
-export default RouterContext;

src/components/Wrapper/Sidebar.tsx

@@ -150,7 +150,9 @@ export default (props: Props) => {
   const uploadDataColor =
     sidebarActiveItem === "uploadData" ? "#ffffff" : "#aaaaaa";
 
+  // only the admin can import package.
   const classNameImportPackage = role === Role.Admin ? undefined : styles.hide;
+  // only the clinician cannot compose package.
   const classNameComposePackage =
     role === Role.Clinician ? styles.hide : undefined;
 

src/components/Wrapper/index.tsx

@@ -1,5 +1,5 @@
 import { Page } from "@patternfly/react-core";
-import type * as React from "react";
+import type { FormEvent, KeyboardEvent, ReactElement } from "react";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import AnonSidebar from "./AnonSidebar";
 import Header from "./Header";
@@ -13,8 +13,8 @@ import {
 import { OperationsProvider } from "../NewLibrary/context";
 
 type Props = {
-  children: React.ReactElement[] | React.ReactElement;
-  titleComponent?: React.ReactElement;
+  children: ReactElement[] | ReactElement;
+  titleComponent?: ReactElement;
 };
 
 export default (props: Props) => {
@@ -27,14 +27,14 @@ export default (props: Props) => {
   const onNavToggle = () => {
     dispatch(setIsNavOpen(!isNavOpen));
   };
-  const onTagToggle = (e: React.FormEvent) => {
+  const onTagToggle = (e: FormEvent) => {
     dispatch(setIsTagExpanded(!isTagExpanded));
   };
-  const onPackageTagToggle = (e: React.FormEvent) => {
+  const onPackageTagToggle = (e: FormEvent) => {
     dispatch(setIsPackageTagExpanded(!isPackageTagExpanded));
   };
   const onPageResize = (
-    _event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>,
+    _event: MouseEvent | TouchEvent | KeyboardEvent<Element>,
     data: { mobileView: boolean; windowSize: number },
   ) => {
     if (data.mobileView) {

src/routes.tsx

@@ -45,7 +45,7 @@ export const [State, MainRouterContext] = RouterContext<IState, IActions>({
   },
 });
 
-export const MainRouter = () => {
+export default () => {
   const location = useLocation();
   const dispatch = useAppDispatch();
   const [state, setState] = useState(State);
@@ -124,7 +124,7 @@ export const MainRouter = () => {
     );
   }, [location.pathname, dispatch]);
 
-  const element = useRoutes([
+  return useRoutes([
     {
       path: "/",
       element: <Dashboard />,
@@ -242,8 +242,4 @@ export const MainRouter = () => {
       element: <PluginInstall />,
     },
   ]);
-
-  return element;
 };
-
-export default MainRouter;