removed console logs, fixed formik default values, refactored duplica…

…te AutoCompleteInput components namspace collision
multiparty · Aug 15, 2023 · 7399c8a · 7399c8a
1 parent 4ab42d9
commit 7399c8a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 62 deletions.
diff --git a/client/src/components/company-input/company-input.tsx b/client/src/components/company-input/company-input.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, Divider, Grid, Stack, Typography } from '@mui/materi
 import { Form, Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import { TextInput } from '@components/forms/text-input';
-import { AutoCompleteInput } from '@components/forms/auto-complete-input';
+import { CompanyAutoCompleteInput } from '@components/forms/auto-complete-input';
 import { Industries } from '@constants/industries';
 import { Sizes } from '@constants/sizes';
 import { PasswordInput } from '@components/forms/password-input';
@@ -40,8 +40,8 @@ export const CompanyInputForm: FC<CompanyInputFormProps> = (props) => {
   const [initialValues, setInitialValues] = useState({
     submissionId: sessionId,
     participationCode: participantToken,
-    industry: undefined,
-    size: undefined
+    industry: '',
+    size: ''
   });
 
   const FormObserver: React.FC = () => {
@@ -75,8 +75,8 @@ export const CompanyInputForm: FC<CompanyInputFormProps> = (props) => {
                   <Stack spacing={2}>
                     <TextInput fullWidth name="submissionId" label="BWWC 2023 Submission ID" data-cy="submissionID" />
                     <PasswordInput fullWidth name="participationCode" label="Participation code" data-cy="sessionCode" />
-                    <AutoCompleteInput fullWidth name="industry" options={Industries} label="Industry selection" data-cy="industry" />
-                    <AutoCompleteInput fullWidth name="size" options={Sizes} label="Size" data-cy="size" />
+                    <CompanyAutoCompleteInput fullWidth name="industry" options={Industries} label="Industry selection" data-cy="industry" />
+                    <CompanyAutoCompleteInput fullWidth name="size" options={Sizes} label="Size" data-cy="size" />
                   </Stack>
                 </Form>
               </Formik>

diff --git a/client/src/components/forms/auto-complete-input.tsx b/client/src/components/forms/auto-complete-input.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useRef, useEffect } from 'react';
 import { Autocomplete, FormControl, TextField, TextFieldProps } from '@mui/material';
 import { useFormikContext } from 'formik';
 
@@ -12,8 +12,53 @@ export interface AutoCompleteInputProps {
   options: AutoCompleteOption[];
 }
 
-export const AutoCompleteInput: FC<AutoCompleteInputProps & TextFieldProps> = (props) => {
+interface AutoCompleteInputPropsExt extends AutoCompleteInputProps {
+  tabSelection: number;
+}
+
+export const CompanyAutoCompleteInput: FC<AutoCompleteInputProps & TextFieldProps> = (props) => {
   const { handleChange, handleBlur, values, touched, errors, isSubmitting } = useFormikContext<any>();
+  const selectedOption = props.options.find(opt => opt.value === values[props.name]);
+  return (
+    <FormControl variant={props.variant} fullWidth={props.fullWidth}>
+      <Autocomplete
+        options={props.options}
+        renderInput={(params: any) => (
+          <TextField {...props} {...params} error={!!errors[props.name]} helperText={(touched[props.name] && errors[props.name]) as string} InputLabelProps={{ shrink: true }} />
+        )}
+        onChange={(event, option) => 
+          handleChange({
+            target: {
+              name: props.name,
+              value: option ? option.value : ''
+            }
+          })
+        } 
+        value={selectedOption}
+        getOptionLabel={(option) => option ? option.label : ''}
+        onBlur={handleBlur}
+        disabled={props.disabled || isSubmitting}
+      />
+    </FormControl>
+  );
+};
+
+export const TableAutoCompleteInput: FC<AutoCompleteInputPropsExt & TextFieldProps> = (props) => {
+  const { handleChange, handleBlur, values, touched, errors, isSubmitting, setFieldValue } = useFormikContext<any>();
+  const { tabSelection } = props;
+  const prevTabSelection = useRef(tabSelection);
+
+  useEffect(() => {
+    if (prevTabSelection.current !== tabSelection) {
+      const newValue = tabSelection === 1 ? 'small' : 'it';
+      setFieldValue(props.name, newValue);
+      prevTabSelection.current = tabSelection;
+    }
+  }, [tabSelection]);
+
+  const selectedValue = values[props.name];
+  const autoCompleteValue = props.options.find((option) => option.value === selectedValue);
+
   return (
     <FormControl variant={props.variant} fullWidth={props.fullWidth}>
       <Autocomplete
@@ -25,10 +70,10 @@ export const AutoCompleteInput: FC<AutoCompleteInputProps & TextFieldProps> = (p
           handleChange({ target: { name: props.name, value: value?.value } });
         }}
         onBlur={handleBlur}
-        value={values[props.name]}
+        value={autoCompleteValue}
         getOptionLabel={(option) => option.label}
         disabled={props.disabled || isSubmitting}
       />
     </FormControl>
   );
-};
+};
diff --git a/client/src/components/session-decrypt/decrypt-input.tsx b/client/src/components/session-decrypt/decrypt-input.tsx
@@ -82,9 +82,7 @@ export const DecryptInputForm = () => {
   // Can replace this function with any custom functionality to apply
   // over unencrypted shares.
   async function decrypt(pKey: string) {
-    console.log('privateKey received');
     if (token !== undefined && sessionId !== undefined) {
-      console.log('decryption started');
       const privateCryptoKey = await importPemPrivateKey(pKey);
       const { data, total_cells, metadata } = await getSubmissions(sessionId, token);
 
@@ -95,7 +93,6 @@ export const DecryptInputForm = () => {
 
       const scale = (num: number) => num / 100;
       const decodedTable = await secretSharesToTable(data, privateCryptoKey, bigPrime, reduce, recordProgress, scale);
-      console.log('decryption completed');
       dispatch(setDecodedTable(decodedTable));
       dispatch(setMetadata(metadata));
     } else {

diff --git a/client/src/components/session-result/table-view.tsx b/client/src/components/session-result/table-view.tsx
@@ -2,7 +2,7 @@ import { FC, useState, useEffect, useRef } from 'react';
 import { Box, Stack, Grid } from '@mui/material';
 import * as Yup from 'yup';
 import { Autocomplete, FormControl, TextField, TextFieldProps } from '@mui/material';
-import { AutoCompleteInputProps } from '@components/forms/auto-complete-input';
+import { AutoCompleteInputProps, TableAutoCompleteInput } from '@components/forms/auto-complete-input';
 import { Industries } from '@constants/industries';
 import { Sizes } from '@constants/sizes';
 import { ResultTable } from './result-table';
@@ -23,45 +23,6 @@ const validationSchema = Yup.object().shape({
   ddSelection: Yup.string().required('Required')
 });
 
-interface AutoCompleteInputPropsExt extends AutoCompleteInputProps {
-  tabSelection: number;
-}
-
-export const AutoCompleteInput: FC<AutoCompleteInputPropsExt & TextFieldProps> = (props) => {
-  const { handleChange, handleBlur, values, touched, errors, isSubmitting, setFieldValue } = useFormikContext<any>();
-  const { tabSelection } = props;
-  const prevTabSelection = useRef(tabSelection);
-
-  useEffect(() => {
-    if (prevTabSelection.current !== tabSelection) {
-      const newValue = tabSelection === 1 ? 'small' : 'it';
-      setFieldValue(props.name, newValue);
-      prevTabSelection.current = tabSelection;
-    }
-  }, [tabSelection]);
-
-  const selectedValue = values[props.name];
-  const autoCompleteValue = props.options.find((option) => option.value === selectedValue);
-
-  return (
-    <FormControl variant={props.variant} fullWidth={props.fullWidth}>
-      <Autocomplete
-        options={props.options}
-        renderInput={(params: any) => (
-          <TextField {...props} {...params} error={!!errors[props.name]} helperText={(touched[props.name] && errors[props.name]) as string} InputLabelProps={{ shrink: true }} />
-        )}
-        onChange={(event, value) => {
-          handleChange({ target: { name: props.name, value: value?.value } });
-        }}
-        onBlur={handleBlur}
-        value={autoCompleteValue}
-        getOptionLabel={(option) => option.label}
-        disabled={props.disabled || isSubmitting}
-      />
-    </FormControl>
-  );
-};
-
 export const TableView: FC<ViewResultProps> = ({ tabSelection, data }) => {
   const [initialValue, setInitialValue] = useState({ input: tabSelection == 1 ? 'small' : 'it' });
   const [ddSelection, setDDSelection] = useState<String>(tabSelection == 1 ? 'small' : 'it');
@@ -94,9 +55,9 @@ export const TableView: FC<ViewResultProps> = ({ tabSelection, data }) => {
               <Form>
                 <FormObserver />
                 {tabSelection == 1 ? (
-                  <AutoCompleteInput key={tabSelection} fullWidth name="size" options={selectedSizes} label="Company Size selection" tabSelection={tabSelection} />
+                  <TableAutoCompleteInput key={tabSelection} fullWidth name="size" options={selectedSizes} label="Company Size selection" tabSelection={tabSelection} />
                 ) : (
-                  <AutoCompleteInput key={tabSelection} fullWidth name="industry" options={selectedIndustriess} label="Industry selection" tabSelection={tabSelection} />
+                  <TableAutoCompleteInput key={tabSelection} fullWidth name="industry" options={selectedIndustriess} label="Industry selection" tabSelection={tabSelection} />
                 )}
               </Form>
             </Formik>

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
@@ -43,24 +43,16 @@ export const HomePage: FC = () => {
   useEffect(() => {
     const loadData = async () => {
       if (file) {
-        console.log('Starting MPC Encryption');
         const csvData = await readCsv(file);
-        console.log('Validating Data');
         setIsDataValid(validateData(csvData));
-        console.log('Loading File Data');
         setData(csvData);
         const scale = (num: number) => num * 100;
         const prime = await getPrime(sessionId);
-        console.log('Loading Prime Number');
         const publicKeyString = await getPublicKey(sessionId);
-        console.log('Loading Public Key');
         const publicCryptoKey = await importPemPublicKey(publicKeyString);
-        console.log('Imported Public Key');
         const secretTable = await tableToSecretShares(csvData, numShares, threshold, numEncryptWithKey, publicCryptoKey, new BigNumber(prime), true, scale);
-        console.log('Encrypted Data');
         setTable(secretTable);
         setDataIsEncrypted(Object.keys(data).length !== 0);
-        console.log('MPC Encryption Complete');
       }
     };
     loadData();