Fixed Gradient name to Profile Picture

src/frontend/src/constants/constants.ts

@@ -589,7 +589,7 @@ export const CONTROL_INPUT_STATE = {
 export const CONTROL_PATCH_USER_STATE = {
   password: "",
   cnfPassword: "",
-  gradient: "",
+  profilePicture: "",
   apikey: "",
 };
 

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -2,7 +2,7 @@ import * as Form from "@radix-ui/react-form";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
-import GradientChooserComponent from "../../components/gradientChooserComponent";
+import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -24,11 +24,11 @@ import {
 import { gradients } from "../../utils/styleUtils";
 export default function ProfileSettingsPage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId
+    (state) => state.setCurrentFlowId,
   );
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
-    CONTROL_PATCH_USER_STATE
+    CONTROL_PATCH_USER_STATE,
   );
 
   // set null id

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx

@@ -1,6 +1,6 @@
-import { gradients } from "../../utils/styleUtils";
+import { gradients } from "../../../../../../../../utils/styleUtils";
 
-export default function GradientChooserComponent({ value, onChange }) {
+export default function ProfilePictureChooserComponent({ value, onChange }) {
   return (
     <div className="flex flex-wrap items-center justify-start gap-2">
       {gradients.map((gradient, idx) => (

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx

@@ -1,5 +1,4 @@
 import * as Form from "@radix-ui/react-form";
-import GradientChooserComponent from "../../../../../../components/gradientChooserComponent";
 import { Button } from "../../../../../../components/ui/button";
 import {
   Card,
@@ -10,47 +9,48 @@ import {
   CardTitle,
 } from "../../../../../../components/ui/card";
 import { gradients } from "../../../../../../utils/styleUtils";
+import ProfilePictureChooserComponent from "./components/profilePictureChooserComponent";
 
-type ProfileGradientFormComponentProps = {
+type ProfilePictureFormComponentProps = {
-  gradient: string;
+  profilePicture: string;
   handleInput: (event: any) => void;
-  handlePatchGradient: (gradient: string) => void;
+  handlePatchProfilePicture: (gradient: string) => void;
   userData: any;
 };
-const ProfileGradientFormComponent = ({
+const ProfilePictureFormComponent = ({
-  gradient,
+  profilePicture,
   handleInput,
-  handlePatchGradient,
+  handlePatchProfilePicture,
   userData,
-}: ProfileGradientFormComponentProps) => {
+}: ProfilePictureFormComponentProps) => {
   return (
     <>
       <Form.Root
         onSubmit={(event) => {
-          handlePatchGradient(gradient);
+          handlePatchProfilePicture(profilePicture);
           event.preventDefault();
         }}
       >
         <Card x-chunk="dashboard-04-chunk-1">
           <CardHeader>
-            <CardTitle>Profile Gradient</CardTitle>
+            <CardTitle>Profile Picture</CardTitle>
             <CardDescription>
-              Choose the gradient that appears as your profile picture.
+              Choose the image that appears as your profile picture.
             </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="py-2">
-              <GradientChooserComponent
+              <ProfilePictureChooserComponent
                 value={
-                  gradient == ""
+                  profilePicture == ""
                     ? userData?.profile_image ??
                       gradients[
                         parseInt(userData?.id ?? "", 30) % gradients.length
                       ]
-                    : gradient
+                    : profilePicture
                 }
                 onChange={(value) => {
-                  handleInput({ target: { name: "gradient", value } });
+                  handleInput({ target: { name: "profilePicture", value } });
                 }}
               />
             </div>
@@ -65,4 +65,4 @@ const ProfileGradientFormComponent = ({
     </>
   );
 };
-export default ProfileGradientFormComponent;
+export default ProfilePictureFormComponent;

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -9,13 +9,13 @@ import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../../../types/components";
-import usePatchGradient from "../hooks/use-patch-gradient";
+import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import usePatchPassword from "../hooks/use-patch-password";
 import useSaveKey from "../hooks/use-save-key";
 import useScrollToElement from "../hooks/use-scroll-to-element";
 import GeneralPageHeaderComponent from "./components/GeneralPageHeader";
 import PasswordFormComponent from "./components/PasswordForm";
-import ProfileGradientFormComponent from "./components/ProfileGradientForm";
+import ProfilePictureFormComponent from "./components/ProfilePictureForm";
 import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 
 export default function GeneralPage() {
@@ -42,7 +42,7 @@ export default function GeneralPage() {
   const loadingApiKey = useStoreStore((state) => state.loadingApiKey);
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
   const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
-  const { password, cnfPassword, gradient, apikey } = inputState;
+  const { password, cnfPassword, profilePicture, apikey } = inputState;
 
   const { handlePatchPassword } = usePatchPassword(
     userData,
@@ -50,7 +50,7 @@ export default function GeneralPage() {
     setErrorData,
   );
 
-  const { handlePatchGradient } = usePatchGradient(
+  const { handlePatchProfilePicture } = usePatchProfilePicture(
     setSuccessData,
     setErrorData,
     userData,
@@ -78,10 +78,10 @@ export default function GeneralPage() {
       <GeneralPageHeaderComponent />
 
       <div className="grid gap-6">
-        <ProfileGradientFormComponent
+        <ProfilePictureFormComponent
-          gradient={gradient}
+          profilePicture={profilePicture}
           handleInput={handleInput}
-          handlePatchGradient={handlePatchGradient}
+          handlePatchProfilePicture={handlePatchProfilePicture}
           userData={userData}
         />
 

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx

@@ -5,18 +5,20 @@ import {
 } from "../../../../constants/alerts_constants";
 import { updateUser } from "../../../../controllers/API";
 
-const usePatchGradient = (
+const usePatchProfilePicture = (
   setSuccessData,
   setErrorData,
   currentUserData,
   setUserData,
 ) => {
-  const handlePatchGradient = async (gradient) => {
+  const handlePatchProfilePicture = async (profile_picture) => {
     try {
-      if (gradient !== "") {
+      if (profile_picture !== "") {
-        await updateUser(currentUserData.id, { profile_image: gradient });
+        await updateUser(currentUserData.id, {
+          profile_image: profile_picture,
+        });
         let newUserData = cloneDeep(currentUserData);
-        newUserData.profile_image = gradient;
+        newUserData.profile_image = profile_picture;
         setUserData(newUserData);
       }
       setSuccessData({ title: SAVE_SUCCESS_ALERT });
@@ -30,8 +32,8 @@ const usePatchGradient = (
 
   return {
     currentUserData,
-    handlePatchGradient,
+    handlePatchProfilePicture,
   };
 };
 
-export default usePatchGradient;
+export default usePatchProfilePicture;

src/frontend/src/types/components/index.ts

@@ -396,7 +396,7 @@ export type loginInputStateType = {
 export type patchUserInputStateType = {
   password: string;
   cnfPassword: string;
-  gradient: string;
+  profilePicture: string;
   apikey: string;
 };