env

.env

@@ -0,0 +1 @@
+VITE_SAS_TOKEN = 'sv=2022-11-02&ss=bf&srt=sco&sp=rwdlaciytfx&se=2023-08-10T14:42:42Z&st=2023-07-17T06:42:42Z&spr=https&sig=FSiYio%2FYQfHjjD8oHFyWiyXFYNuEpKSiDxqs4GP0sCc%3D'

.gitignore

@@ -24,5 +24,5 @@ dist-ssr
 *.sw?
 
 # Environment viriables
-.env
-/env
+# .env
+# /env

src/pages/Profile/Profile.jsx

@@ -6,12 +6,12 @@ import { useNavigate } from "react-router-dom";
 import placeholder from "../../Images/placeholder.png";
 import Loading from "../../components/Loading/Loading";
 import { BlobServiceClient } from "@azure/storage-blob";
-import { MdDelete } from "react-icons/md";
+import { MdDelete } from "react-icons/md"; 
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { toastStyles } from "../../toastConfig";
 
-// Import environment variable
+
 
 function Profile() {
   const navigate = useNavigate();
@@ -20,7 +20,7 @@ function Profile() {
   const [file, setFile] = useState(null);
   const [loading, setLoading] = useState(false);
   const [imageUrls, setImageUrls] = useState([]);
-  const [userImageUrl, setUserImageUrl] = useState(null); // Store the user-specific image URL
+  const [userImageUrl, setUserImageUrl] = useState(null); 
 
   let account = "taskminderimagestore";
   let sasToken = import.meta.env.VITE_SAS_TOKEN;
@@ -35,11 +35,8 @@ function Profile() {
   const fetchImages = async () => {
     try {
       setLoading(true);
-      const blobServiceClient = new BlobServiceClient(
-        `https://${account}.blob.core.windows.net`
-      );
-      const containerClient =
-        blobServiceClient.getContainerClient(containerName);
+      const blobServiceClient = new BlobServiceClient(`https://${account}.blob.core.windows.net`);
+      const containerClient = blobServiceClient.getContainerClient(containerName);
       const blobItems = containerClient.listBlobsFlat();
 
       let urls = []; //returns an array of objects with name and url
@@ -51,9 +48,7 @@ function Profile() {
       setLoading(false);
 
       // Find the URL for the specific user and set it to the state
-      const userImage = urls.find(
-        (url) => url.name === `${userData.user_id}.png`
-      );
+      const userImage = urls.find((url) => url.name === `${userData.user_id}.png`);
       if (userImage) {
         setUserImageUrl(userImage.url);
       } else {
@@ -74,11 +69,10 @@ function Profile() {
         setLoading(true);
         const blobName = `${userData.user_id}.png`;
         const blobServiceClient = new BlobServiceClient(
-          `https://${account}.blob.core.windows.net/?${sasToken}` // Use the SAS token to authenticate
+          `https://${account}.blob.core.windows.net/?${sasToken}` 
         );
         //blobService Client is a class that allows us to interact with the blob storage
-        const containerClient =
-          blobServiceClient.getContainerClient(containerName); // Get the container client used to interact with the container
+        const containerClient = blobServiceClient.getContainerClient(containerName); // Get the container client used to interact with the container
         const blobClient = containerClient.getBlockBlobClient(blobName); // Get the blob client used to interact with the blob
         const result = await blobClient.uploadData(file, {
           blobHTTPHeaders: { blobContentType: file.type },
@@ -95,9 +89,7 @@ function Profile() {
   };
 
   const deleteImage = async (blobName) => {
-    const blobServiceClient = new BlobServiceClient(
-      `https://${account}.blob.core.windows.net/?${sasToken}`
-    );
+    const blobServiceClient = new BlobServiceClient(`https://${account}.blob.core.windows.net/?${sasToken}`);
     const containerClient = blobServiceClient.getContainerClient(containerName);
     const blobClient = containerClient.getBlockBlobClient(blobName);
     try {
@@ -122,17 +114,7 @@ function Profile() {
         <div className="user_img">
           <form>
             <div className="file_upload">
-              {file ? (
-                <img
-                  className=""
-                  src={URL.createObjectURL(file)}
-                  alt="no pic"
-                />
-              ) : userImageUrl ? (
-                <img className="" src={userImageUrl} alt="profile pic" />
-              ) : (
-                <img className="displayImg" src={placeholder} alt="nopic" />
-              )}
+              {file ? <img className="" src={URL.createObjectURL(file)} alt="no pic" /> : userImageUrl ? <img className="" src={userImageUrl} alt="profile pic" /> : <img className="displayImg" src={placeholder} alt="nopic" />}
             </div>
 
             <div className="upload-form_inputs">
@@ -141,11 +123,7 @@ function Profile() {
                 id="fileInput"
                 onChange={(e) => setFile(e.target.files[0])} // set the file to the state.
               />
-              <button
-                type="submit"
-                onClick={handleSubmit}
-                className="uploadimage"
-              >
+              <button type="submit" onClick={handleSubmit} className="uploadimage">
                 Save
               </button>