feat: 🎸 Updated image upload component

.lintstagedrc

@@ -1,9 +1,4 @@
 {
-  "*.{ts,tsx,js,sol,json}": [
-    "eslint --cache --fix",
-    "prettier --write"
-  ],
-  "*.md": [
-    "prettier --write"
-  ]
+  "*.{ts,tsx,js,sol,json}": ["eslint --cache --fix", "prettier --write"],
+  "*.md": ["prettier --write"]
 }

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "devDependencies": {
     "@types/luxon": "^3.1.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "commitlint": "^17.2.0",
-    "prettier": "^2.7.1",
+    "@commitlint/config-conventional": "^17.3.0",
+    "commitlint": "^17.3.0",
+    "prettier": "^2.8.0",
     "git-cz": "^4.9.0",
     "husky": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.5",
@@ -28,17 +28,17 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-config-prettier": "^8.5.0",
     "ethers": "^5.7.2",
-    "wagmi": "^0.8.5",
+    "wagmi": "^0.8.8",
     "@rainbow-me/rainbowkit": "^0.8.0",
-    "@mui/material": "^5.10.15",
-    "@mui/joy": "^5.0.0-alpha.54",
-    "@mui/icons-material": "^5.10.15",
+    "@mui/material": "^5.10.16",
+    "@mui/joy": "^5.0.0-alpha.56",
+    "@mui/icons-material": "^5.10.16",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fontsource/public-sans": "^4.5.11",
-    "axios": "^1.1.3",
+    "axios": "^1.2.0",
     "qs": "^6.11.0",
-    "react-hook-form": "^7.39.5",
+    "react-hook-form": "^7.40.0",
     "@windingtree/org.id-utils": "1.2.4",
     "@windingtree/org.id-auth": "1.2.4",
     "@windingtree/org.json-schema": "1.0.2",
@@ -48,7 +48,8 @@
     "@rpldy/upload-button": "^1.3.0",
     "@rpldy/upload-preview": "^1.3.0",
     "@rpldy/upload-drop-zone": "^1.3.0",
-    "@rpldy/upload-url-input": "^1.3.0"
+    "@rpldy/upload-url-input": "^1.3.0",
+    "@rpldy/shared-ui": "^1.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/ProfileForm.tsx

@@ -25,6 +25,7 @@ export type FormErrors = any;
 
 export interface ProfileConfig {
   profileConfig?: ProfileOption[];
+  isUnit?: boolean;
 }
 
 export interface ProfileFormProps {

src/components/ProfileImage.tsx

@@ -1,8 +1,9 @@
-import { useState, forwardRef, useEffect } from 'react';
+import { useState, useEffect, forwardRef } from 'react';
 import Uploady, {
   useItemStartListener,
   useItemFinishListener,
   useItemErrorListener,
+  useUploadyContext,
 } from '@rpldy/uploady';
 import { asUploadButton } from '@rpldy/upload-button';
 import { SxProps } from '@mui/joy/styles/types';
@@ -16,6 +17,7 @@ import {
   FormControl,
   FormLabel,
   CircularProgress,
+  Input,
 } from '@mui/joy';
 import ImageIcon from '@mui/icons-material/Image';
 import UploadIcon from '@mui/icons-material/Upload';
@@ -24,13 +26,15 @@ import { BE_URI } from '../config';
 import { Message } from './Message';
 
 export interface ProfileImageProps {
+  url?: string;
   label: string;
   required?: boolean;
   onChange: (url?: string) => void;
   sx?: SxProps;
 }
 
 export interface ImageCardProps {
+  value?: string;
   onChange: (url?: string) => void;
 }
 
@@ -46,14 +50,16 @@ export const CustomUploadButton = asUploadButton(
       endDecorator={loading && <CircularProgress size="sm" />}
       disabled={loading}
     >
-      Upload image
+      Browse
     </Button>
   )),
 );
 
