fix(pou): some refactoring (#1721)

.changeset/green-knives-guess.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/proof-of-us/src/components/AvatarEditor/AvatarEditor.tsx

@@ -23,7 +23,7 @@ export const AvatarEditor: FC<IProps> = ({ next }) => {
 
   const [isMounted, setIsMounted] = useState(false);
   const { addBackground } = useAvatar();
-  const { proofOfUs, updateBackgroundColor } = useProofOfUs();
+  const { proofOfUs, updateProofOfUs, updateBackgroundColor } = useProofOfUs();
 
   useEffect(() => {
     // if someone is already signing the pou, you are not allowed to change the photo anymore
@@ -95,7 +95,10 @@ export const AvatarEditor: FC<IProps> = ({ next }) => {
     if (!proofOfUs) return;
 
     await addBackground(proofOfUs, { bg: canvasRef.current.toDataURL() });
-    await updateBackgroundColor(color);
+    await updateProofOfUs({
+      backgroundColor: updateBackgroundColor(color),
+    });
+
     (videoRef.current?.srcObject as MediaStream)
       ?.getTracks()
       .forEach((t) => t.stop());

packages/apps/proof-of-us/src/components/ConnectView/ConnectView.tsx

@@ -1,8 +1,6 @@
 import { ImagePositions } from '@/components/ImagePositions/ImagePositions';
-import { MainLoader } from '@/components/MainLoader/MainLoader';
 import { TitleHeader } from '@/components/TitleHeader/TitleHeader';
 import { useSignToken } from '@/hooks/data/signToken';
-import { useSubmit } from '@/hooks/submit';
 import { isAlreadySigning } from '@/utils/isAlreadySigning';
 import { MonoSignature } from '@kadena/react-icons';
 import { Stack } from '@kadena/react-ui';
@@ -19,7 +17,6 @@ interface IProps {
 
 export const ConnectView: FC<IProps> = ({ proofOfUs }) => {
   const { signToken } = useSignToken();
-  const { isStatusLoading } = useSubmit();
 
   const handleJoin = async () => {
     //TODO FIX for the isAlreadySigning changes to quick
@@ -32,8 +29,6 @@ export const ConnectView: FC<IProps> = ({ proofOfUs }) => {
 
   return (
     <ScreenHeight>
-      {isStatusLoading && <MainLoader />}
-
       <TitleHeader label={proofOfUs.title ?? ''} />
       <ImagePositions />
       <ListSignees />

packages/apps/proof-of-us/src/components/DetailView/DetailView.tsx

@@ -23,7 +23,8 @@ interface IProps {
   prev: () => void;
 }
 export const DetailView: FC<IProps> = ({ next, prev }) => {
-  const { proofOfUs, closeToken, changeTitle } = useProofOfUs();
+  const { proofOfUs, closeToken, changeTitle, updateProofOfUs } =
+    useProofOfUs();
   const { removeBackground } = useAvatar();
   const [isMounted, setIsMounted] = useState(true);
   const router = useRouter();
@@ -53,7 +54,7 @@ export const DetailView: FC<IProps> = ({ next, prev }) => {
     router.replace('/user');
   };
 
-  const handleTitleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+  const handleTitleChange: ChangeEventHandler<HTMLInputElement> = async (e) => {
     //TODO: this needs to debounce
     if (!proofOfUs) return;
     const value = e.target.value;
@@ -62,7 +63,10 @@ export const DetailView: FC<IProps> = ({ next, prev }) => {
     } else {
       setTitleError('');
     }
-    changeTitle(value);
+
+    await updateProofOfUs({
+      title: changeTitle(value),
+    });
   };
 
   if (!isMounted) return null;

packages/apps/proof-of-us/src/components/Modal/Modal.tsx

@@ -16,7 +16,6 @@ export const Modal: FC<IProps> = ({ label, children, onClose }) => {
 
   const handleClose: MouseEventHandler<HTMLDivElement> = (evt) => {
     evt.preventDefault();
-    console.log(evt);
     if (evt.target !== backRef.current) return;
     onClose();
   };

packages/apps/proof-of-us/src/components/ProofOfUsProvider/ProofOfUsProvider.tsx

@@ -27,8 +27,8 @@ export interface IProofOfUsContext {
     signee: IProofOfUsSignee;
   }) => Promise<void>;
   createToken: ({ proofOfUsId }: { proofOfUsId: string }) => Promise<void>;
-  changeTitle: (value: string) => Promise<void>;
-  updateBackgroundColor: (value: string) => Promise<void>;
+  changeTitle: (value: string) => string;
+  updateBackgroundColor: (value: string) => string;
   isConnected: () => boolean;
   isInitiator: () => boolean;
   hasSigned: () => boolean;
@@ -46,8 +46,8 @@ export const ProofOfUsContext = createContext<IProofOfUsContext>({
   addSignee: async () => {},
   removeSignee: async () => {},
   createToken: async () => {},
-  changeTitle: async () => {},
-  updateBackgroundColor: async () => {},
+  changeTitle: () => '',
+  updateBackgroundColor: () => '',
   isConnected: () => false,
   isInitiator: () => false,
   hasSigned: () => false,
@@ -111,16 +111,15 @@ export const ProofOfUsProvider: FC<PropsWithChildren> = ({ children }) => {
     );
   };
 
-  const changeTitle = async (value: string) => {
-    if (!proofOfUs) return;
-
-    await store.addTitle(proofOfUs, value);
+  const changeTitle = (value: string) => {
+    if (isAlreadySigning(proofOfUs?.signees)) return proofOfUs?.title ?? '';
+    return value;
   };
 
-  const updateBackgroundColor = async (value: string) => {
-    if (!proofOfUs) return;
-
-    await store.updateBackgroundColor(proofOfUs, value);
+  const updateBackgroundColor = (value: string) => {
+    if (isAlreadySigning(proofOfUs?.signees))
+      return proofOfUs?.backgroundColor ?? '';
+    return value;
   };
 
   const updateSigner = (value: any, isOverwrite: boolean = false) => {

packages/apps/proof-of-us/src/hooks/avatar.ts

@@ -14,7 +14,6 @@ export const useAvatar = () => {
   };
 
   const uploadBackground = async (proofOfUsId: string) => {
-    console.log('uploadBackground');
     await fetch('/api/upload', {
       method: 'POST',
       body: JSON.stringify({

packages/apps/proof-of-us/src/hooks/listen.ts

@@ -17,7 +17,6 @@ export const useListen = () => {
 
     try {
       const result = await client.listen(txRes);
-      console.log({ result });
 
       if (result.result.status === 'success') {
         setStatus(SubmitStatus.SUCCESS);

packages/apps/proof-of-us/src/utils/getSigneeAccount.ts

@@ -6,17 +6,9 @@ export const getSigneeAccount = (
     (c) => c.accountName === account.accountName,
   );
 
-  console.log(22222222, {
-    account: account.accountName,
-    signees: proofOfUs?.signees,
-  });
-
   const credential = account.credentials[0];
-  console.log('signer', signer);
   if (signer) return signer;
 
-  console.log(111111111);
-
   return {
     accountName: account.accountName,
     alias: account.alias,

packages/apps/proof-of-us/src/utils/socket/store.ts

@@ -139,30 +139,9 @@ const ProofOfUsStore = () => {
     });
   };
 
-  const addTitle = async (proofOfUs: IProofOfUsData, value: string) => {
-    if (isAlreadySigning(proofOfUs.signees)) return;
-
-    await update(ref(database, `data/${proofOfUs.proofOfUsId}`), {
-      title: value,
-    });
-  };
-
-  const updateBackgroundColor = async (
-    proofOfUs: IProofOfUsData,
-    value: string,
-  ) => {
-    if (isAlreadySigning(proofOfUs.signees)) return;
-
-    await update(ref(database, `data/${proofOfUs.proofOfUsId}`), {
-      backgroundColor: value,
-    });
-  };
-
   const updateProofOfUs = async (proofOfUs: IProofOfUsData, value: any) => {
     const newProof = { ...proofOfUs, ...value };
 
-    console.log({ newProof });
-
     await update(ref(database, `data/${proofOfUs.proofOfUsId}`), newProof);
   };
 
@@ -179,8 +158,6 @@ const ProofOfUsStore = () => {
     updateStatus,
     listenProofOfUsData,
     listenProofOfUsBackgroundData,
-    addTitle,
-    updateBackgroundColor,
     updateProofOfUs,
   };
 };