refactor: improve type handling and update function parameters across multiple components + satisfy linter

Author: bastiion

packages/edit-table/features/table/Table.tsx

@@ -33,10 +33,9 @@ export const Table = () => {
     <MaterialReactTable
       tableInstanceRef={tableInstanceRef}
 
-      //@ts-ignore
       columns={columns}
       data={tableData}
-      state={tableState}
+      state={tableState as any}
 
       enableColumnResizing
       enablePinning

packages/edit-table/features/table/schema2columns.test.ts

@@ -31,7 +31,7 @@ test('single object + prefix', () => {
       }
     }
   }
-  expect(schema2columns( schema, 'name' )).toStrictEqual(
+  expect(schema2columns( schema, undefined, 'name' )).toStrictEqual(
     [
       {
         "accessorKey": "name.firstName",

packages/edit-table/features/table/schema2columns.ts

@@ -46,7 +46,6 @@ function property2column({key, subJsonSchema, prefix, uiSchema}: {key: string, s
 }
 
 export function schema2columns(schema: JsonSchema, uiSchema?: UISchemaElement, prefix='') {
-  console.log({schema, uiSchema})
   switch(schema.type) {
     case "object":
       return Object.entries(schema.properties||{})

packages/edit-timeline/features/timeline/Timeline.tsx

@@ -10,11 +10,10 @@ import {
   DataGroupCollectionType,
   DateType,
   IdType,
-  Timeline as TimelineType,
   TimelineItem,
   TimelineOptions,
   TimelineOptionsItemCallbackFunction
-} from "vis-timeline/types";
+} from "vis-timeline/declarations";
 import { useAppSelector, useAppDispatch } from "state";
 import { AppDispatch } from "state";
 import { selectData, setCellData, setRowSelection, Row } from "state";
@@ -85,7 +84,7 @@ export function Timeline() {
           (event) => event && event.start
         ) /** entries with missing start are not valid **/
 	.map(event => event as Item),
-    [tableData]
+    [tableData, eventFromRow]
   );
   console.log({tableData, mapping, items})
 
@@ -103,7 +102,7 @@ export function Timeline() {
 
   const onMove: TimelineOptionsItemCallbackFunction = useCallback(
     (item: TimelineItem, callback: any) => handleMove(dispatch, item as Item, callback),
-    [dispatch]
+    [dispatch, handleMove]
   );
   const onSelect = useCallback(
     (selectionArgs: { items: number[] }) =>

packages/edit-timeline/features/timeline/visTimelineWrapper/VisTimelineWrapper.tsx

@@ -6,16 +6,16 @@ import {
   DataGroupCollectionType,
   DateType,
   IdType,
-  Timeline as TimelineType,
   TimelineItem,
   TimelineOptions,
-} from "vis-timeline/types";
+} from "vis-timeline/declarations";
 import "vis-timeline/styles/vis-timeline-graph2d.css";
 
 import type {
+  DataItem,
   TimelineAnimationOptions,
   TimelineEvents,
-} from "vis-timeline/types";
+} from "vis-timeline/declarations";
 
 export type TimelineEventsWithMissing =
   | TimelineEvents
@@ -107,13 +107,15 @@ const VisTimelineWrapper = ({
 }: Props) => {
   const timelineContainerRef: RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
-  const timelineDatasetRef = useRef<DataSet<TimelineItem> | null>();
+  const timelineDatasetRef = useRef<DataSet<DataItem, "id"> | null>(null);
   const timelineGroupsRef = useRef<DataGroupCollectionType>();
-  const timelineRef = useRef<TimelineType | null>(null);
+  const timelineRef = useRef<InstanceType<typeof TimelineConstructor> | null>(
+    null
+  );
   const prevItems = useRef<TimelineItem[] | null>(null);
 
   useEffect(() => {
-    timelineDatasetRef.current = new DataSet();
+    timelineDatasetRef.current = new DataSet<DataItem, "id">();
     timelineRef.current = new TimelineConstructor(
       timelineContainerRef.current!,
       timelineDatasetRef.current,
@@ -144,7 +146,7 @@ const VisTimelineWrapper = ({
     if (!timelineDatasetRef.current || !timelineRef.current) return;
 
     let itemsLength = timelineDatasetRef.current.get().length
-    timelineDatasetRef.current.update(items);
+    timelineDatasetRef.current.update(items as DataItem[]);
     if(items.length !== itemsLength) {
       timelineRef.current.fit();
     }

packages/example/features/app/Debug.tsx

@@ -11,7 +11,7 @@ export function Print({json={}}: {json: any}) {
     <h4>{key}</h4>
     <p>
       { JSON.stringify(data, undefined, indentation).split('\n').map(
-          line => <>{ line.split(indentation).map( token => <span>{token} &nbsp; </span> ) }<br/></>
+          line => <React.Fragment key={line}>{ line.split(indentation).map( token => <span key={token}>{token} &nbsp; </span> ) }<br/></React.Fragment>
         )
       }
     </p>

packages/import/features/Import.tsx

@@ -1,15 +1,18 @@
 import { useEffect } from 'react';
 
 import { useAppSelector, useAppDispatch, setRowData } from 'state';
-import { selectJsonSchema, selectCryptedData, setCryptedData, selectUiSchema, setJsonSchema, setUiSchema, CryptedData } from 'project-state';
+import { selectJsonSchema, selectCryptedData, setCryptedData, selectUiSchema, setJsonSchema, setUiSchema } from 'project-state';
 import { PGPProvider, useDecryptUsingContext } from 'pgp-provider';
 import { api } from '@formswizard/api';
 
 function useFormId() {
-  const hash = typeof location != 'undefined' ? location.hash.slice(1) : '';
-  const hashParameters = !hash ? {} : Object.fromEntries(new URLSearchParams(hash) as any);
-  const { formId } = hashParameters;
-  return formId
+  if (typeof location === 'undefined' || !location.hash) {
+    return undefined;
+  }
+
+  const hash = location.hash.startsWith('#') ? location.hash.slice(1) : location.hash;
+  const formId = new URLSearchParams(hash).get('formId');
+  return formId ?? undefined;
 }
 
 export function DecryptAndImportLastNewSubmission() {
@@ -19,13 +22,14 @@ export function DecryptAndImportLastNewSubmission() {
   const cryptedData = useAppSelector(selectCryptedData);
   useEffect( () => {
     async function loadCryptedData() {
+      if (!formId) return;
       const { cryptedData } = await api.getProjectStateCryptedData(formId);
       cryptedData?.map( cryptedDatum => {
         dispatch(setCryptedData(cryptedDatum));  // TODO use a setter for all cryptedData at the same time
       });
     }
     cryptedData.length || loadCryptedData()
-  }, [cryptedData])
+  }, [cryptedData, dispatch, formId])
 
   const decrypt = useDecryptUsingContext();
   useEffect( () => {
@@ -36,7 +40,7 @@ export function DecryptAndImportLastNewSubmission() {
       const row = { ...decrypted, id, keyId, armoredPublicKey }
       decrypted && dispatch(setRowData({row}));
     })
-  }, [cryptedData]);
+  }, [cryptedData, dispatch, decrypt]);
 
   return <></>
 }
@@ -49,13 +53,14 @@ export function useSchema() {
 
   useEffect(() => {
     async function loadSchema() {
+      if (!formId) return;
       const { schema } = await api.getProjectStateSchema(formId);
       const { jsonSchema, uiSchema } = schema || {};
       jsonSchema && dispatch(setJsonSchema(jsonSchema))
       jsonSchema && dispatch(setUiSchema(uiSchema))
     }
     jsonSchema || loadSchema()
-  }, [jsonSchema, uiSchema, dispatch])
+  }, [jsonSchema, uiSchema, dispatch, formId])
 }
 
 export function Import() {

packages/layout/features/layout/Layout.tsx

@@ -93,8 +93,9 @@ export function Layout({children, title, drawer, drawerWidth='30%', tabs}: Props
 
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                  <Tabs value={ tabIdx } /*onChange={handleChange}*/>
-                   { tabs.map( (tab, idx) => { const onClick = useCallback( () => setTabIdx(idx), [idx] );
-			                       return <Tab key={'tab'+idx} icon={tab.icon as any} label={tab.label} onClick={onClick} /> } ) }
+                   { tabs.map( (tab, idx) =>
+                      <Tab key={'tab'+idx} icon={tab.icon as any} label={tab.label} onClick={() => setTabIdx(idx)} /> 
+                          ) }
                  </Tabs>
                </Box>
 	       { tabContent }

packages/pgp-provider/PGPProvider.tsx

@@ -64,7 +64,7 @@ export function PGPProvider({generateKeyOptions={}, children}: {generateKeyOptio
       };
     };
     asyncEffect();
-  }, [keyPair, setKeyPair])
+  }, [keyPair, setKeyPair, generateKeyOptions, passphrase])
 
   return (
     <PGPContext.Provider value={keyPair}>
@@ -83,7 +83,7 @@ export async function encrypt(text: string, armoredPubKeys?: string[], publicKey
   }
 }
 
-export function encryptUsingContext(text: string, armoredPubKeys?: string[]) {
+export function useEncryptUsingContext(text: string, armoredPubKeys?: string[]) {
   const {publicKey} = useKeyContext();  // The users publicKey will used in addition to the optionally specified armoredPubKeys
   const [encrypted, setEncrypted] = useState<string>();
 
@@ -93,7 +93,7 @@ export function encryptUsingContext(text: string, armoredPubKeys?: string[]) {
       setEncrypted(encrypted);
     };
     asyncEffect();
-  }, [text, publicKey, setEncrypted]);
+  }, [text, publicKey, armoredPubKeys, setEncrypted]);
 
   return encrypted;
 };
@@ -106,27 +106,12 @@ export function useDecryptUsingContext() {
       const message = await readMessage({ armoredMessage });
       const decrypted = (await pgp_decrypt({ message, decryptionKeys })
                                .catch(e => { console.error('Decryption failed. Do you have a correct privateKey?')
-                                             console.warn(e) })
-			)?.data.toString()
+                                             console.warn(e) 
+                                             return undefined
+                                            })
+			)?.data?.toString()
       return decrypted
     }
   };
   return decrypt
 }
-
-export function decryptUsingContext(armoredMessage?: string) {
-  const decrypt = useDecryptUsingContext();
-  const [decrypted, setDecrypted] = useState<string>();
-
-  useEffect(() => {
-    const asyncEffect = async () => {
-      if(armoredMessage) {
-	const decrypted = await decrypt(armoredMessage);
-	decrypted && setDecrypted(decrypted)
-      }
-    };
-    asyncEffect();
-  }, [armoredMessage, setDecrypted]);
-
-  return decrypted;
-};

packages/security-state/features/react/PresetSelector.tsx

@@ -10,7 +10,7 @@ function PresetSelectorCard({preset, raised, index, attackVector}: {preset: Pres
   const onClick = useCallback( () => securityStateDispatch && securityStateDispatch({ attackVector,
                                                                                       type: ACTIONS.selectPreset,
                                                                                       payload: {index} }),
-			       [index, securityStateDispatch] );
+			       [index, securityStateDispatch, attackVector] );
   const Icon = preset._ui?.icon;
   return (
     <Card onClick={onClick}