Skip to content

Commit

Permalink
refactor: edit organization for private/public option (#277)
Browse files Browse the repository at this point in the history 
* feat:public profile features

Signed-off-by: pranalidhanavade <[email protected]>

* feat:changes in edit organization details model

Signed-off-by: pranalidhanavade <[email protected]>

---------

Signed-off-by: pranalidhanavade <[email protected]>
Signed-off-by: @nishad.shirsat <[email protected]>
Co-authored-by: pranalidhanavade <[email protected]>
  • Loading branch information
@nishad-ayanworks @pranalidhanavade
nishad-ayanworks and pranalidhanavade authored Sep 18, 2023
1 parent f0e8106 commit d34205b
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 126 deletions.
6 changes: 3 additions & 3 deletions src/components/Authentication/SignInUserPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ import {
Form,
Formik,
} from 'formik';
import React, { useState } from 'react';
import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
import { getUserProfile, loginUser, passwordEncryption, setToLocalStorage } from '../../api/Auth';

import { Alert } from 'flowbite-react';
import type { AxiosResponse } from 'axios';
import CustomSpinner from '../CustomSpinner';
import FooterBar from './FooterBar';
import NavBar from './NavBar';
import SignInUserPasskey from './SignInUserPasskey';
import { getSupabaseClient } from '../../supabase';
import NavBar from './NavBar';
import FooterBar from './FooterBar';
import React, { useState } from 'react';

interface emailValue {
email: string;
Expand Down
135 changes: 90 additions & 45 deletions src/components/Profile/EditUserProfile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { SetStateAction, useEffect, useState } from "react";
import type { UserProfile } from "./interfaces";
import { getFromLocalStorage, getUserProfile, updateUserProfile } from "../../api/Auth";
import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted, storageKeys } from "../../config/CommonConstant";
Expand All @@ -14,7 +14,8 @@ interface Values {
profileImg: string;
firstName: string;
lastName: string;
email:string;
email: string;
radio1: string | boolean;
}

interface ILogoImage {
Expand All @@ -37,13 +38,16 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
firstName: userProfileInfo?.firstName || "",
lastName: userProfileInfo?.lastName || "",
email: userProfileInfo?.email || "",

radio1: userProfileInfo?.publicProfile?.toString()

})
const [logoImage, setLogoImage] = useState<ILogoImage>({
logoFile: '',
imagePreviewUrl: userProfileInfo?.profileImg || "",
fileName: ''
})



useEffect(() => {

Expand All @@ -52,8 +56,8 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
profileImg: userProfileInfo?.profileImg || "",
firstName: userProfileInfo.firstName || '',
lastName: userProfileInfo.lastName || '',
email: userProfileInfo?.email,

email: userProfileInfo?.email,
radio1: userProfileInfo?.publicProfile.toString()
});

setLogoImage({
Expand Down Expand Up @@ -121,7 +125,7 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
...logoImage,
imagePreviewUrl: '',
});

const reader = new FileReader()
const file = event?.target?.files

Expand All @@ -146,18 +150,15 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }

const updateUserDetails = async (values: Values) => {

console.log(`Image::`, logoImage?.imagePreviewUrl);


setLoading(true)

const userData = {
id: userProfileInfo?.id,
firstName: values.firstName,
lastName: values.lastName,
email: values.email,
profileImg: logoImage?.imagePreviewUrl as string || values?.profileImg

profileImg: logoImage?.imagePreviewUrl as string || values?.profileImg,
publicProfile:values?.radio1
}

const resUpdateUserDetails = await updateUserProfile(userData)
Expand All @@ -172,14 +173,14 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }

const validationSchema = yup.object().shape({
firstName: yup.string()
.required("First Name is required")
.min(2, 'First name must be at least 2 characters')
.max(255, 'First name must be at most 255 characters'),
.required("First Name is required")
.min(2, 'First name must be at least 2 characters')
.max(255, 'First name must be at most 255 characters'),

lastName: yup.string()
.required("Last Name is required")
.min(2, 'Last name must be at least 2 characters')
.max(255, 'Last name must be at most 255 characters')
.required("Last Name is required")
.min(2, 'Last name must be at least 2 characters')
.max(255, 'Last name must be at most 255 characters')

});

Expand All @@ -192,17 +193,19 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
<Formik
initialValues={initialProfileData}
onSubmit={async (
values: Values,

values: Values,
{ resetForm }: FormikHelpers<Values>
) => {
) => {
if (!values.firstName || !values.lastName) {
return;
}

values['radio1'] = values?.radio1 === 'true' ? true : false
updateUserDetails(values);
toggleEditProfile();

}}

validationSchema={validationSchema}>
{(formikHandlers): JSX.Element => (
<Form onSubmit={
Expand All @@ -223,9 +226,9 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
/>

) : (
<CustomAvatar
size="90"
name={userProfileInfo?.firstName} /> )}
<CustomAvatar
size="90"
name={userProfileInfo?.firstName} />)}

<div>
<h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
Expand All @@ -251,25 +254,25 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
</div>
</div>
<button
type="button"
className="absolute top-0 right-0 w-6 h-6 m-2 "
onClick={toggleEditProfile}
>
<svg className="-top-1 -right-6 mr-1 w-6 h-6 mb-20"
width="24" height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="5" y1="12" x2="11" y2="18" />
<line x1="5" y1="12" x2="11" y2="6" />
</svg>

</button>
type="button"
className="absolute top-0 right-0 w-6 h-6 m-2 "
onClick={toggleEditProfile}
>
<svg className="-top-1 -right-6 mr-1 w-6 h-6 mb-20"
width="24" height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="5" y1="12" x2="11" y2="18" />
<line x1="5" y1="12" x2="11" y2="6" />
</svg>

</button>


</div>
Expand Down Expand Up @@ -317,15 +320,57 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
}
</div>

<div className="mx-2 grid ">
<div>
<div
className="block mb-2 mt-2 text-sm font-medium text-gray-900 dark:text-white"
>
<Label
htmlFor="name"
value="Profile View"
/>
</div>
<Field
className=""
type="radio"
id="private"
name="radio1"
value="true"
/>
<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>
</div>
<div>
<div
className="block mb-2 mt-2 text-sm font-medium text-gray-900 dark:text-white"
>
<Label
htmlFor="name"
value=""
/>
</div>
<Field
className=""
type="radio"
id="public"
name="radio1"
value="false"
/>
<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>
</div>
</div>

<div className="flex flex-col items-center sm:flex-row sm:justify-end">
<Button type="submit"
isProcessing={loading}
onClick={toggleEditProfile}
className='mt-4 mb-4 float-right text-base font-medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'

><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 18 18">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1v12l-4-2-4 2V1h8ZM3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z"/>
</svg>
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1v12l-4-2-4 2V1h8ZM3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" />
</svg>
Save
</Button>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/Profile/interfaces/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,5 @@ export interface UserProfile {
lastName: string
isEmailVerified: boolean
keycloakUserId: string
publicProfile:boolean
}
Loading

0 comments on commit d34205b

Please sign in to comment.