Organize web app pages under pages subdirectory (#695)

* Use Page component for all pages

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

* Move all pages under pages subdirectory

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

* Update snapshots

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

---------

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

premiser-ui/src/components/listEntities/ListEntitiesWidget.test.tsx

@@ -12,7 +12,7 @@ import {
 } from "howdju-common";
 import { InferResponseBody, serviceRoutes } from "howdju-service-routes";
 
-import RecentPropositionsWidget from "@/RecentPropositionsWidget";
+import RecentPropositionsWidget from "@/pages/recentActivity/RecentPropositionsWidget";
 import {
   renderWithProviders,
   withFakeTimers,

premiser-ui/src/CreatePropositionPage.test.tsx → premiser-ui/src/pages/CreatePropositionPage.test.tsx

@@ -1,11 +1,11 @@
-import React from "react";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createMemoryHistory } from "history";
-import { rest } from "msw";
 import { merge } from "lodash";
 import moment from "moment";
+import { rest } from "msw";
 import { pathToRegexp } from "path-to-regexp";
+import React from "react";
 
 import {
   brandedParse,

premiser-ui/src/CreatePropositionPage.tsx → premiser-ui/src/pages/CreatePropositionPage.tsx

@@ -34,8 +34,8 @@ import {
   makeCreateMediaExcerptSpeakerInput,
 } from "howdju-common";
 
-import Helmet from "./Helmet";
-import { editors, flows } from "./actions";
+import Helmet from "@/Helmet";
+import { editors, flows } from "@/actions";
 import t, {
   ADD_JUSTIFICATION_TO_CREATE_PROPOSITION,
   CREATE_JUSTIFICATION_SUBMIT_BUTTON_LABEL,
@@ -45,36 +45,37 @@ import t, {
   CREATE_PROPOSITION_SUBMIT_BUTTON_TITLE,
   CREATE_PROPOSITION_TITLE,
   JUSTIFICATION_TITLE,
-} from "./texts";
+} from "@/texts";
 import {
   combineIds,
   combineNames,
   combineSuggestionsKeys,
   array,
-} from "./viewModels";
+} from "@/viewModels";
 import JustificationEditorFields from "@/editors/JustificationEditorFields";
-import PropositionEditorFields from "./PropositionEditorFields";
-import { EditorState, EditorTypes } from "./reducers/editors";
+import PropositionEditorFields from "@/PropositionEditorFields";
+import { EditorState, EditorTypes } from "@/reducers/editors";
 import TagsControl from "@/components/tags/TagsControl";
-import { logger } from "./logger";
-import PersorgEditorFields from "./PersorgEditorFields";
-import EntityViewer from "./EntityViewer";
-import { CreatePropositionPageMode, PropertyChanges } from "./types";
-import { CreateJustifiedSentenceConfig } from "./sagas/editors/editorCommitEditSaga";
+import { logger } from "@/logger";
+import PersorgEditorFields from "@/PersorgEditorFields";
+import EntityViewer from "@/EntityViewer";
+import { CreatePropositionPageMode, PropertyChanges } from "@/types";
+import { CreateJustifiedSentenceConfig } from "@/sagas/editors/editorCommitEditSaga";
 import {
   EditorFieldsActionCreator,
   noopEditorDispatch,
   validateEditorEntity,
-} from "./editors/withEditor";
-import SubmitButton from "./editors/SubmitButton";
-import { toCompatibleTagVotes } from "./util";
+} from "@/editors/withEditor";
+import SubmitButton from "@/editors/SubmitButton";
+import { toCompatibleTagVotes } from "@/util";
 import { toCreatePersorgInput } from "howdju-client-common";
-import { useAppDispatch, useAppSelector } from "./hooks";
+import { useAppDispatch, useAppSelector } from "@/hooks";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import TextButton from "@/components/button/TextButton";
 import IconButton from "@/components/button/IconButton";
 import { Grid } from "@react-md/utils";
