Integrate backend services updates (#36)

Signed-off-by: Sean Sundberg <[email protected]>

package.json

@@ -35,6 +35,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "axios": "^1.5.0",
     "eslint": "^8.49.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",

src/atoms/kyc-case-management.atom.ts

@@ -4,6 +4,9 @@ import {atomWithObservable, loadable} from "jotai/utils";
 import {kycCaseManagementApi} from "../services";
 import {KycCaseModel} from "../models";
 
+const kycCasesAtom = atom(() => kycCaseManagementApi().listCases())
+export const kycCasesLoadable = loadable(kycCasesAtom)
+
 export const kycCaseAtom: Atom<KycCaseModel[]> = atomWithObservable(
     () => kycCaseManagementApi().subscribeToCases(),
     {initialValue: []}

src/atoms/menu-options.atom.ts

@@ -4,3 +4,10 @@ import {loadable} from "jotai/utils";
 
 export const countriesAtom = atom(async () => menuOptionsApi().getCountryList())
 export const countriesAtomLoadable = loadable(countriesAtom);
+
+
+export const entityTypesAtom = atom(async () => menuOptionsApi().getEntityTypes())
+export const entityTypesAtomLoadable = loadable(entityTypesAtom);
+
+export const industryTypesAtom = atom(async () => menuOptionsApi().getIndustries())
+export const industryTypesAtomLoadable = loadable(industryTypesAtom);

src/components/AtomSelect/AtomSelect.tsx

@@ -0,0 +1,74 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React, {ChangeEvent, CSSProperties} from 'react';
+import {Select, SelectItem} from "@carbon/react";
+import {Loadable} from "jotai/vanilla/utils/loadable";
+
+import {FormOptionModel} from "../../models";
+
+export interface AtomSelectProps {
+    id: string;
+    loadable: Loadable<Promise<FormOptionModel[]>>;
+    value: string;
+    invalidText: string;
+    labelText: string;
+    required?: boolean;
+    readOnly?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export interface SpecificAtomSelectProps {
+    id: string;
+    required?: boolean;
+    readOnly?: boolean;
+    value: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+const loadFormItems = (loadable: Loadable<Promise<FormOptionModel[]>>): FormOptionModel[] => {
+    const items: FormOptionModel[] = loadable.state === 'hasData'
+        ? loadable.data
+        : [];
+
+    return items
+        .filter(item => item.value !== null)
+        .filter(item => item.text !== undefined)
+        .filter(item => item.value !== 'null')
+        .filter(item => item.text !== 'undefined')
+}
+
+export const AtomSelect: React.FunctionComponent<AtomSelectProps> = (props: AtomSelectProps) => {
+
+    const items: FormOptionModel[] = loadFormItems(props.loadable);
+
+    const buildSelectItem = (option: FormOptionModel) => {
+        const key = `${props.id}-${option.value}`;
+
+        if (option.value === null || option.value === 'null') {
+            console.log('Option: ', Object.assign({}, option, {key}));
+        }
+
+        return (<SelectItem key={key} text={option.text} value={option.value} />)
+    }
+
+    return (
+        <Select
+            id={props.id}
+            invalidText={props.invalidText}
+            labelText={props.labelText}
+            disabled={props.loadable.state !== 'hasData'}
+            value={props.value}
+            onChange={props.onChange}
+            required={props.required}
+            readOnly={props.readOnly}
+            className={props.className}
+            style={props.style}
+        >
+            {items.map(buildSelectItem)}
+        </Select>
+    )
+}

src/components/AtomSelect/index.ts

@@ -0,0 +1 @@
+export * from './AtomSelect';

src/components/CountrySelect/CountrySelect.tsx

@@ -1,41 +1,29 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import React, {ChangeEvent, CSSProperties} from 'react';
-import {Select, SelectItem} from "@carbon/react";
+import React from 'react';
 import {useAtomValue} from "jotai";
+import {Loadable} from "jotai/vanilla/utils/loadable";
 
+import {AtomSelect, SpecificAtomSelectProps} from "../AtomSelect";
 import {countriesAtomLoadable} from "../../atoms";
 import {FormOptionModel} from "../../models";
 
-export interface CountrySelectProps {
-    id: string;
-    required?: boolean;
-    readOnly?: boolean;
-    value: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
-    className?: string;
-    style?: CSSProperties;
-}
-
-export const CountrySelect: React.FunctionComponent<CountrySelectProps> = (props: CountrySelectProps) => {
-    const countriesLoadable = useAtomValue(countriesAtomLoadable);
 
-    const countries: FormOptionModel[] = countriesLoadable.state === 'hasData' ? countriesLoadable.data : [];
+export const CountrySelect: React.FunctionComponent<SpecificAtomSelectProps> = (props: SpecificAtomSelectProps) => {
+    const countriesLoadable: Loadable<Promise<FormOptionModel[]>> = useAtomValue(countriesAtomLoadable);
 
     return (
-        <Select
+        <AtomSelect
             id={props.id}
             invalidText="Invalid country selected"
             labelText="Country of residence"
-            disabled={countriesLoadable.state !== 'hasData'}
             value={props.value}
             onChange={props.onChange}
             required={props.required}
             readOnly={props.readOnly}
             className={props.className}
             style={props.style}
-        >
-            {countries.map(option => <SelectItem key={option.value} text={option.text} value={option.value} />)}
-        </Select>
+            loadable={countriesLoadable}
+        />
     )
 }

src/components/DocumentList/DocumentList.tsx

@@ -8,11 +8,16 @@ import './DocumentList.scss';
 import {DocumentModel} from "../../models";
 
 export interface DocumentListProps {
-    documents: DocumentModel[]
+    hideEmpty?: boolean;
+    documents: DocumentModel[];
 }
 
 export const DocumentList: React.FunctionComponent<DocumentListProps> = (props: DocumentListProps) => {
     if (!props.documents || props.documents.length === 0) {
+        if (props.hideEmpty) {
+            return (<></>)
+        }
+
         return (
             <div className="document-list">
             <div className="cds--form-item">

src/components/EntityTypeSelect/EntityTypeSelect.tsx

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+import {useAtomValue} from "jotai";
+import {Loadable} from "jotai/vanilla/utils/loadable";
+
+import {AtomSelect, SpecificAtomSelectProps} from "../AtomSelect";
+import {entityTypesAtomLoadable} from "../../atoms";
+import {FormOptionModel} from "../../models";
+
+export const EntityTypeSelect: React.FunctionComponent<SpecificAtomSelectProps> = (props: SpecificAtomSelectProps) => {
+    const loadable: Loadable<Promise<FormOptionModel[]>> = useAtomValue(entityTypesAtomLoadable);
+
+    return (
+        <AtomSelect
+            id={props.id}
+            invalidText="Invalid entity type selected"
+            labelText="Entity type"
+            value={props.value}
+            onChange={props.onChange}
+            required={props.required}
+            readOnly={props.readOnly}
+            className={props.className}
+            style={props.style}
+            loadable={loadable}
+        />
+    )
+}

src/components/EntityTypeSelect/index.ts

@@ -0,0 +1 @@
+export * from './EntityTypeSelect'

src/components/IndustryTypeSelect/IndustryTypeSelect.tsx

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+import {useAtomValue} from "jotai";
+import {Loadable} from "jotai/vanilla/utils/loadable";
+
+import {AtomSelect, SpecificAtomSelectProps} from "../AtomSelect";
+import {industryTypesAtomLoadable} from "../../atoms";
+import {FormOptionModel} from "../../models";
+
+export const IndustryTypeSelect: React.FunctionComponent<SpecificAtomSelectProps> = (props: SpecificAtomSelectProps) => {
+    const loadable: Loadable<Promise<FormOptionModel[]>> = useAtomValue(industryTypesAtomLoadable);
+
+    return (
+        <AtomSelect
+            id={props.id}
+            invalidText="Invalid industry type selected"
+            labelText="Industry type"
+            value={props.value}
+            onChange={props.onChange}
+            required={props.required}
+            readOnly={props.readOnly}
+            className={props.className}
+            style={props.style}
+            loadable={loadable}
+        />
+    )
+}

src/components/IndustryTypeSelect/index.ts

@@ -0,0 +1 @@
+export * from './IndustryTypeSelect';

src/components/index.ts

@@ -6,5 +6,8 @@ export * from './DemoTile'
 export * from './DemoTileContainer'
 export * from './DataTable'
 export * from './DocumentList'
-export * from './CountrySelect'
 export * from './Stack'
+export * from './CountrySelect'
+export * from './EntityTypeSelect'
+export * from './IndustryTypeSelect'
+export * from './AtomSelect'