Merge pull request #1639 from monocle/demo-fix

Fix routing to demo bug. Closes #1472

src/frontend/src/components/App/index.tsx

@@ -5,7 +5,7 @@ import history from "../../service/history";
 import Footer from "../Footer";
 import Header from "../Header";
 import RecordSearch from "../RecordSearch";
-import Demo from "../RecordSearch/Demo";
+import Demo from "../Demo";
 import OeciLogin from "../OeciLogin";
 import Landing from "../Landing";
 import Manual from "../Manual";
@@ -36,7 +36,10 @@ class App extends React.Component {
           <Route component={PrivacyPolicy} path="/privacy-policy" />
           <Route component={FillForms} path="/fill-expungement-forms" />
           <Route component={PartnerInterest} path="/partner-interest" />
-          <Route component={AccessibilityStatement} path="/accessibility-statement" />
+          <Route
+            component={AccessibilityStatement}
+            path="/accessibility-statement"
+          />
           <Route component={About} path="/about" />
           <Route render={this.redirect} />
         </Switch>

src/frontend/src/components/RecordSearch/Demo/DemoInfo.tsx → src/frontend/src/components/Demo/DemoInfo.tsx

@@ -1,19 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { connect } from "react-redux";
-import { stopDemo } from "../../../redux/search/actions";
-import history from "../../../service/history";
-import store from "../../../redux/store";
 
-interface Props {
-  stopDemo: Function;
-}
-class DemoInfo extends React.Component<Props> {
-  toOeci = () => {
-    store.dispatch(this.props.stopDemo());
-    history.push("/oeci");
-  };
-  formattedInfo = (firstName: string, lastName: string, description: string[], dateOfBirth: string) => {
+class DemoInfo extends React.Component {
+  formattedInfo = (
+    firstName: string,
+    lastName: string,
+    description: string[],
+    dateOfBirth: string
+  ) => {
     return (
       <div>
         <p className="flex lh-title mb3">
@@ -25,65 +19,66 @@ class DemoInfo extends React.Component<Props> {
             <div className="fw6">Last Name</div>
             <div>{lastName}</div>
           </div>
-          {
-            dateOfBirth && (
-              <div>
-                <div className="fw6">Date of Birth</div>
-                <div>{dateOfBirth}</div>
-              </div>
-            )
-          }
+          {dateOfBirth && (
+            <div>
+              <div className="fw6">Date of Birth</div>
+              <div>{dateOfBirth}</div>
+            </div>
+          )}
         </p>
-        {description.map((line: string) => <p className="pb2">{line}</p>)}
+        {description.map((line: string) => (
+          <p className="pb2">{line}</p>
+        ))}
       </div>
     );
-  }
+  };
 
   render() {
     const examplesData = [
       {
         name: "Single Conviction",
         firstName: "Single",
         lastName: "Conviction",
-        description: ["As a simple example, if a person's record has only a single convicted charge, it is eligible after three years."]
+        description: [
+          "As a simple example, if a person's record has only a single convicted charge, it is eligible after three years.",
+        ],
       },
       {
         name: "Multiple Charges",
         firstName: "Multiple",
         lastName: "Charges",
         description: [
           "If a record has more than one case, the time restrictions quickly get more complex, as this example demonstrates. Eligibility dates depend on whether dismissals are on the same or a different case as a conviction. Searching OECI will also reveal traffic violations, which are always ineligible.",
-          "This record also includes a case with an outstanding balance due for fines, which is indicated in both the record summary and on the case itself."
-        ]
+          "This record also includes a case with an outstanding balance due for fines, which is indicated in both the record summary and on the case itself.",
+        ],
       },
       {
         name: "John Common",
         firstName: "John",
         lastName: "Common",
         description: [
           "Searching for a common name will often bring up records that belong to different individuals, leading to an incorrect analysis for the set of resulting cases. Another source of confusion is that each case may or may not incude a birth year, as well as middle name or initial.",
-          "It is thus always recommended to provide a birth date in the search. You can also use the Enable Editing feature to remove cases or charges from the resulting record, and these charges will be excluded in the eligibility analysis."
+          "It is thus always recommended to provide a birth date in the search. You can also use the Enable Editing feature to remove cases or charges from the resulting record, and these charges will be excluded in the eligibility analysis.",
         ],
       },
       {
         name: "John Common – Class B Felony and Marijuana",
         firstName: "John",
         lastName: "Common",
         description: [
-          "Most charges that are eligible are also subject to the same set of time restrictions. There are some exceptions to this, notably Class B Felonies, and possession of less than an ounce of marijuana."
+          "Most charges that are eligible are also subject to the same set of time restrictions. There are some exceptions to this, notably Class B Felonies, and possession of less than an ounce of marijuana.",
         ],
-        dateOfBirth: "1/1/1970"
+        dateOfBirth: "1/1/1970",
       },
       {
         name: "John Common – Needs More Analysis",
         firstName: "John",
         lastName: "Common",
         description: [
-          "Some charges cannot be evaluated for eligibility until the user provides some follow-up information about the charge. RecordSponge deals with this ambiguity by showing the different possible outcomes for eligibility, and by asking the user for the required extra information in order to determine an exact analysis."
+          "Some charges cannot be evaluated for eligibility until the user provides some follow-up information about the charge. RecordSponge deals with this ambiguity by showing the different possible outcomes for eligibility, and by asking the user for the required extra information in order to determine an exact analysis.",
         ],
-        dateOfBirth: "2/2/1985"
+        dateOfBirth: "2/2/1985",
       },
-
     ];
     return (
       <article className="lh-copy">
@@ -117,19 +112,26 @@ class DemoInfo extends React.Component<Props> {
 
           <p className="mb4">
             Or,{" "}
-            <button className="link bb mid-gray hover-blue" onClick={this.toOeci}>
+            <Link
+              to="/oeci"
+              className="link bb mid-gray hover-blue"
+              onClick={() => window.scrollTo(0, 0)}
+            >
               log in to OECI
-            </button>
+            </Link>
             .
           </p>
           <div>
             {examplesData.map((e: any) => (
               <div>
-                <h2 className="fw9 bt b--light-gray pt2 mb3">
-                  {e.name}
-                </h2>
+                <h2 className="fw9 bt b--light-gray pt2 mb3">{e.name}</h2>
                 <div className="mw7 mb4">
-                  {this.formattedInfo(e.firstName, e.lastName, e.description, e.dateOfBirth)}
+                  {this.formattedInfo(
+                    e.firstName,
+                    e.lastName,
+                    e.description,
+                    e.dateOfBirth
+                  )}
                 </div>
               </div>
             ))}
@@ -139,4 +141,5 @@ class DemoInfo extends React.Component<Props> {
     );
   }
 }
-export default connect(() => {}, { stopDemo })(DemoInfo);
+
+export default DemoInfo;

src/frontend/src/components/Demo/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { connect } from "react-redux";
+import { RecordData } from "../RecordSearch/Record/types";
+import store, { AppState } from "../../redux/store";
+import { startDemo } from "../../redux/search/actions";
+import DemoInfo from "./DemoInfo";
+import SearchPanel from "../RecordSearch/SearchPanel";
+import Status from "../RecordSearch/Status";
+import Record from "../RecordSearch/Record";
+import Assumptions from "../RecordSearch/Assumptions";
+
+interface Props {
+  record?: RecordData;
+  startDemo: Function;
+}
+
+class Demo extends React.Component<Props> {
+  componentDidMount() {
+    document.title = "Demo - RecordSponge";
+    store.dispatch(this.props.startDemo());
+  }
+
+  render() {
+    return (
+      <main className="mw8 center f6 f5-l ph2">
+        <DemoInfo />
+        <SearchPanel />
+        <Status record={this.props.record} />
+        <Record record={this.props.record} />
+        <Assumptions />
+      </main>
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    record: state.search.record,
+  };
+};
+
+export default connect(mapStateToProps, { startDemo })(Demo);

src/frontend/src/components/RecordSearch/Assumptions/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { HashLink as Link } from "react-router-hash-link";
+
+export default function Assumptions() {
+  return (
+    <div className="bg-white shadow mb6 pa4 br3">
+      <h2 className="fw6 mb3">Assumptions</h2>
+      <p className="mb3">
+        We are only able to access your public Oregon records.
+      </p>
+      <p className="mb2">
+        Your analysis may be different if you have had cases which were:
+      </p>
+      <ul className="lh-copy pl4 mw6 mb3">
+        <li className="mb2">Previously expunged</li>
+        <li className="mb2">
+          From States besides Oregon within the last ten years
+        </li>
+        <li className="mb2">From Federal Court within the last ten years</li>
+        <li className="mb2">
+          From local District Courts, e.g. Medford Municipal Court (not Jackson
+          County Circuit Court) from within the last ten years
+        </li>
+      </ul>
+      <p>
+        <Link className="link hover-blue underline" to="/manual#assumption1">
+          Learn more in the Manual
+        </Link>
+      </p>
+    </div>
+  );
+}

src/frontend/src/components/RecordSearch/index.tsx

@@ -1,75 +1,42 @@
-import React, { Component } from "react";
+import React from "react";
 import { connect } from "react-redux";
-import { AppState } from "../../redux/store";
 import { RecordData } from "./Record/types";
+import store, { AppState } from "../../redux/store";
+import { stopDemo } from "../../redux/search/actions";
+import { checkOeciRedirect } from "../../service/cookie-service";
 import SearchPanel from "./SearchPanel";
 import Record from "./Record";
 import Status from "./Status";
-import DemoInfo from "./Demo/DemoInfo";
-import { checkOeciRedirect } from "../../service/cookie-service";
-import { HashLink as Link } from "react-router-hash-link";
+import Assumptions from "./Assumptions";
 
 interface Props {
-  demo: boolean;
   record?: RecordData;
+  stopDemo: Function;
 }
 
-class RecordSearch extends Component<Props> {
-
+class RecordSearch extends React.Component<Props> {
   componentDidMount() {
-    this.props.demo || checkOeciRedirect();
+    checkOeciRedirect();
     document.title = "Search Records - RecordSponge";
+    store.dispatch(this.props.stopDemo());
   }
 
   render() {
     return (
-      <>
-        <main className="mw8 center f6 f5-l ph2">
-          {this.props.demo && <DemoInfo />}
-          <SearchPanel />
-          <Status record={this.props.record} />
-          <Record record={this.props.record} />
-          <div className="bg-white shadow mb6 pa4 br3">
-            <h2 className="fw6 mb3">Assumptions</h2>
-            <p className="mb3">
-              We are only able to access your public Oregon records.
-            </p>
-            <p className="mb2">
-              Your analysis may be different if you have had cases which were:
-            </p>
-            <ul className="lh-copy pl4 mw6 mb3">
-              <li className="mb2">Previously expunged</li>
-              <li className="mb2">
-                From States besides Oregon within the last ten years
-              </li>
-              <li className="mb2">
-                From Federal Court within the last ten years
-              </li>
-              <li className="mb2">
-                From local District Courts, e.g. Medford Municipal Court (not
-                Jackson County Circuit Court) from within the last ten years
-              </li>
-            </ul>
-            <p>
-              <Link
-                className="link hover-blue underline"
-                to="/manual#assumption1"
-              >
-                Learn more in the Manual
-              </Link>
-            </p>
-          </div>
-        </main>
-      </>
+      <main className="mw8 center f6 f5-l ph2">
+        <SearchPanel />
+        <Status record={this.props.record} />
+        <Record record={this.props.record} />
+        <Assumptions />
+      </main>
     );
   }
 }
 
 const mapStateToProps = (state: AppState) => {
   return {
     record: state.search.record,
-    demo: state.search.demo,
   };
 };
 
-export default connect(mapStateToProps, {})(RecordSearch);
+export default connect(mapStateToProps, { stopDemo })(RecordSearch);

src/frontend/src/service/cookie-service.ts

@@ -35,6 +35,6 @@ export function isAdmin() {
 
 export function checkOeciRedirect() {
   if (!hasOeciToken()) {
-    history.push("/oeci");
+    history.replace("/oeci");
   }
 }