Content creator - profile picture functionality added

strapi/src/api/content-creator/content-types/content-creator/schema.json

@@ -121,6 +121,12 @@
       "target": "api::dashboard-activity.dashboard-activity",
       "mappedBy": "content_creator"
     },
+    "profilePicture": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
+      "allowedTypes": ["images"]
+    },
     "isAdmin": {
       "type": "boolean",
       "default": false

strapi/types/generated/contentTypes.d.ts

@@ -546,6 +546,7 @@ export interface ApiContentCreatorContentCreator
       Schema.Attribute.SetMinMaxLength<{
         minLength: 8;
       }>;
+    profilePicture: Schema.Attribute.Media<'images'>;
     publishedAt: Schema.Attribute.DateTime;
     rejectionReason: Schema.Attribute.String &
       Schema.Attribute.SetMinMaxLength<{

web/eslint.config.ts

@@ -88,6 +88,11 @@ export default [
     rules: {
       // Disable unified-signatures rule due to crashes in @typescript-eslint/eslint-plugin
       "@typescript-eslint/unified-signatures": "off",
+      // Prevents bugs from using "truthy" or "falsy" values in conditions.
+      "@typescript-eslint/strict-boolean-expressions": [
+        "error",
+        { allowString: false, allowNumber: false, allowNullableObject: true },
+      ],
       // Prevents `console.log` (In prod), but allows `console.warn` and `console.error`.
       "no-console": ["error", { allow: ["warn", "error"] }],
       // Enforces the project's coding conventions for naming variables, functions, etc.

web/src/features/course/components/course-editor-information.tsx

@@ -41,6 +41,7 @@ import {
 } from "../api/course-mutations";
 import { difficultyToTranslation } from "../lib/difficulty-to-translation";
 
+
 import CategoryCreateModal from "./category-create-modal";
 
 /* ------------------------------- Interfaces ------------------------------- */

web/src/features/course/lib/course-columns.tsx

@@ -135,6 +135,7 @@ export const createCourseColumns = ({
       },
     },
     {
+
       accessorKey: "difficulty",
       header: t("difficulty.difficulty"),
       cell: ({ row }) => {

web/src/features/media/hooks/use-file-upload.ts

@@ -12,9 +12,35 @@ export interface FileWithMetadata {
   caption: string;
 }
 
+// Define the single file object type from the API response
+type UploadedFile = {
+  id: number;
+  documentId: string;
+  name: string;
+  alternativeText?: string | null;
+  caption?: string | null;
+  width?: number;
+  height?: number;
+  formats?: { [key: string]: unknown };
+  hash: string;
+  ext?: string;
+  mime: string;
+  size: number;
+  url: string;
+  previewUrl?: string | null;
+  folder?: number;
+  folderPath: string;
+  provider: string;
+  provider_metadata?: { [key: string]: unknown } | null;
+  createdAt: string;
+  updatedAt: string;
+  createdBy?: number;
+  updatedBy?: number;
+};
+
 // eslint-disable-next-line sonarjs/class-name, @typescript-eslint/naming-convention
 interface useFileUploadReturn {
-  uploadFile: (files: FileWithMetadata[]) => Promise<UploadPostResponses[200] | undefined>;
+  uploadFile: (files: FileWithMetadata[]) => Promise<UploadedFile[] | undefined>;
   isUploading: boolean;
 }
 
@@ -64,8 +90,16 @@ export const useFileUpload = (): useFileUploadReturn => {
       // Wait for all uploads to complete
       const uploadedFiles = await Promise.all(uploadPromises);
 
-      // Flatten the results since each upload might return an array
-      const flattenedFiles = uploadedFiles.flat();
+      // Flatten the results since each upload might return a single object or an array
+      const flattenedFiles: UploadedFile[] = [];
+
+      for (const result of uploadedFiles) {
+        if (Array.isArray(result)) {
+          flattenedFiles.push(...result);
+        } else {
+          flattenedFiles.push(result);
+        }
+      }
 
       return flattenedFiles;
     } catch (error) {

web/src/features/user/components/PersonalInformation.tsx

@@ -1,9 +1,32 @@
 //Imports
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import Modals from "@/auth/components/Modals";
+import { getBaseApiUrl } from "@/shared/config/api-config";
 
-import { BACKEND_URL } from "../../../shared/config/environment";
+//Types
+interface PersonalInformationFormProps {
+  formData: {
+    UserName: string;
+    UserEmail: string;
+    bio?: string;
+    linkedin?: string;
+  };
+  errors: {
+    UserName?: { message?: string };
+    UserEmail?: { message?: string };
+    linkedin?: { message?: string };
+  };
+  handleCharCountBio: () => number;
+  toggleMenu1: boolean;
+  imageClick: () => void;
+  handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleProfilePictureDelete: () => void;
+  myRef: React.RefObject<HTMLInputElement>;
+  register: any; // react-hook-form register function
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  profilePictureUrl?: string;
+}
 
 //Exporting UI content&structure of
 export default function PersonalInformationForm({
@@ -13,20 +36,12 @@
   toggleMenu1,
   imageClick,
   handleFileChange,
+  handleProfilePictureDelete,
   myRef,
   register,
   handleInputChange,
-}: {
-  formData: any;
-  errors: any;
-  handleCharCountBio: any;
-  toggleMenu1: any;
-  imageClick: any;
-  handleFileChange: any;
-  myRef: any;
-  register: any;
-  handleInputChange: any;
-}) {
+  profilePictureUrl,
+}: PersonalInformationFormProps) {
   //State for pop up modals
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
@@ -42,31 +57,39 @@
     setModalInputValue(numericInput);
     setIntError(!/^[0-9]*$/.test(e.target.value));
   };
-  const getUserImage = async () => {
-    const response = await fetch(
-      `http://localhost:8888/api/bucket/${formData.photo}`,
-    );
+
+  // Helper function to construct the full image URL from Strapi
+  // Handles both absolute URLs (starting with http) and relative URLs from Strapi
+  const getImageUrl = (url: string | undefined): string => {
+    if (!url) return "";
+    if (url.startsWith('http')) return url;
+
+    let strapiBase = getBaseApiUrl();
+    if (strapiBase.endsWith('/api')) {
+      strapiBase = strapiBase.slice(0, -4);
+    }
+    return `${strapiBase}${url}`;
   };
-  useEffect(() => {
-    getUserImage();
-  }, []);
+
   return (
     <>
       {/* content of personal information when drop down button is clicked */}
       {toggleMenu1 && (
         /* Image */
         <div className="border border-[#166276] p-4 rounded-b-lg text-left bg-white shadow-xl">
           {/* Display selected image if uploaded, otherwise display icon with initials*/}
-          {formData.photo ? (
-            <img
-              src={`${BACKEND_URL}/api/bucket/${formData.photo}`}
-              className="w-[120px] h-[120px] p-[0px] bg-cyan-800 rounded-[60px] border-2 border-white inline-flex"
-              alt=""
-            />
+          {profilePictureUrl ? (
+            <div className="relative inline-block">
+              <img
+                src={getImageUrl(profilePictureUrl)}
+                className="w-[120px] h-[120px] rounded-full border-2 border-white object-cover"
+                alt="Profile Picture"
+              />
+            </div>
           ) : (
             <div
               onClick={imageClick}
-              className="w-[120px] h-[120px] p-[30px] bg-cyan-800 rounded-[60px] border-2 border-white justify-center items-center gap-[30px] inline-flex"
+              className="w-[120px] h-[120px] p-[30px] bg-cyan-800 rounded-[60px] border-2 border-white justify-center items-center gap-[30px] inline-flex cursor-pointer"
             >
               <div className="text-white text-4xl font-bold font-['Montserrat']">
                 {formData.UserName.charAt(0).toUpperCase()}
@@ -82,13 +105,25 @@
             style={{ display: "none" }}
           />
 
-          {/* On button click change image*/}
-          <button
-            className=" p-7 text-center text-cyan-800 text-lg font-bold font-['Montserrat'] underline"
-            onChange={handleFileChange}
-          >
-            Alterar foto de perfil
-          </button>
+          {/* Buttons for changing/deleting profile picture */}
+          <div className="flex gap-4 mt-2">
+            <button
+              type="button"
+              onClick={imageClick}
+              className="p-7 text-center text-cyan-800 text-lg font-bold font-['Montserrat'] underline"
+            >
+              Alterar foto de perfil
+            </button>
+            {profilePictureUrl && (
+              <button
+                type="button"
+                onClick={() => handleProfilePictureDelete()}
+                className="p-7 text-center text-red-500 text-lg font-bold font-['Montserrat'] underline"
+              >
+                Deletar foto
+              </button>
+            )}
+          </div>
           <div className="grid grid-cols-2 gap-3 mt-7">
             {/* Username */}
             <div className="flex flex-col ">