-export const ImageCard = ({ onChange }: ImageCardProps) => {
+export const ImageCard = ({ value, onChange }: ImageCardProps) => {
+  const ctx = useUploadyContext();
   const [loading, setLoading] = useState<boolean>(false);
-  const [url, setUrl] = useState<string | undefined>();
+  const [url, setUrl] = useState<string | undefined>(value);
+  const [customUrl, setCustomUrl] = useState<string>(value || '');
   const [error, setError] = useState<string | undefined>();
   useItemStartListener(() => {
     setError(undefined);
@@ -63,14 +69,28 @@ export const ImageCard = ({ onChange }: ImageCardProps) => {
     if (uploadResponse) {
       setLoading(false);
       setUrl(uploadResponse.data.url);
+      setCustomUrl(uploadResponse.data.url);
     }
   });
   useItemErrorListener(({ uploadResponse }) => {
     setLoading(false);
     setError(uploadResponse?.data?.message ?? 'Unknown error');
   });
+  useEffect(() => {
+    if (value) {
+      setUrl(value);
+      setCustomUrl(value);
+    }
+  }, [value]);
   useEffect(() => {
     onChange(url);
+    if (url && !url.startsWith('https://w3s.link/ipfs')) {
+      ctx.upload(url, {
+        destination: {
+          url: `${BE_URI}/api/fileUri`,
+        },
+      });
+    }
   }, [url]);
   const onReset = () => {
     setLoading(false);
@@ -95,13 +115,45 @@ export const ImageCard = ({ onChange }: ImageCardProps) => {
       </CardOverflow>
       <CardOverflow sx={{ p: 2 }}>
         <Box
-          sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
         >
           <CustomUploadButton extraProps={{ loading }} />
-          <IconButton variant="outlined" onClick={onReset}>
+          <IconButton variant="outlined" onClick={onReset} disabled={loading}>
             <CloseIcon />
           </IconButton>
         </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <FormControl sx={{ mt: 1 }} disabled={loading}>
+            <Input
+              value={customUrl}
+              onChange={({ target }) => {
+                setCustomUrl(target.value);
+              }}
+            />
+          </FormControl>
+          <IconButton
+            variant="outlined"
+            disabled={loading}
+            onClick={() => {
+              setUrl(customUrl);
+            }}
+          >
+            <UploadIcon />
+          </IconButton>
+        </Box>
+
         <Message type="error" show={error !== undefined} sx={{ mt: 1, mb: 0 }}>
           {error}
         </Message>
@@ -110,12 +162,18 @@ export const ImageCard = ({ onChange }: ImageCardProps) => {
   );
 };
 
-export const ProfileImage = ({ label, required, onChange, sx }: ProfileImageProps) => {
+export const ProfileImage = ({
+  url,
+  label,
+  required,
+  onChange,
+  sx,
+}: ProfileImageProps) => {
   return (
     <FormControl sx={sx}>
       <Uploady method="POST" destination={{ url: `${BE_URI}/api/file` }}>
         <FormLabel required={required}>{label}</FormLabel>
-        <ImageCard onChange={onChange} />
+        <ImageCard onChange={onChange} value={url} />
       </Uploady>
     </FormControl>
   );

src/pages/Profile.tsx

@@ -95,6 +95,13 @@ export const MigrationConfirmation = ({
     onClose(data);
   };
 
+  useEffect(() => {
+    if (rawOrgJson) {
+      // eslint-disable-next-line no-console
+      console.log('rawOrgJson:', rawOrgJson);
+    }
+  }, [rawOrgJson]);
+
   useEffect(() => {
     if (vc) {
       // eslint-disable-next-line no-console
@@ -215,13 +222,16 @@ export const Profile = () => {
   } = useForm<ProfileFormValues | ProfileUnitFormValues>();
   const watchForm = watch();
   const { orgJson, loading, error } = useOldOrgId(did);
-  const { profileConfig } = useMemo<ProfileConfig>(() => {
+  const { profileConfig, isUnit } = useMemo<ProfileConfig>(() => {
     let profileConfig: ProfileOption[] | undefined;
+    let isUnit: boolean | undefined;
     if (orgJson) {
       profileConfig = orgJson.organizationalUnit ? unitConfig : legalEntityConfig;
+      isUnit = orgJson.organizationalUnit !== undefined;
     }
     return {
       profileConfig,
+      isUnit,
     };
   }, [orgJson]);
 
@@ -304,7 +314,13 @@ export const Profile = () => {
       </FormControl>
 
       <div ref={logoRef} />
-      <ProfileImage label="Logotype" required onChange={setLogotype} sx={{ mb: 2 }} />
+      <ProfileImage
+        url={orgJson?.[isUnit ? 'organizationalUnit' : 'legalEntity'].media?.logo}
+        label="Logotype"
+        onChange={setLogotype}
+        required
+        sx={{ mb: 2 }}
+      />
       {!logotype && (
         <Message
           type="warn"
@@ -320,7 +336,9 @@ export const Profile = () => {
           unregister={unregister}
           errors={errors as FormErrors}
         />
-        <Button onClick={onSubmit}>Submit</Button>
+        <Button type="submit" size="lg" onClick={onSubmit} sx={{ my: 2 }}>
+          Submit
+        </Button>
       </form>
       <Message type="error" show={error !== undefined} sx={{ mb: 2 }}>
         {error}