enhancement of upload profile img | Innovateninjas#348

shilpashingnapure · May 26, 2024 · 03672e5 · 03672e5
1 parent cdeb0fc
commit 03672e5
Show file tree

Hide file tree

Showing 6 changed files with 321 additions and 200 deletions.
diff --git a/src/Components/shared/AlertDialog.jsx b/src/Components/shared/AlertDialog.jsx
@@ -0,0 +1,39 @@
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+
+export default function AlertDialog({ open , handleClose}) {
+  return (
+    <Dialog
+      open={open}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+      sx={{ textAlign: "center"  , width : 500 , margin : 'auto' }}
+
+    >
+      <DialogTitle id="alert-dialog-title">You've successfully registered.</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          Would you like to upload a profile picture to personalize your
+          account?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: 'center' , paddingBottom : '20px' }}>
+        <button
+          className="px-4 py-4 text-white bg-gradient-to-b from-green-600 to-green-700  bg-opacity-35 rounded-[35px] drop-shadow-md shadow-buttonShadow text-[1rem] leading-[1rem] tracking-widest"
+          onClick={() => handleClose(true)}
+        >
+          Skip for Now
+        </button>
+        <button
+          className="px-4 py-4 text-white bg-gradient-to-b from-green-600 to-green-700  bg-opacity-35 rounded-[35px] drop-shadow-md shadow-buttonShadow text-[1rem] leading-[1rem] tracking-widest"
+          onClick={() => handleClose(false)}
+        >
+          Upload Picture
+        </button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/Components/shared/ProfilePhoto.jsx b/src/Components/shared/ProfilePhoto.jsx
@@ -10,9 +10,16 @@ import {
 import { blue} from "@mui/material/colors";
 import { FaCamera } from "react-icons/fa";
 import { Close } from "@mui/icons-material";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export function ProfilePhoto({ userDetails, setUserData }) {
-  const [openDialog, setOpenDialog] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+
+  const queryParams = new URLSearchParams(location.search).get('upload') ? true : null;
+
+  const [openDialog, setOpenDialog] = useState(queryParams || false);
 
   const [showSaveBtn, setShowSaveBtns] = useState(false);
 
@@ -50,8 +57,17 @@ export function ProfilePhoto({ userDetails, setUserData }) {
     setOpenDialog(false);
     setShowSaveBtns(false);
     setTempImg(userDetails.profile_image);
+    removeQueryParams();
   };
 
+  // when reload/cancel/update want to remove query params
+  const removeQueryParams = () => {
+    if(queryParams){
+      navigate(location.pathname); 
+    }
+
+  }
+
   const handleSaveProfile = async () => {
     setLoading(true);
     try {
@@ -75,6 +91,7 @@ export function ProfilePhoto({ userDetails, setUserData }) {
       setOpenDialog(false);
       setShowSaveBtns(false);
       setLoading(false);
+      removeQueryParams();
       if (response.ok) {
         const data = await response.json();
         console.log(data);
@@ -140,7 +157,7 @@ export function ProfilePhoto({ userDetails, setUserData }) {
                         color: "rgba(255,255,255,0.8)",
                         width: "15rem",
                         height: "15rem",
-                        fontSize: "3rem",
+                        fontSize: "5rem",
                         bgcolor: blue[700],
                         textTransform: "capitalize",
                       }}

diff --git a/src/pages/ngo/NgoRegistration/NgoRegister.jsx b/src/pages/ngo/NgoRegistration/NgoRegister.jsx
@@ -7,10 +7,12 @@ import LoginTextLink from "../../../Components/shared/LoginTextLink";
 import getUserLocation from "../../../utils/Functions/getLocationData";
 import { AnimalList } from "./animalList";
 import Background from "../../../Components/shared/Background";
+import AlertDialog from "../../../Components/shared/AlertDialog";
+
 
 // import { shadow } from "@cloudinary/url-gen/actions/effect";]
 function NgoRegisterForm() {
-
+  
   const customButtonStyle = {
     borderRadius: "40px",
     background: "linear-gradient(to bottom, #16a34a, #15803d)",
@@ -36,13 +38,52 @@ function NgoRegisterForm() {
   const [darpanid, setDarpanid] = useState("");
   const [latitude, setLatitude] = useState(0);
   const [longitude, setLongitude] = useState(0);
+
+  const [isOpenConfirmBox, setIsOpenConfirmBox] = useState(false);
+
   useEffect(() => {
     getUserLocation(setLatitude, setLongitude);
   }, []);
 
+  // ngo Registration
+  const handleRegistration = async () => {
+    const res = await registration(
+      orgName,
+      phoneNumber,
+      email,
+      emergency,
+      password,
+      animalSupported,
+      lcation,
+      darpanid,
+      latitude,
+      longitude,
+      setError,
+      setButtonState
+    );
+
+    // when res is success then only show confirmation dialog
+    if (res) {
+      setTimeout(() => {
+        setIsOpenConfirmBox(() => true);
+      }, 3000);
+    }
+  };
+
+  // condition based rendering when resigration successful
+  const closeConfirmationDialog = (isUploadPhoto) => {
+    if (isUploadPhoto) {
+      window.location.href = "/";
+    } else {
+      window.location.href = "/ngoProfile?upload=true";
+    }
+
+    setIsOpenConfirmBox(false);
+  };
+
   return (
     <div className="h-full pt-9 w-screen flex items-center justify-center mb-[200px]">
-    <Background/>
+      <Background/>
       <form className="flex gap-[20px] items-center justify-center flex-col">
         <>
           <h1 className="text-center pb-1 pl-2 pr-2 z-[3] text-indigo-900 font-bold text-[2.5em] underline">Join Us Today</h1>
@@ -108,47 +149,47 @@ function NgoRegisterForm() {
           />
 
           <Creatable
-           styles={{
-        control: base => ({
-            ...base,
-            height: "4rem",
-            width: '20rem',
-            border: '0',
-            backgroundColor: 'rgba(255, 255, 255, 0.5)',
-            boxShadow: "3.847223997116089px 4.946430683135986px 14.289689064025879px 0px #00000040",
-            borderRadius: '30px',
-            padding: '0.5rem 1rem',
-            fontSize: '16px',
-            backdropFilter: 'blur(6px)',
-            outline: '0',
-            overflow: 'scroll',
-            position: 'relative',
-            
-        }),
-
-        multiValue: (provided, state) => ({
-            ...provided,
-            backgroundColor: 'rgba(255, 255, 255, 0.5)',
-            borderRadius: '30px',
-            fontSize: '18px',
-            marginLeft: '5px',
-            padding: '2px',
-        }),
-        clearIndicator: (provided, state) => ({
-            ...provided,
-            color: 'rgb(244 63 94)',
-        }),
+            styles={{
+              control: base => ({
+                ...base,
+                height: "4rem",
+                width: '20rem',
+                border: '0',
+                backgroundColor: 'rgba(255, 255, 255, 0.5)',
+                boxShadow: "3.847223997116089px 4.946430683135986px 14.289689064025879px 0px #00000040",
+                borderRadius: '30px',
+                padding: '0.5rem 1rem',
+                fontSize: '16px',
+                backdropFilter: 'blur(6px)',
+                outline: '0',
+                overflow: 'scroll',
+                position: 'relative',
+
+              }),
+
+              multiValue: (provided, state) => ({
+                ...provided,
+                backgroundColor: 'rgba(255, 255, 255, 0.5)',
+                borderRadius: '30px',
+                fontSize: '18px',
+                marginLeft: '5px',
+                padding: '2px',
+              }),
+              clearIndicator: (provided, state) => ({
+                ...provided,
+                color: 'rgb(244 63 94)',
+              }),
               placeholder: defaultStyles => ({
                 ...defaultStyles,
                 color: '#53605B',
                 fontSize: '18px',
               }),
-        dropdownIndicator: (provided, state) => ({
-            ...provided,
-            color: 'black',
-            lineHeight: '32px',
-        }),
-    }}
+              dropdownIndicator: (provided, state) => ({
+                ...provided,
+                color: 'black',
+                lineHeight: '32px',
+              }),
+            }}
 
             isMulti={true}
             placeholder="Animal Supported"
@@ -158,7 +199,7 @@ function NgoRegisterForm() {
               setError("");
               setanimalSupported(animalNames);
             }
-            }
+          }
           />
           {/* EMERGENCY CONTACT NUMBER */}
           <InputField
@@ -181,7 +222,7 @@ function NgoRegisterForm() {
               setError("");
               setDarpanid(e.target.value);
             }
-            }
+          }
           />
         </>
         <>
@@ -194,37 +235,27 @@ function NgoRegisterForm() {
               successText="Logging In"
               errorText="Register"
               messageDuration={3000}
-              onClick={async () => {   
-                registration(
-                  orgName,
-                  phoneNumber,
-                  email,
-                  emergency,
-                  password,
-                  animalSupported,
-                  lcation,
-                  darpanid,
-                  latitude,
-                  longitude,
-                  setError,
-                  setButtonState
-                );
-              }}
+              onClick={handleRegistration}
             />
-             {error && <p className="absolute top-[-25px] tracking-wide text-red-500 font-semibold text-center">{error}</p>}
+            {error && <p className="absolute top-[-25px] tracking-wide text-red-500 font-semibold text-center">{error}</p>}
           </div>
         </>
         <div className="w-screen h-fit flex flex-col mt-3 gap-2 items-center">
-        <LoginTextLink
-        />
-        <LoginTextLink
-          text={"Not an Ngo ?"}
-          link={"/register"}
-          linkText={"Register Here!"}
-        />
+          <LoginTextLink 
+          />
+          <LoginTextLink
+            text={"Not an Ngo ?"}
+            link={"/register"}
+            linkText={"Register Here!"}
+          />
         </div>
       </form>
-
+
+      {/* Alert Dialog for profile */}
+      <AlertDialog
+        open={isOpenConfirmBox}
+        handleClose={closeConfirmationDialog}
+      />
     </div>
   );
 }