update formdata

push-protocol · Nov 8, 2024 · b7bf3c7 · b7bf3c7
1 parent e6d8208
commit b7bf3c7
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 34 deletions.
diff --git a/src/components/UserProfileSettings/UploadAvatarModal.tsx b/src/components/UserProfileSettings/UploadAvatarModal.tsx
@@ -0,0 +1,173 @@
+import { FC, useRef, useState } from 'react';
+import { css } from 'styled-components';
+import { Box, Button, Cross, FileUpload, Modal, Text } from 'blocks';
+import ImageClipper from 'primaries/ImageClipper';
+import { ModalResponse } from 'common';
+
+type UploadAvatarModalProps = {
+  formValues: { avatar: File | null; imageSrc: string; imageType: string };
+  setFieldValue: (field: string, value: any) => void;
+  modalControl: ModalResponse;
+};
+
+const UploadAvatarModal: FC<UploadAvatarModalProps> = ({ formValues, setFieldValue, modalControl }) => {
+  const { isOpen, onClose } = modalControl;
+  const childRef = useRef();
+  const [croppedImage, setCroppedImage] = useState<string | undefined>(formValues.imageSrc);
+
+  // Handle file selection from input
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.currentTarget.files?.[0];
+    setCroppedImage(undefined);
+    if (file) {
+      await processFile(file);
+    }
+  };
+
+  // Handle file drop
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCroppedImage(undefined);
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      await processFile(file);
+    }
+  };
+
+  // Process selected file
+  const processFile = async (file: File) => {
+    setFieldValue('avatar', file);
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      setFieldValue('imageSrc', reader.result as string);
+      setFieldValue('imageType', file.type);
+    };
+  };
+
+  return (
+    <Modal
+      size="medium"
+      isOpen={isOpen}
+      onClose={onClose}
+      acceptButtonProps={null}
+      cancelButtonProps={null}
+    >
+      {/* Upload Area */}
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        gap="spacing-lg"
+      >
+        <Text
+          variant="bes-regular"
+          color="text-tertiary"
+        >
+          Upload a PNG, JPG up to 1MB. Crop the image to resize to 128px.
+        </Text>
+
+        <FileUpload
+          id="file-upload"
+          onChange={handleFileChange}
+          onDrop={handleDrop}
+        >
+          <Box
+            width={{ initial: '500px', ml: '325px' }}
+            padding="spacing-xxl spacing-none"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            border="border-sm dashed stroke-tertiary"
+            borderRadius="radius-md"
+            backgroundColor="surface-secondary"
+            gap="spacing-md"
+          >
+            {croppedImage ? (
+              <Box
+                width="128px"
+                height="128px"
+                borderRadius="radius-md"
+              >
+                <img
+                  style={{ borderRadius: 'inherit' }}
+                  width="100%"
+                  height="100%"
+                  src={croppedImage}
+                  alt="Cropped Img"
+                />
+              </Box>
+            ) : (
+              <ImageClipper
+                //@ts-ignore
+                width="200px"
+                height="200px"
+                imageSrc={formValues.imageSrc}
+                imageType={formValues.imageType}
+                onImageCropped={(croppedImg: string) => {
+                  setCroppedImage(croppedImg);
+                  setFieldValue('avatar', croppedImg);
+                }}
+                ref={childRef}
+              />
+            )}
+
+            <Box
+              display="flex"
+              gap="spacing-xxxs"
+            >
+              <Text
+                variant="bs-semibold"
+                color="text-tertiary"
+              >
+                Drag and Drop or
+              </Text>
+              <label htmlFor="file-upload">
+                <Text
+                  variant="bs-semibold"
+                  color="text-brand-medium"
+                  css={css`
+                    cursor: pointer;
+                  `}
+                >
+                  Browse to Choose
+                </Text>
+              </label>
+            </Box>
+          </Box>
+        </FileUpload>
+      </Box>
+
+      {/* Action Button */}
+      <Box
+        display="flex"
+        justifyContent="center"
+        width="100%"
+        margin="spacing-md spacing-none spacing-none spacing-none"
+      >
+        {croppedImage ? (
+          <Button
+            onClick={() => {
+              setFieldValue('avatar', croppedImage);
+              onClose();
+            }}
+          >
+            Upload Image
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              //@ts-ignore
+              childRef.current.showCroppedImage();
+            }}
+          >
+            Crop Image
+          </Button>
+        )}
+      </Box>
+    </Modal>
+  );
+};
+
+export default UploadAvatarModal;
diff --git a/src/components/UserProfileSettings/UserProfileSettings.tsx b/src/components/UserProfileSettings/UserProfileSettings.tsx
@@ -1,43 +1,97 @@
 // React and other libraries
 import { FC } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
 
 //Components
 import { Avatar, Box, Button, TextInput } from 'blocks';