-import SingleColumnGrid from "./components/layout/SingleColumnGrid";
+import SingleColumnGrid from "@/components/layout/SingleColumnGrid";
+import { Page } from "@/components/layout/Page";
 
 const titleTextKeyByMode = {
   [CreatePropositionPageMode.CREATE_PROPOSITION]: CREATE_PROPOSITION_TITLE,
@@ -319,7 +320,7 @@ export default function CreatePropositionPage({ mode, location }: Props) {
     ? toCompatibleTagVotes(propositionTagVotes)
     : [];
   return (
-    <div id="edit-proposition-justification-page">
+    <Page id="edit-proposition-justification-page">
       <Helmet>
         <title>{title} — Howdju</title>
       </Helmet>
@@ -482,6 +483,6 @@ export default function CreatePropositionPage({ mode, location }: Props) {
           </Card>
         </SingleColumnGrid>
       </form>
-    </div>
+    </Page>
   );
 }

premiser-ui/src/ErrorPage.tsx → premiser-ui/src/pages/ErrorPage.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import SingleColumnGrid from "./components/layout/SingleColumnGrid";
+
+import SingleColumnGrid from "@/components/layout/SingleColumnGrid";
 
 interface Props {
   message: string;

premiser-ui/src/IconPage.tsx → premiser-ui/src/pages/IconPage.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { MaterialSymbol } from "react-material-symbols";
 
-import Helmet from "./Helmet";
+import { Page } from "@/components/layout/Page";
+import Helmet from "@/Helmet";
 
 export default function IconPage() {
   return (
-    <div>
+    <Page>
       <Helmet>
         <title>Icons — Howdju</title>
       </Helmet>
@@ -167,6 +168,6 @@ export default function IconPage() {
       <i className="material-icons">star_border</i>
       <i className="material-icons">star</i>
       <i className="material-icons">radio_button_checked</i>
-    </div>
+    </Page>
   );
 }

premiser-ui/src/LoginPage.tsx → premiser-ui/src/pages/LoginPage.tsx

@@ -1,34 +1,34 @@
-import React, { Component, FormEvent } from "react";
 import { goBack } from "connected-react-router";
 import { get } from "lodash";
+import React, { Component, FormEvent } from "react";
 import { connect, ConnectedProps } from "react-redux";
 
 import { Credentials, makeCredentials } from "howdju-common";
 
-import { CircularProgress } from "@/components/progress/CircularProgress";
-import { Card, CardContent, CardActions } from "@/components/card/Card";
 import {
   api,
   editors,
   mapActionCreatorGroupToDispatchToProps,
   ui,
-} from "./actions";
-import config from "./config";
-import EmailField from "./components/text/EmailTextField";
-import Helmet from "./Helmet";
-import PasswordField from "./components/text/PasswordField";
-import { EditorTypes } from "./reducers/editors";
-import { selectAuthEmail } from "./selectors";
-import { RootState } from "./setupStore";
-import { PropertyChanges } from "./types";
-import CancelButton from "./editors/CancelButton";
-import SolidButton from "./components/button/SolidButton";
-import OutlineButton from "./components/button/OutlineButton";
-import ErrorMessages from "./ErrorMessages";
-import { makeErrorPropCreator } from "./modelErrorMessages";
-import paths from "./paths";
-import { Page } from "./components/layout/Page";
-import SingleColumnGrid from "./components/layout/SingleColumnGrid";
+} from "@/actions";
+import OutlineButton from "@/components/button/OutlineButton";
+import SolidButton from "@/components/button/SolidButton";
+import { Card, CardActions, CardContent } from "@/components/card/Card";
+import { Page } from "@/components/layout/Page";
+import SingleColumnGrid from "@/components/layout/SingleColumnGrid";
+import { CircularProgress } from "@/components/progress/CircularProgress";
+import EmailField from "@/components/text/EmailTextField";
+import PasswordField from "@/components/text/PasswordField";
+import config from "@/config";
+import CancelButton from "@/editors/CancelButton";
+import ErrorMessages from "@/ErrorMessages";
+import Helmet from "@/Helmet";
+import { makeErrorPropCreator } from "@/modelErrorMessages";
+import paths from "@/paths";
+import { EditorTypes } from "@/reducers/editors";
+import { selectAuthEmail } from "@/selectors";
+import { RootState } from "@/setupStore";
+import { PropertyChanges } from "@/types";
 
 interface OwnProps {
   authEmail: string | undefined;

premiser-ui/src/PrivacySettingsPage.tsx → premiser-ui/src/pages/PrivacySettingsPage.tsx

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
 
-import { Card, CardContent } from "@/components/card/Card";
 import SolidButton from "@/components/button/SolidButton";
-import Helmet from "./Helmet";
-import { showPrivacyConsentDialog } from "./cookieConsent";
-import SingleColumnGrid from "./components/layout/SingleColumnGrid";
+import { Card, CardContent } from "@/components/card/Card";
+import { Page } from "@/components/layout/Page";
+import SingleColumnGrid from "@/components/layout/SingleColumnGrid";
+import { showPrivacyConsentDialog } from "@/cookieConsent";
+import Helmet from "@/Helmet";
 
 /**
  * A page where a user an access their privacy settings. Provided so that there is a URL to navigate directly to
@@ -17,7 +18,7 @@ export default class PrivacySettingsPage extends Component {
 
   render() {
     return (
-      <div>
+      <Page>
         <Helmet>
           <title>Privacy Settings — Howdju</title>
         </Helmet>
@@ -30,7 +31,7 @@ export default class PrivacySettingsPage extends Component {
             </CardContent>
           </Card>
         </SingleColumnGrid>
-      </div>
+      </Page>
     );
   }
 }

premiser-ui/src/TestErrorPage.tsx → premiser-ui/src/pages/TestErrorPage.tsx

@@ -1,13 +1,14 @@
-import React, { ChangeEvent, MouseEvent, useState } from "react";
 import { NativeSelect } from "@react-md/form";
+import { SeverityLevel } from "@sentry/browser";
+import { toString } from "lodash";
+import React, { ChangeEvent, MouseEvent, useState } from "react";
 
+import OutlineButton from "@/components/button/OutlineButton";
 import { Card, CardActions, CardContent } from "@/components/card/Card";
+import { Page } from "@/components/layout/Page";
 import SingleLineTextArea from "@/components/text/SingleLineTextArea";
-import * as sentry from "./sentry";
-import { PropertyChanges } from "./types";
-import { toString } from "lodash";
-import { SeverityLevel } from "@sentry/browser";
-import OutlineButton from "./components/button/OutlineButton";
+import * as sentry from "@/sentry";
+import { PropertyChanges } from "@/types";
 
 const LEVELS = [
   {
@@ -63,35 +64,37 @@ export default function TestErrorPage() {
 
   const { message, level } = state;
   return (
-    <Card title="Test error">
-      <CardContent>
-        <SingleLineTextArea
-          id="message"
-          name="message"
-          value={message}
-          required
-          onPropertyChange={onMessageChange}
-        />
-        <NativeSelect
-          id="level"
-          label="Level"
-          value={level}
-          onChange={onLevelChange}
-          children={LEVELS.map((level) => (
-            <option key={level.value} value={level.value}>
-              {level.label}
-            </option>
-          ))}
-        />
-      </CardContent>
-      <CardActions>
-        <OutlineButton disabled={!message} onClick={onCreateError}>
-          Create test error
-        </OutlineButton>
-        <OutlineButton disabled={!message} onClick={onCreateMessage}>
-          Create test message
-        </OutlineButton>
-      </CardActions>
-    </Card>
+    <Page>
+      <Card title="Test error">
+        <CardContent>
+          <SingleLineTextArea
+            id="message"
+            name="message"
+            value={message}
+            required
+            onPropertyChange={onMessageChange}
+          />
+          <NativeSelect
+            id="level"
+            label="Level"
+            value={level}
+            onChange={onLevelChange}
+            children={LEVELS.map((level) => (
+              <option key={level.value} value={level.value}>
+                {level.label}
+              </option>
+            ))}
+          />
+        </CardContent>
+        <CardActions>
+          <OutlineButton disabled={!message} onClick={onCreateError}>
+            Create test error
+          </OutlineButton>
+          <OutlineButton disabled={!message} onClick={onCreateMessage}>
+            Create test message
+          </OutlineButton>
+        </CardActions>
+      </Card>
+    </Page>
   );
 }

premiser-ui/src/pages/WritQuotePage.tsx

@@ -10,6 +10,7 @@ import WritQuoteCard from "@/WritQuoteCard";
 import { useAppSelector } from "@/hooks";
 import { CircularProgress } from "@/components/progress/CircularProgress";
 import SingleColumnGrid from "@/components/layout/SingleColumnGrid";
+import { Page } from "@/components/layout/Page";
 
 const id = "WritQuotePage";
 type Params = {
@@ -37,13 +38,13 @@ const WritQuotePage = () => {
     <WritQuoteCard id={id} writQuote={writQuote} showUrls={true} />
   );
   return (
-    <div>
+    <Page>
       <HowdjuHelmet>
         <title>{`WritQuote: &ldquo;${writQuote?.title}&rdquo; — Howdju`}</title>
       </HowdjuHelmet>
       <h1>{writQuote?.title}</h1>
       <SingleColumnGrid>{writQuote ? viewer : progress}</SingleColumnGrid>
-    </div>
+    </Page>
   );
 };
 export default WritQuotePage;

premiser-ui/src/__snapshots__/CreatePropositionPage.test.tsx.snap → premiser-ui/src/pages/__snapshots__/CreatePropositionPage.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`CreatePropositionPage (with fake timers) renders correctly with query params 1`] = `
 <div>
   <div
+    class="page"
     id="edit-proposition-justification-page"
   >
     <form>

premiser-ui/src/pages/appearances/AppearancePage.tsx

@@ -19,6 +19,7 @@ import { FontIcon } from "@react-md/icon";
 import { flows } from "@/actions";
 import app from "@/app/appSlice";
 import SingleColumnGrid from "@/components/layout/SingleColumnGrid";
+import { Page } from "@/components/layout/Page";
 
 interface MatchParams {
   appearanceId: EntityId;
@@ -143,7 +144,7 @@ export default function AppearancePage(props: Props) {
   ) : undefined;
 
   return (
-    <div>
+    <Page>
       <HowdjuHelmet>
         <title>{title} — Howdju</title>
       </HowdjuHelmet>
@@ -165,6 +166,6 @@ export default function AppearancePage(props: Props) {
       ) : (
         <CircularProgress id="appearance-page--progress" />
       )}
-    </div>
+    </Page>
   );
 }

premiser-ui/src/pages/factChecks/FactCheckPage.tsx

@@ -20,6 +20,7 @@ import page from "./factCheckPageSlice";
 import { CircularProgress } from "@/components/progress/CircularProgress";
 import { appearanceCardColSpans } from "@/components/listEntities/ListEntitiesWidget";
 import { FlipGrid } from "@/components/layout/FlipGrid";
+import { Page } from "@/components/layout/Page";
 
 /**
  * A page displaying Appearances that are part of a FactCheck.
@@ -92,7 +93,7 @@ function ValidParamsFactCheckPage({
   }
 
   return (
-    <div>
+    <Page>
       <HowdjuHelmet>
         <title>{title} — Howdju</title>
       </HowdjuHelmet>
@@ -128,6 +129,6 @@ function ValidParamsFactCheckPage({
           </GridCell>
         ))}
       </FlipGrid>
-    </div>
+    </Page>
   );
 }