Merge pull request #152 from Justin-MacIntosh/screener-frontend-ts

Michael-Dratch · web-flow · commit 90874532277d · 2025-09-13T11:22:05.000-04:00
feat: Introduced Typescript typing for Screener FrontEnd
diff --git a/screener-frontend/package-lock.json b/screener-frontend/package-lock.json
diff --git a/screener-frontend/package.json b/screener-frontend/package.json
@@ -21,6 +21,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^22.15.18",
     "vite": "^6.3.5",
     "vite-plugin-solid": "^2.11.6"
diff --git a/screener-frontend/src/App.tsx b/screener-frontend/src/App.tsx
diff --git a/screener-frontend/src/EligibilityResults.tsx b/screener-frontend/src/EligibilityResults.tsx
@@ -1,9 +1,12 @@
-import { Switch, Match, For } from "solid-js";
+import { Switch, Match, For, Accessor } from "solid-js";
+
+import type { ResultDetail } from "./api/types";
+
 import checkIcon from "./assets/images/checkIcon.svg";
 import questionIcon from "./assets/images/questionIcon.svg";
 import xIcon from "./assets/images/xIcon.svg";
 
-export default function EligibilityResults({ results }) {
+export default function EligibilityResults({ results }: { results: Accessor<ResultDetail[] | undefined> }) {
   console.log(results());
   return (
     <div class="my-2 mx-12">
@@ -48,7 +51,7 @@ export default function EligibilityResults({ results }) {
                         <img src={xIcon} alt="" class="inline w-4 mr-2" />
                       </Match>
                     </Switch>
-                    <span className="text-xs">{check.displayName}</span>
+                    <span class="text-xs">{check.displayName}</span>
                   </p>
                 )}
               </For>
diff --git a/screener-frontend/src/Error.tsx b/screener-frontend/src/Error.tsx
@@ -1,7 +1,7 @@
-export default function ErrorPage({ error }) {
+export default function ErrorPage({ error }: { error: any }) {
   console.log(error);
   return (
-    <div className="py-24 flex-col justify-center h-screen items-center">
+    <div class="py-24 flex-col justify-center h-screen items-center">
       <h1 class="text-center text-xl">
         Sorry, there was an error loading the requested screener.
       </h1>
diff --git a/screener-frontend/src/FormRenderer.tsx b/screener-frontend/src/FormRenderer.tsx
@@ -1,14 +1,20 @@
 import { onMount } from "solid-js";
-import { Form } from "@bpmn-io/form-js-viewer";
+
 import debounce from "lodash.debounce";
+import { Form } from "@bpmn-io/form-js-viewer";
+import { State } from "@bpmn-io/form-js-viewer/dist/types/Form";
+
 import "@bpmn-io/form-js/dist/assets/form-js.css";
-import { useParams } from "@solidjs/router";
 
-function FormRenderer({ schema, submitForm }) {
-  let container;
+
+function FormRenderer(
+  { schema, submitForm }:
+  { schema: { [key: string]: any; }, submitForm: (data: any) => void }
+) {
+  let container: Element | null = null;
 
   onMount(() => {
-    const form = new Form({ container });
+    const form: Form = new Form({ container });
 
     const debouncedSubmit = debounce((data) => {
       submitForm(data);
@@ -17,7 +23,7 @@ function FormRenderer({ schema, submitForm }) {
     form
       .importSchema(schema)
       .then(() => {
-        form.on("changed", (event) => {
+        form.on("changed", (event: State) => {
           debouncedSubmit(event.data);
         });
       })
diff --git a/screener-frontend/src/Home.tsx b/screener-frontend/src/Home.tsx
@@ -1,6 +1,6 @@
 export default function Home() {
   return (
-    <div className="py-24 flex-col justify-center h-screen items-center">
+    <div class="py-24 flex-col justify-center h-screen items-center">
       <h1 class="text-center text-xl">Benefit Decision Toolkit</h1>
     </div>
   );
diff --git a/screener-frontend/src/Loading.tsx b/screener-frontend/src/Loading.tsx
@@ -1,6 +1,6 @@
 export default function Loading() {
   return (
-    <div className="py-24 flex-col justify-center h-screen items-center">
+    <div class="py-24 flex-col justify-center h-screen items-center">
       <h1 class="text-center text-xl">Loading Screener</h1>
       <div class="mt-8 flex items-center justify-center h-20">
         <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
diff --git a/screener-frontend/src/NotFound.tsx b/screener-frontend/src/NotFound.tsx
@@ -1,6 +1,6 @@
 export default function NotFound() {
   return (
-    <div className="py-24 flex-col justify-center h-screen items-center">
+    <div class="py-24 flex-col justify-center h-screen items-center">
       <h1 class="text-center text-xl">404 Screener Not Found</h1>
     </div>
   );
diff --git a/screener-frontend/src/Screener.tsx b/screener-frontend/src/Screener.tsx
@@ -1,18 +1,22 @@
 import { createSignal, createResource, ErrorBoundary } from "solid-js";
 import { useParams } from "@solidjs/router";
+
 import FormRenderer from "./FormRenderer";
-import { fetchScreenerData, getDecisionResult } from "./api/api";
 import Loading from "./Loading";
 import ErrorPage from "./Error";
 import EligibilityResults from "./EligibilityResults";
 
+import { fetchScreenerData, getDecisionResult } from "./api/api";
+
+import type { ResultDetail, Screener } from "./api/types";
+
 export default function Screener() {
   const params = useParams();
 
-  const [data] = createResource(() => fetchScreenerData(params.screenerId));
-  const [results, setResults] = createSignal();
+  const [screener] = createResource<Screener>(() => fetchScreenerData(params.screenerId));
+  const [results, setResults] = createSignal<ResultDetail[]>();
 
-  const submitForm = async (data) => {
+  const submitForm = async (data: any) => {
     try {
       let results = await getDecisionResult(params.screenerId, data);
       setResults(results);
@@ -27,17 +31,17 @@ export default function Screener() {
         <ErrorBoundary
           fallback={(error, reset) => <ErrorPage error={error}></ErrorPage>}
         >
-          {data.loading && <Loading></Loading>}
-          {data() && (
-            <div className="flex flex-col lg:flex-row">
-              <div className="flex-1 overflow-y-auto p-4">
+          {screener.loading && <Loading></Loading>}
+          {screener() && (
+            <div class="flex flex-col lg:flex-row">
+              <div class="flex-1 overflow-y-auto p-4">
                 <FormRenderer
-                  schema={data().formSchema}
+                  schema={screener()?.formSchema || {}}
                   submitForm={submitForm}
                 ></FormRenderer>
               </div>
 
-              <div className="flex-1 overflow-y-auto p-4">
+              <div class="flex-1 overflow-y-auto p-4">
                 <EligibilityResults results={results}></EligibilityResults>
               </div>
             </div>
diff --git a/screener-frontend/src/api/api.ts b/screener-frontend/src/api/api.ts
@@ -1,6 +1,8 @@
+import { Screener, ResultDetail } from "./types";
+
 const BASE_URL = import.meta.env.VITE_API_URL;
 
-export const fetchScreenerData = async (screenerId) => {
+export const fetchScreenerData = async (screenerId: string): Promise<Screener> => {
   try {
     const response = await fetch(`${BASE_URL}screener/${screenerId}`);
     if (!response.ok) {
@@ -14,7 +16,7 @@ export const fetchScreenerData = async (screenerId) => {
   }
 };
 
-export const getDecisionResult = async (screenerId, data) => {
+export const getDecisionResult = async (screenerId: string, data: any): Promise<ResultDetail[]> => {
   try {
     const response = await fetch(
       `${BASE_URL}decision?screenerId=${screenerId}`,
@@ -32,8 +34,9 @@ export const getDecisionResult = async (screenerId, data) => {
     }
     const result = await response.json();
     return result;
-  } catch (err) {
+  } catch (error) {
     console.log("Error submitting form");
-    console.log(err);
+    console.log(error);
+    throw error;
   }
 };
diff --git a/screener-frontend/src/api/types.ts b/screener-frontend/src/api/types.ts
@@ -0,0 +1,22 @@
+export interface Screener {
+  id: string;
+  formSchema: {
+    [key: string]: any;
+  };
+
+  // Allow for additional properties not explicitly defined here
+  [x: string | number | symbol]: unknown;
+}
+
+// First Level of ResultDetails are Benefits
+// Second Level of ResultDetails are Checks defining eligibility for that benefit 
+export interface ResultDetail {
+  displayName: string;
+  result: boolean;
+  info: string;
+  appLink: string;
+  checks: ResultDetail[],
+
+  // Allow for additional properties not explicitly defined here
+  [x: string | number | symbol]: unknown;
+}
diff --git a/screener-frontend/src/index.jsx b/screener-frontend/src/index.jsx
diff --git a/screener-frontend/src/index.tsx b/screener-frontend/src/index.tsx
@@ -0,0 +1,8 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+import App from './App';
+
+import './index.css';
+
+const root = document.getElementById('root')!;
+render(() => <App />, root);
diff --git a/screener-frontend/src/testData.ts b/screener-frontend/src/testData.ts
diff --git a/screener-frontend/tsconfig.json b/screener-frontend/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "target": "es5",
+    "module": "esnext",
+    "types": ["vite/client"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+  },
+  "include": [
+    "src"
+  ]
+}
