fixing coudinary (#298)

* bug(fixing TTL Page): Removing literal string (#297) - use enum instead of literal string * Update ProfileCoverpage.tsx --------- Co-authored-by: AbdoulKhaliq <[email protected]>
atlp-rwanda · Oct 2, 2023 · c24a47e · c24a47e · vercel · Oct 2, 2023
1 parent c58a33f
commit c24a47e
Show file tree

Hide file tree

Showing 25 changed files with 5,141 additions and 8,105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,7 +81,6 @@
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.4",
     "pnpm": "^8.6.11",
-    "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-calendar": "^3.9.0",
     "react-chartjs-2": "^5.2.0",

diff --git a/src/components/CustomSpinner.tsx b/src/components/CustomSpinner.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable */
+
+import React from 'react';
+
+interface CustomSpinnerProps {
+  size?: string;
+}
+
+const CustomSpinner: React.FC<CustomSpinnerProps> = ({ size }) => {
+  const spinnerSize = size || 'w-5 h-5'; // Set a default size or use the provided size
+
+  return (
+    <div
+      className={`loader ease-linear rounded-full border-8 ${spinnerSize} border-t-8 border-gray-200`}
+    />
+  );
+};
+
+export default CustomSpinner;
diff --git a/src/components/ProfileCoverpage.tsx b/src/components/ProfileCoverpage.tsx
@@ -15,7 +15,7 @@ import { toast } from 'react-toastify';
 import Button from './Buttons';
 import { GET_PROFILE } from '../Mutations/User';
 import Avatar from '../assets/avatar.png';
-import Spinner from '../components/Spinner';
+import Spinner from '../components/ButtonLoading';
 import { UserContext } from '../hook/useAuth';
 
 export default function ProfileCoverpage({
@@ -72,7 +72,7 @@ export default function ProfileCoverpage({
       /* istanbul ignore next */
       setSpinner(true);
       /* istanbul ignore if */
-       /* istanbul ignore next */
+      /* istanbul ignore next */
       if (updated) {
         setSpinner(false);
         setProfileImage(updated?.data?.updateAvatar?.avatar);
@@ -97,7 +97,7 @@ export default function ProfileCoverpage({
       formData.append('upload_preset', 'my_upload');
 
       const cover = await axios.post(
-        'https://api.cloudinary.com/v1_1/dj24yfas5/image/upload',
+        'https://api.cloudinary.com/v1_1/dta2axdpw/image/upload',
         formData,
       );
       /* istanbul ignore next */
@@ -166,10 +166,17 @@ export default function ProfileCoverpage({
       <div className="z-0 flex items-center justify-center h-full mr-auto -ml-10 bg-grey-lighter md:-ml-12 mt-36 md:mt-20">
         <div role="button">
           <label className="flex flex-row text-center ml-auto mr-4 rounded-lg bg-primary text-white hover:bg-[#7a5edc] focus:outline-none p-1">
-            <PencilAltIcon className="w-5 mt-0 mr-1 md:w-3 dark:text-dark-text-fill" />
-            <span className="text-lg md:text-sm dark:text-dark-text-fill">
-              <span className="hidden md:block">{t('Edit')} </span>
-            </span>
+            {/* Conditionally render based on the spinner state */}
+            {spinner ? (
+              <Spinner />
+            ) : (
+              <>
+                <PencilAltIcon className="w-5 mt-0 mr-1 md:w-3 dark:text-dark-text-fill" />
+                <span className="text-lg md:text-sm dark:text-dark-text-fill">
+                  <span className="hidden md:block">{t('Edit')}</span>
+                </span>
+              </>
+            )}
             <input
               type="file"
               className="hidden"
@@ -181,11 +188,10 @@ export default function ProfileCoverpage({
             />
           </label>
         </div>
-        {spinner ? <Spinner /> : ''}
       </div>
       {currentPage !== 'editProfile' ? (
         <Button
-         /* istanbul ignore next */
+          /* istanbul ignore next */
           onClick={() => handleEdit()}
           variant="default"
           size="md"
@@ -198,9 +204,7 @@ export default function ProfileCoverpage({
         <div className="flex items-center justify-center w-full h-screen mt-24 ml-auto bg-grey-lighter">
           <label className="flex flex-row text-center ml-auto mr-4 rounded-lg bg-primary text-white hover:bg-[#7a5edc] focus:outline-none p-2">
             <CameraIcon className="w-6 mt-0 mr-1 dark:text-dark-text-fill" />
-            <span className=" dark:text-dark-text-fill">
-              <span className="hidden md:block">{t('Change Picture')} </span>
-            </span>
+
             <input
               type="file"
               className="hidden"

diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx
@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import React, { useState, useContext,useEffect } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { gql, useMutation } from '@apollo/client';
 import axios from 'axios';
@@ -13,6 +13,7 @@ import Spinner from './Spinner';
 const UPLOAD_RESUME = gql`
   mutation UploadResume($userId: ID!, $resume: String!) {
     uploadResume(userId: $userId, resume: $resume) {
+      kindly
       resume
     }
   }
@@ -26,7 +27,7 @@ interface UploadFormProps {
   saveFile: () => void;
   closeModal: () => void;
   t: (key: string) => string;
-  loading:boolean;
+  loading: boolean;
 }
 
 function UploadForm({
@@ -37,7 +38,7 @@ function UploadForm({
   saveFile,
   closeModal,
   t,
-  loading
+  loading,
 }: UploadFormProps) {
   return (
     <form action="">
@@ -71,7 +72,7 @@ function UploadForm({
         </div>
       )}
       <Button variant="primary" size="lg" style="mt-5" onClick={saveFile}>
-      {loading ? <Spinner /> : t('upload')}
+        {loading ? <Spinner /> : t('upload')}
       </Button>
     </form>
   );
@@ -90,11 +91,11 @@ function Resume() {
   const [spinner, setSpinner] = useState(false);
   const [spinnerLink, setSpinnerLink] = useState(false);
   const [isPdfDisplayed, setIsPdfDisplayed] = useState(false);
-  const [display,setDisplay] = useState("Preview");
+  const [display, setDisplay] = useState('Preview');
 
-const [previewPdf, setPreviewPdf] = useState<string | null>(null);
-const [isPreviewVisible, setIsPreviewVisible] = useState(false);
-const [buttonLoading, setButtonLoading] = useState(false);
+  const [previewPdf, setPreviewPdf] = useState<string | null>(null);
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false);
+  const [buttonLoading, setButtonLoading] = useState(false);
 
   const { t } = useTranslation();
 
@@ -117,27 +118,23 @@ const [buttonLoading, setButtonLoading] = useState(false);
   };
 
   const saveFile = async () => {
-
     if (uploadType === 0 && file) {
       const formData = new FormData();
       formData.append('file', file);
       formData.append('upload_preset', 'mydocs');
       formData.append('resource_type', 'raw');
 
-
       try {
         if (file && file.type === 'application/pdf') {
-        setButtonLoading(true);
+          setButtonLoading(true);
           const resume = await axios.post(
-
-            `https://api.cloudinary.com/v1_1/dkgq3at71/raw/upload`,
+            `https://api.cloudinary.com/v1_1/dta2axdpw/raw/upload`,
 
             formData,
-
           );
-        
+
           setSpinner(true);
-         
+
           const updated = await UploadResume({
             variables: {
               userId: user.userId,
@@ -150,7 +147,7 @@ const [buttonLoading, setButtonLoading] = useState(false);
           setUploadedResumeLink(resume?.data?.secure_url);
 
           setPreviewPdf(resume?.data?.secure_url);
-              
+
           toast.success('Resume uploaded successfully!');
           setButtonLoading(false);
           setFile(null);
@@ -161,7 +158,6 @@ const [buttonLoading, setButtonLoading] = useState(false);
         const typedError = error as Error;
         toast.error(`Error uploading resume: ${typedError.message}`);
         setButtonLoading(false);
-
       }
     }
 
@@ -253,39 +249,35 @@ const [buttonLoading, setButtonLoading] = useState(false);
               closeModal={closeModal}
               loading={buttonLoading}
               t={t}
-
             />
           </div>
         )}
 
-
         {uploadedResumeLink && (
           <div>
+            <div className="mt-5">
+              <Button
+                variant="secondary"
+                size="md"
+                style="mt-3"
+                onClick={() => {
+                  setPreviewPdf(null);
+                  setIsPdfDisplayed(!isPdfDisplayed);
+                }}
+              >
+                {isPdfDisplayed ? <h2>Close</h2> : <h2>{display}</h2>}
+              </Button>
 
-
-          <div className="mt-5">
-                        <Button
-              variant="secondary"
-              size="md"
-              style="mt-3"
-              onClick={() => {
-                setPreviewPdf(null);
-                setIsPdfDisplayed(!isPdfDisplayed);
-              }}
-            >
-            {isPdfDisplayed ? <h2>Close</h2> : <h2>{display}</h2>}
-            </Button>
-
-
-           {isPdfDisplayed && (
-             <div className="mt-3">
-             <embed src={uploadedResumeLink} className='w-full' style={{height:"1000px"}} />
-             </div>
-           )}
-
-
-          </div>
-
+              {isPdfDisplayed && (
+                <div className="mt-3">
+                  <embed
+                    src={uploadedResumeLink}
+                    className="w-full"
+                    style={{ height: '1000px' }}
+                  />
+                </div>
+              )}
+            </div>
           </div>
         )}
       </div>

diff --git a/src/components/tests/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/src/components/tests/__snapshots__/AdminTraineeDashboard.test.tsx.snap
@@ -932,6 +932,20 @@ Array [
                         >
                           program
                         </th>
+                        <th
+                          className=" thead"
+                          colSpan={1}
+                          onClick={[Function]}
+                          role="columnheader"
+                          style={
+                            Object {
+                              "cursor": "pointer",
+                            }
+                          }
+                          title="Toggle SortBy"
+                        >
+                          View
+                        </th>
                         <th
                           className=" thead"
                           colSpan={1}
@@ -979,6 +993,21 @@ Array [
                           className="data-cell"
                           role="cell"
                         />
+                        <td
+                          className="data-cell"
+                          role="cell"
+                        >
+                          <div
+                            className=" items-center hidden"
+                          >
+                            <button
+                              className="bg-black text-white rounded-xl px-3"
+                              onClick={[Function]}
+                            >
+                              View
+                            </button>
+                          </div>
+                        </td>
                         <td
                           className="data-cell"
                           role="cell"
@@ -994,7 +1023,7 @@ Array [
                       </tr>
                       <tr>
                         <td
-                          colSpan={7}
+                          colSpan={8}
                           style={
                             Object {
                               "textAlign": "center",
@@ -1017,7 +1046,7 @@ Array [
                           className="w-full py-2"
                         >
                           <td
-                            colSpan={7}
+                            colSpan={8}
                           >
                             <div
                               className="w-full justify-center flex mx-auto flex-row items-center overflow-x-auto"

diff --git a/src/components/tests/__snapshots__/ButtonLoading.test.tsx.snap b/src/components/tests/__snapshots__/ButtonLoading.test.tsx.snap
@@ -2,16 +2,20 @@
 
 exports[`Button Loading Renders the button 1`] = `
 <div
-  className="flex btn w-fit py-1 px-3 bg-primary font-bold md"
+  className="flex w-fit py-1 px-3 bg-primary justify-center font-bold md"
 >
   <div
-    className="loader mr-1"
-  />
-  <button
-    className="ml-1 text-white font-bold"
-    disabled={true}
+    className="flex w-full gap-2 justify-center items-center"
   >
-    Processing...
-  </button>
+    <div
+      className="loader"
+    />
+    <button
+      className=" text-white font-bold"
+      disabled={true}
+    >
+      Processing...
+    </button>
+  </div>
 </div>
 `;
diff --git a/src/components/tests/__snapshots__/DashHeader.test.tsx.snap b/src/components/tests/__snapshots__/DashHeader.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`DashHeader test  Should render DashHeader 1`] = `
         onClick={[Function]}
       >
         <svg
-          className="w-full cursor-pointer mr-2"
+          className="w-full cursor-pointer mr-2 "
           fill="none"
           height="36"
           viewBox="0 0 59 36"

diff --git a/src/components/tests/__snapshots__/Footer.test.tsx.snap b/src/components/tests/__snapshots__/Footer.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<Footer/> Renders Header 1`] = `
           className="flex mb-2 ml-10 text-dark dark:text-dark-text-fill"
         >
           <svg
-            className="w-full cursor-pointer mr-2"
+            className="w-full cursor-pointer mr-2 "
             fill="none"
             height="36"
             viewBox="0 0 59 36"