From 0c7b1ff85ee9f6e356100fca4903665cfc0f7067 Mon Sep 17 00:00:00 2001 From: imnasnainaec Date: Wed, 11 Nov 2020 21:02:41 -0500 Subject: [PATCH 1/8] Centralize the AppBar; Remove extraneous component wrappers --- src/components/App/AppLoggedIn.tsx | 37 ++++++ src/components/App/component.tsx | 30 +---- src/components/AppBar/AppBarComponent.tsx | 89 ++++++-------- src/components/AppBar/NavigationButtons.tsx | 8 +- src/components/AppBar/ProjectNameButton.tsx | 6 +- .../AppBar/tests/AppBarComponent.test.tsx | 21 ++-- .../AppBarComponent.test.tsx.snap | 6 +- .../DataEntry/DataEntryComponent.tsx | 111 +++++++++--------- .../GoalTimeline/GoalTimelineComponent.tsx | 97 +++++++-------- src/components/PageNotFound/component.tsx | 7 +- .../ProjectScreen/ProjectScreenComponent.tsx | 36 +++--- .../ProjectSettingsComponent.tsx | 3 - .../SiteSettings/SiteSettingsComponent.tsx | 49 +++----- src/components/UserSettings/UserSettings.tsx | 3 - .../BaseGoalScreen/BaseGoalScreen.tsx | 32 ++--- src/history.ts | 27 +++-- src/tests/history.test.ts | 14 +++ src/types/currentTab.tsx | 18 --- src/types/theme.ts | 9 ++ 19 files changed, 287 insertions(+), 316 deletions(-) create mode 100644 src/components/App/AppLoggedIn.tsx create mode 100644 src/tests/history.test.ts delete mode 100644 src/types/currentTab.tsx diff --git a/src/components/App/AppLoggedIn.tsx b/src/components/App/AppLoggedIn.tsx new file mode 100644 index 0000000000..009e27faff --- /dev/null +++ b/src/components/App/AppLoggedIn.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { Route, Switch, useLocation } from "react-router-dom"; + +import { getBasePath, path } from "../../history"; +import AppBar from "../AppBar/AppBarComponent"; +import DataEntry from "../DataEntry"; +import GoalRoute from "../GoalRoute/component"; +import PageNotFound from "../PageNotFound/component"; +import ProjectSettings from "../ProjectSettings"; +import ProjectScreen from "../ProjectScreen/ProjectScreenComponent"; +import SiteSettings from "../SiteSettings/SiteSettingsComponent"; +import UserSettings from "../UserSettings/UserSettings"; + +export default function AppWithBar() { + let location = useLocation(); + const [currentLoc, setCurrentLoc] = React.useState(path.projScreen); + + React.useEffect(() => { + console.log(location); + setCurrentLoc(getBasePath(location.pathname)); + }, [location]); + + return ( + + + + + + + + + + + + + ); +} diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx index 7481ab645a..308edc6397 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/component.tsx @@ -4,8 +4,6 @@ import { Route, Switch } from "react-router-dom"; //TC modules import { path } from "../../history"; -import DataEntry from "../DataEntry"; -import GoalRoute from "../GoalRoute/component"; import Login from "../Login/LoginPage"; import Register from "../Login/RegisterPage"; import PageNotFound from "../PageNotFound/component"; @@ -13,10 +11,7 @@ import PasswordReset from "../PasswordReset/ResetPage"; import ResetRequest from "../PasswordReset/RequestPage"; import PrivateRoute from "../PrivateRoute"; import ProjectInvite from "../ProjectInvite"; -import ProjectScreen from "../ProjectScreen/ProjectScreenComponent"; -import ProjectSettings from "../ProjectSettings"; -import SiteSettings from "../SiteSettings/SiteSettingsComponent"; -import UserSettings from "../UserSettings/UserSettings"; +import AppWithBar from "./AppLoggedIn"; /** * The top-level component @@ -26,28 +21,7 @@ export default class App extends React.Component { return (
- - - - - - + diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx index 1560a36135..0e8301090a 100644 --- a/src/components/AppBar/AppBarComponent.tsx +++ b/src/components/AppBar/AppBarComponent.tsx @@ -1,60 +1,47 @@ +import { AppBar, Grid, Toolbar } from "@material-ui/core"; import React from "react"; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import { withLocalize, LocalizeContextProps } from "react-localize-redux"; -import { Grid } from "@material-ui/core"; -import UserMenu from "./UserMenu"; -import Logo from "./Logo"; + +import { getProjectId } from "../../backend/localStorage"; +import { path } from "../../history"; import theme from "../../types/theme"; +import Logo from "./Logo"; import NavigationButtons from "./NavigationButtons"; -import { getProjectId } from "../../backend/localStorage"; import ProjectNameButton from "./ProjectNameButton"; -import { CurrentTab } from "../../types/currentTab"; +import UserMenu from "./UserMenu"; export interface AppBarComponentProps { - currentTab: CurrentTab; + currentTab: path; } -export class AppBarComponent extends React.Component< - AppBarComponentProps & LocalizeContextProps -> { - /** An app bar shown at the top of almost every page of The Combine */ - render() { - return ( - -
- - - - - - {getProjectId() !== "" && ( - - )} - - - {getProjectId() !== "" && ( - - )} - - - - - - - -
- - ); - } +/** An app bar shown at the top of almost every page of The Combine */ +export default function AppBarComponent(props: AppBarComponentProps) { + return ( +
+ + + + + + {getProjectId() !== "" && ( + + )} + + + {getProjectId() !== "" && ( + + )} + + + + + + + +
+ ); } - -export default withLocalize(AppBarComponent); diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx index ff56be87ee..b24bc1c7c3 100644 --- a/src/components/AppBar/NavigationButtons.tsx +++ b/src/components/AppBar/NavigationButtons.tsx @@ -3,10 +3,10 @@ import React from "react"; import { Translate } from "react-localize-redux"; import history, { path } from "../../history"; -import { CurrentTab, tabColor } from "../../types/currentTab"; +import { tabColor } from "../../types/theme"; interface NavigationButtonsProps { - currentTab: CurrentTab; + currentTab: path; } /** A button that redirects to the home page */ @@ -20,7 +20,7 @@ export default function NavigationButtons(props: NavigationButtonsProps) { }} color="inherit" style={{ - background: tabColor(props.currentTab, CurrentTab.DataEntry), + background: tabColor(props.currentTab, path.dataEntry), }} > @@ -32,7 +32,7 @@ export default function NavigationButtons(props: NavigationButtonsProps) { }} color="inherit" style={{ - background: tabColor(props.currentTab, CurrentTab.DataCleanup), + background: tabColor(props.currentTab, path.goals), }} > diff --git a/src/components/AppBar/ProjectNameButton.tsx b/src/components/AppBar/ProjectNameButton.tsx index a802082d3a..5e4f299f9c 100644 --- a/src/components/AppBar/ProjectNameButton.tsx +++ b/src/components/AppBar/ProjectNameButton.tsx @@ -3,10 +3,10 @@ import React from "react"; import { useSelector } from "react-redux"; import history, { path } from "../../history"; -import { CurrentTab, tabColor } from "../../types/currentTab"; +import { tabColor } from "../../types/theme"; interface ProjectNameButtonProps { - currentTab: CurrentTab; + currentTab: path; } /** A button that redirects to the project settings */ @@ -22,7 +22,7 @@ export default function ProjectNameButton(props: ProjectNameButtonProps) { }} color="inherit" style={{ - background: tabColor(props.currentTab, CurrentTab.ProjectSettings), + background: tabColor(props.currentTab, path.projSettings), }} > {projectName} diff --git a/src/components/AppBar/tests/AppBarComponent.test.tsx b/src/components/AppBar/tests/AppBarComponent.test.tsx index 9a8236eab6..3cbf36c45f 100644 --- a/src/components/AppBar/tests/AppBarComponent.test.tsx +++ b/src/components/AppBar/tests/AppBarComponent.test.tsx @@ -1,34 +1,35 @@ import React from "react"; import ReactDOM from "react-dom"; +import { Provider } from "react-redux"; +import renderer from "react-test-renderer"; import configureMockStore from "redux-mock-store"; + +import { path } from "../../../history"; import { defaultState } from "../../App/DefaultState"; -import { Provider } from "react-redux"; import AppBarComponent from "../AppBarComponent"; import NavigationButtons from "../NavigationButtons"; -import { CurrentTab } from "../../../types/currentTab"; -import renderer from "react-test-renderer"; import ProjectNameButton from "../ProjectNameButton"; const createMockStore = configureMockStore([]); const mockStore = createMockStore(defaultState); -describe("Tests AppBarComponent", () => { +describe("AppBarComponent", () => { it("renders without crashing", () => { const div = document.createElement("div"); ReactDOM.render( - + , div ); ReactDOM.unmountComponentAtNode(div); }); - it("Ensures only one tab is shaded", () => { + it("has only one tab shaded", () => { const NavigationButtonRender = renderer .create( - + ) .toJSON(); @@ -37,18 +38,18 @@ describe("Tests AppBarComponent", () => { const ProjectButtonRender = renderer .create( - + ) .toJSON(); expect(ProjectButtonRender).toMatchSnapshot(); }); - it("Ensures ProjectName Tab is shaded when itself is called", () => { + it("has ProjectName tab shaded when itself is called", () => { const ProjectButtonRender = renderer .create( - + ) .toJSON(); diff --git a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap index b627cb8765..86bb47cf61 100644 --- a/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap +++ b/src/components/AppBar/tests/__snapshots__/AppBarComponent.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Tests AppBarComponent Ensures ProjectName Tab is shaded when itself is called 1`] = ` +exports[`AppBarComponent has ProjectName tab shaded when itself is called 1`] = ` -`; - -exports[`AppBarComponent has only one tab shaded 1`] = ` +exports[`NavigationButtons has only one tab shaded 1`] = ` Array [ `; + +exports[`ProjectNameButton has tab shaded when itself is called 1`] = ` + +`; From 4873fd6d41cd7b6c8dd561757051968e0e80effa Mon Sep 17 00:00:00 2001 From: imnasnainaec Date: Thu, 12 Nov 2020 09:38:32 -0500 Subject: [PATCH 4/8] Run prettier --- .../AppBar/tests/AppBarComponent.test.tsx | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/src/components/AppBar/tests/AppBarComponent.test.tsx b/src/components/AppBar/tests/AppBarComponent.test.tsx index d788b17549..de9d0a6afa 100644 --- a/src/components/AppBar/tests/AppBarComponent.test.tsx +++ b/src/components/AppBar/tests/AppBarComponent.test.tsx @@ -28,32 +28,29 @@ describe("AppBarComponent", () => { describe("NavigationButtons", () => { it("has only one tab shaded", () => { - testRenderer = renderer - .create( - - - - ); + testRenderer = renderer.create( + + + + ); expect(testRenderer.toJSON()).toMatchSnapshot(); - testRenderer = renderer - .create( - - - - ); + testRenderer = renderer.create( + + + + ); expect(testRenderer.toJSON()).toMatchSnapshot(); }); }); describe("ProjectNameButton", () => { it("has tab shaded when itself is called", () => { - testRenderer = renderer - .create( - - - - ); + testRenderer = renderer.create( + + + + ); expect(testRenderer.toJSON()).toMatchSnapshot(); }); }); From 732b86d242f9c5d8d92af7f39bb21d67c32f954b Mon Sep 17 00:00:00 2001 From: imnasnainaec Date: Thu, 12 Nov 2020 09:51:25 -0500 Subject: [PATCH 5/8] Add redirect from / to /app --- src/components/App/component.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx index 308edc6397..b2cb1b0f40 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/component.tsx @@ -1,6 +1,6 @@ //external modules import React from "react"; -import { Route, Switch } from "react-router-dom"; +import { Redirect, Route, Switch } from "react-router-dom"; //TC modules import { path } from "../../history"; @@ -21,6 +21,9 @@ export default class App extends React.Component { return (
+ + + From 7281ec2f7ef4fbac93b5e18b4dba014ac4640962 Mon Sep 17 00:00:00 2001 From: imnasnainaec Date: Fri, 13 Nov 2020 15:14:19 -0500 Subject: [PATCH 6/8] Improve comment --- src/components/AppBar/AppBarComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx index 0e8301090a..0ee42bb463 100644 --- a/src/components/AppBar/AppBarComponent.tsx +++ b/src/components/AppBar/AppBarComponent.tsx @@ -13,7 +13,7 @@ export interface AppBarComponentProps { currentTab: path; } -/** An app bar shown at the top of almost every page of The Combine */ +/** An app bar shown at the top of all logged in pages */ export default function AppBarComponent(props: AppBarComponentProps) { return (
From ef0fdacfb3ce3a4d94c4ce178333d66dd84916f5 Mon Sep 17 00:00:00 2001 From: imnasnainaec Date: Fri, 13 Nov 2020 15:31:50 -0500 Subject: [PATCH 7/8] path -> Path --- src/backend/index.tsx | 4 ++-- src/components/App/AppLoggedIn.tsx | 16 ++++++++-------- src/components/App/component.tsx | 18 +++++++++--------- src/components/AppBar/AppBarComponent.tsx | 4 ++-- src/components/AppBar/Logo.tsx | 4 ++-- src/components/AppBar/NavigationButtons.tsx | 12 ++++++------ src/components/AppBar/ProjectNameButton.tsx | 8 ++++---- src/components/AppBar/UserMenu.tsx | 8 ++++---- .../AppBar/tests/AppBarComponent.test.tsx | 10 +++++----- .../DataEntry/DataEntryComponent.tsx | 4 ++-- src/components/GoalRoute/component.tsx | 6 +++--- .../GoalRoute/tests/component.test.tsx | 4 ++-- src/components/GoalTimeline/GoalsActions.tsx | 4 ++-- src/components/Login/LoginActions.tsx | 6 +++--- .../Login/LoginPage/LoginComponent.tsx | 6 +++--- .../Login/RegisterPage/RegisterComponent.tsx | 4 ++-- src/components/PageNotFound/component.tsx | 4 ++-- .../PasswordReset/RequestPage/component.tsx | 4 ++-- .../PasswordReset/ResetPage/component.tsx | 4 ++-- src/components/PasswordReset/actions.tsx | 4 ++-- src/components/PrivateRoute/index.tsx | 4 ++-- .../ProjectInvite/ProjectInviteComponent.tsx | 4 ++-- .../ChooseProject/ChooseProjectComponent.tsx | 4 ++-- .../CreateProject/CreateProjectActions.tsx | 6 +++--- .../CharacterInventoryComponent.tsx | 6 +++--- .../MergeDupStep/MergeDupStepActions.tsx | 4 ++-- src/history.ts | 10 +++++----- src/tests/history.test.ts | 12 ++++++------ src/types/theme.ts | 4 ++-- 29 files changed, 94 insertions(+), 94 deletions(-) diff --git a/src/backend/index.tsx b/src/backend/index.tsx index cba40256cd..7a500c46ad 100644 --- a/src/backend/index.tsx +++ b/src/backend/index.tsx @@ -1,7 +1,7 @@ import axios from "axios"; import authHeader from "../components/Login/AuthHeaders"; -import history, { path } from "../history"; +import history, { Path } from "../history"; import { Goal, GoalType } from "../types/goals"; import { Project } from "../types/project"; import { RuntimeConfig } from "../types/runtimeConfig"; @@ -28,7 +28,7 @@ backendServer.interceptors.response.use( }, (err) => { if (err.response && err.response.status === 401) { - history.push(path.login); + history.push(Path.login); } return Promise.reject(err); } diff --git a/src/components/App/AppLoggedIn.tsx b/src/components/App/AppLoggedIn.tsx index 2cca4a061c..9c11a54170 100644 --- a/src/components/App/AppLoggedIn.tsx +++ b/src/components/App/AppLoggedIn.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Route, Switch, useLocation } from "react-router-dom"; -import { getBasePath, path } from "../../history"; +import { getBasePath, Path } from "../../history"; import AppBar from "../AppBar/AppBarComponent"; import DataEntry from "../DataEntry"; import GoalRoute from "../GoalRoute/component"; @@ -13,7 +13,7 @@ import UserSettings from "../UserSettings/UserSettings"; export default function AppWithBar() { const location = useLocation(); - const [currentLoc, setCurrentLoc] = React.useState(path.projScreen); + const [currentLoc, setCurrentLoc] = React.useState(Path.projScreen); React.useEffect(() => { setCurrentLoc(getBasePath(location.pathname)); @@ -23,12 +23,12 @@ export default function AppWithBar() { - - - - - - + + + + + + diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx index b2cb1b0f40..9d490bdea3 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/component.tsx @@ -3,7 +3,7 @@ import React from "react"; import { Redirect, Route, Switch } from "react-router-dom"; //TC modules -import { path } from "../../history"; +import { Path } from "../../history"; import Login from "../Login/LoginPage"; import Register from "../Login/RegisterPage"; import PageNotFound from "../PageNotFound/component"; @@ -21,16 +21,16 @@ export default class App extends React.Component { return (
- - + + - - - - - + + + + + diff --git a/src/components/AppBar/AppBarComponent.tsx b/src/components/AppBar/AppBarComponent.tsx index 0ee42bb463..0ed778ad0d 100644 --- a/src/components/AppBar/AppBarComponent.tsx +++ b/src/components/AppBar/AppBarComponent.tsx @@ -2,7 +2,7 @@ import { AppBar, Grid, Toolbar } from "@material-ui/core"; import React from "react"; import { getProjectId } from "../../backend/localStorage"; -import { path } from "../../history"; +import { Path } from "../../history"; import theme from "../../types/theme"; import Logo from "./Logo"; import NavigationButtons from "./NavigationButtons"; @@ -10,7 +10,7 @@ import ProjectNameButton from "./ProjectNameButton"; import UserMenu from "./UserMenu"; export interface AppBarComponentProps { - currentTab: path; + currentTab: Path; } /** An app bar shown at the top of all logged in pages */ diff --git a/src/components/AppBar/Logo.tsx b/src/components/AppBar/Logo.tsx index 91e1ded383..5425b95d9d 100644 --- a/src/components/AppBar/Logo.tsx +++ b/src/components/AppBar/Logo.tsx @@ -1,7 +1,7 @@ import { Button } from "@material-ui/core"; import React from "react"; -import history, { path } from "../../history"; +import history, { Path } from "../../history"; import logo from "../../resources/CombineLogoV1.png"; import smallLogo from "../../resources/CombineSmallLogoV1.png"; @@ -10,7 +10,7 @@ export default function Logo() { return (