+import { useDisclosure } from 'common';
+import UploadAvatarModal from './UploadAvatarModal';
+import { css } from 'styled-components';
 
 const UserProfileSettings: FC = () => {
+  const modalControl = useDisclosure();
+
+  // Validation schema using Yup
+  const validationSchema = Yup.object({
+    displayName: Yup.string().max(50, 'Display Name cannot exceed 50 characters').required('Display Name is required'),
+  });
+
+  // Formik setup
+  const formik = useFormik({
+    initialValues: { displayName: '', avatar: null, imageType: '', imageSrc: '' },
+    validationSchema,
+    onSubmit: (values) => {
+      console.log('Form submitted:', values);
+      // Add your save logic here
+    },
+  });
   return (
     <Box>
-      <Box
-        display="flex"
-        flexDirection="row"
-        gap="spacing-sm"
-        alignItems="center"
-        margin="spacing-xs spacing-none spacing-md spacing-none"
-      >
-        <Avatar />
-
-        <Button
-          variant="tertiary"
-          size="extraSmall"
+      <form onSubmit={formik.handleSubmit}>
+        <Box
+          display="flex"
+          flexDirection="row"
+          gap="spacing-sm"
+          alignItems="center"
+          margin="spacing-xs spacing-none spacing-md spacing-none"
         >
-          Change Avatar
-        </Button>
-      </Box>
-
-      <Box
-        display="flex"
-        flexDirection="column"
-        margin="spacing-none spacing-none spacing-xl spacing-none"
-      >
-        <TextInput
-          label="Display Name"
-          value={''}
-          onChange={() => console.log('new')}
-          totalCount={50}
-        />
-      </Box>
-
-      <Button size="small">Save Changes</Button>
+          {formik.values.avatar ? (
+            <Box
+              width="90px"
+              height="90px"
+              border="border-sm solid stroke-tertiary"
+              borderRadius="radius-md"
+              css={css`
+                img {
+                  border-radius: 16px;
+                }
+              `}
+            >
+              <img
+                width="100%"
+                height="100%"
+                src={formik.values.avatar}
+              />
+            </Box>
+          ) : (
+            <Avatar />
+          )}
+
+          <Button
+            variant="tertiary"
+            size="extraSmall"
+            onClick={() => modalControl.open()}
+          >
+            Change Avatar
+          </Button>
+        </Box>
+
+        {modalControl.isOpen && (
+          <UploadAvatarModal
+            modalControl={modalControl}
+            formValues={formik.values}
+            setFieldValue={formik.setFieldValue}
+          />
+        )}
+
+        <Box
+          display="flex"
+          flexDirection="column"
+          margin="spacing-none spacing-none spacing-xl spacing-none"
+        >
+          <TextInput
+            label="Display Name"
+            value={formik.values.displayName}
+            onChange={formik.handleChange('displayName')}
+            error={formik.touched.displayName && Boolean(formik.errors.displayName)}
+            errorMessage={formik.touched.displayName ? formik.errors.displayName : ''}
+            totalCount={50}
+          />
+        </Box>
+
+        <Button size="small">Save Changes</Button>
+      </form>
     </Box>
   );
 };

diff --git a/src/components/userSettings/UserSettings.tsx b/src/components/userSettings/UserSettings.tsx
@@ -149,10 +149,6 @@ function UserSettings() {
           {selectedOption == 0 && (
             <ChannelWrapper>
               <ChannelContainer selectedOption={selectedOption}>
-                {/* {selectOptions[selectedOption]?.title && (
-                  <SectionTitle>{selectOptions[selectedOption]?.title}</SectionTitle>
-                )} */}
-
                 <UserProfileSocialSettings />
               </ChannelContainer>
             </ChannelWrapper>