refactor: changes in edit user for public/ private profile (#278)

* feat:public profile features Signed-off-by: pranalidhanavade <[email protected]> * feat:changes in edit organization details model Signed-off-by: pranalidhanavade <[email protected]> * implemented public private selection in edit profile functionality Signed-off-by: @nishad.shirsat <[email protected]> --------- Signed-off-by: pranalidhanavade <[email protected]> Signed-off-by: @nishad.shirsat <[email protected]> Co-authored-by: pranalidhanavade <[email protected]>
credebl · Sep 18, 2023 · 6d15f69 · 6d15f69
1 parent 2ce63f7
commit 6d15f69
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 34 deletions.
diff --git a/src/components/Profile/DisplayUserProfile.tsx b/src/components/Profile/DisplayUserProfile.tsx
@@ -1,5 +1,5 @@
-import type { UserProfile } from "./interfaces";
 import CustomAvatar from '../Avatar'
+import type { UserProfile } from "./interfaces";
 
 interface DisplayUserProfileProps {
     toggleEditProfile: () => void;
@@ -76,6 +76,20 @@ interface DisplayUserProfileProps {
                             </div>
                         </div>
                     </li>
+                     <li className="py-3">
+                        <div className="flex items-center space-x-4">
+
+                            <div className="flex-1 min-w-0">
+                                <p className="text-lg font-normal text-gray-500 truncate dark:text-gray-400">
+                                    Public view
+                                </p>
+                                <p className="text-lg text-black truncate dark:text-white">
+
+                                    {userProfileInfo?.publicProfile ? " Public" : "Private"}
+                                </p>
+                            </div>
+                        </div>
+                    </li>
                 </ul>
             </div>
         </div>

diff --git a/src/components/Profile/EditUserProfile.tsx b/src/components/Profile/EditUserProfile.tsx
@@ -1,21 +1,22 @@
+import * as yup from "yup"
+
+import { Avatar, Button, Label } from "flowbite-react";
+import { Field, Form, Formik, FormikHelpers } from "formik";
+import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted, storageKeys } from "../../config/CommonConstant";
 import { SetStateAction, useEffect, useState } from "react";
-import type { UserProfile } from "./interfaces";
+import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
 import { getFromLocalStorage, getUserProfile, updateUserProfile } from "../../api/Auth";
-import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted, storageKeys } from "../../config/CommonConstant";
+
 import type { AxiosResponse } from "axios";
 import CustomAvatar from '../Avatar'
-import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
-import { Avatar, Button, Label } from "flowbite-react";
-import { Field, Form, Formik, FormikHelpers } from "formik";
+import type { UserProfile } from "./interfaces";
 import { asset } from "../../lib/data";
-import * as yup from "yup"
 
 interface Values {
   profileImg: string;
   firstName: string;
   lastName: string;
   email: string;
-  radio1: string | boolean;
 }
 
 interface ILogoImage {
@@ -33,13 +34,14 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
 
   const [loading, setLoading] = useState<boolean>(false)
   const [isImageEmpty, setIsImageEmpty] = useState(true)
+
+  const [isPublic, setIsPublic] = useState(true)
+
   const [initialProfileData, setInitialProfileData] = useState({
     profileImg: userProfileInfo?.profileImg || "",
     firstName: userProfileInfo?.firstName || "",
     lastName: userProfileInfo?.lastName || "",
-    email: userProfileInfo?.email || "",
-    radio1: userProfileInfo?.publicProfile?.toString()
-
+    email: userProfileInfo?.email || ""    
   })
   const [logoImage, setLogoImage] = useState<ILogoImage>({
     logoFile: '',
@@ -56,8 +58,7 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
         profileImg: userProfileInfo?.profileImg || "",
         firstName: userProfileInfo.firstName || '',
         lastName: userProfileInfo.lastName || '',
-        email: userProfileInfo?.email,  
-        radio1: userProfileInfo?.publicProfile.toString()  
+        email: userProfileInfo?.email 
       });
 
       setLogoImage({
@@ -153,21 +154,22 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
     setLoading(true)
 
     const userData = {
+      id: userProfileInfo?.id as number,
       firstName: values.firstName,
       lastName: values.lastName,
       email: values.email,
       profileImg: logoImage?.imagePreviewUrl as string || values?.profileImg,
-      publicProfile:values?.radio1
+      isPublic
     }
 
     const resUpdateUserDetails = await updateUserProfile(userData)
+    setLoading(false)
 
     const { data } = resUpdateUserDetails as AxiosResponse
 
-    updateProfile(userData);
-
-    setLoading(false)
-
+    if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+        updateProfile(userData);
+    }
   }
 
   const validationSchema = yup.object().shape({
@@ -199,7 +201,6 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
             if (!values.firstName || !values.lastName) {
               return;
             }
-            values['radio1'] = values?.radio1 === 'true' ? true : false
             updateUserDetails(values);
             toggleEditProfile();
 
@@ -329,13 +330,14 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
                                             value="Profile View"
                                         />
                                     </div>
-                                    <Field
+                                      <input
                                         className=""
                                         type="radio"
+                                        checked={isPublic === false}
+                                        onChange={() => setIsPublic(false)}
                                         id="private"
-                                        name="radio1"
-                                        value="true"
-                                    />
+                                        name="private"
+                                    />       
                                     <span className="ml-2 text-gray-900">Private
                                     <span className="block pl-6 text-gray-500 text-sm">Only the connected organization can see you organization details</span>
                                     </span>
@@ -349,12 +351,13 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
                                             value=""
                                         />
                                     </div>
-                                    <Field
+                                    <input
                                         className=""
                                         type="radio"
+                                        onChange={() => setIsPublic(true)}
+                                        checked={isPublic === true}
                                         id="public"
-                                        name="radio1"
-                                        value="false"
+                                        name="public"
                                     />
                                     <span className="ml-2 text-gray-900 ">Public
                                     <span className="block pl-6 text-gray-500 text-sm">Your profile and organization details can be seen by everyone</span></span>

diff --git a/src/components/Profile/interfaces/index.ts b/src/components/Profile/interfaces/index.ts
@@ -48,12 +48,13 @@ export interface UserEmail {
 
 export interface UserProfile {
   id: number
-  profileImg: string
-  username: string
+  profileImg?: string
+  username?: string
   email: string
   firstName: string
   lastName: string
-  isEmailVerified: boolean
-  keycloakUserId: string
-  publicProfile:boolean
+  isEmailVerified?: boolean
+  keycloakUserId?: string
+  publicProfile?: boolean
+  isPublic?:boolean
 }
diff --git a/src/components/organization/EditOrgdetailsModal.tsx b/src/components/organization/EditOrgdetailsModal.tsx
@@ -229,8 +229,8 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
                                 .trim(),
                             description: yup
                                 .string()
-                                .min(2, 'Organization name must be at least 2 characters')
-                                .max(600, 'Organization name must be at most 255 characters')
+                                .min(2, 'Organization description must be at least 2 characters')
+                                .max(600, 'Organization description must be at most 255 characters')
                                 .required('Description is required')
                         })}
                     validateOnBlur
@@ -240,7 +240,6 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
                         values: Values,
                         { resetForm }: FormikHelpers<Values>
                     ) => {
-
                         submitUpdateOrganization(values)
                     }}
                 >