Content creator - profile picture functionality added by RasmusJensen1 · Pull Request #143 · ErasmusEgalitarian/educado-backend

RasmusJensen1 · 2025-12-03T10:35:57Z

Descrption

Added profile picture upload, update, and delete functionality for content creators.

Summary of Changes

Backend Manual Changes

`schema.json`

Added new field: profilePicture
- Type: Media
- Single image
- Optional

Frontend Manual Changes

`Profile.tsx`

Added handleProfilePictureUpload()
- Validates file type and max size (5MB) (Can be changed, but i think it is a pretty appropriate size)
Added handleProfilePictureDelete()
- Deletes existing image
Integrated React Query for caching + automatic refetching
Updated API calls to include the profile picture field

`PersonalInformation.tsx`

Displays profile picture or fallback initials
Added UI actions:
- Alterar foto de perfil
- Deletar foto
Implemented getImageUrl()

Auto-Generated Files (Strapi)

These files are generated automatically and may include diffs unrelated to functional changes due to it being autogenerated.

strapi-spec.json
contentTypes.d.ts
types.gen.ts
sdk.gen.ts
zod.gen.ts

Generated by:

Strapi documentation plugin
npm run generate-strapi-client

Includes:

Updated TypeScript types
SDK functions
Zod schemas

Acceptence criteria

Content creator can upload a profile picture
Content creator can update their profile picture
Content creator can delete their profile picture, after which the default picture will be shown

Please make sure to test the functionality when reviewing, and if there is any questions that makes more sense to take over a Discord call, don't hesitate to give us a call ⚡

A front-end successor PBI will be made so it matches the Figma.

Co contributor: @OliverKjaer

* start * save * fixed * fix

+ more

…w category (#31) * multiselect new entries can now add new entries in multiselects with a popup modal and error messages * translation, button fix, course info multiselect * Fix categories load, category creation. Clean error & loading states * Translation fix * feat: (web) file upload to course (#29) * start * save * fixed * fix --------- Co-authored-by: Alfred <47451379+Alfenstein8@users.noreply.github.com> Co-authored-by: Smidtty <148750415+Smidtty@users.noreply.github.com> Co-authored-by: Albert <148211219+Alb9ert@users.noreply.github.com>

Design changes

* Add useAuth hook, sync with language and preferences for usePaginatedData. * Update web/src/shared/hooks/use-local-storage.ts Co-authored-by: Albert <148211219+Alb9ert@users.noreply.github.com> * Update web/src/shared/hooks/use-isomorphic-layout-effect.tsx Co-authored-by: Albert <148211219+Alb9ert@users.noreply.github.com> * Update web/src/shared/hooks/use-event-callback.tsx Co-authored-by: Albert <148211219+Alb9ert@users.noreply.github.com> --------- Co-authored-by: Alfred <47451379+Alfenstein8@users.noreply.github.com> Co-authored-by: Albert <148211219+Alb9ert@users.noreply.github.com>

Added translation to rest of the english words

Fix(Web): Course editor menu visuals

* start * save * fixed * fix

…ackend into dev

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 7.1.9 to 7.1.11. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v7.1.11/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-version: 7.1.11 dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…59) * Turborepo, npm scripts & docker * Docs * Update contributions docs * Forgot to add Web to compose. Fix build errors too. * Add and update docker docs. * Check Workflow fix * Experiment: Summary * Test summary as comment * Error handling * Add permissions to workflow, to post message * Update to reflect PR comment

* Fix npm not installing

* Changed notification dropdown to use shadcn popover * Changed notification toast to use the shadcn toast * Update course-editor-review.tsx * Removed toasts from notifications * Update course-editor-review.tsx * Added translations * Fixed imports --------- Co-authored-by: DandingB <daniel@Daniels-MBP-2.home> Co-authored-by: DandingB <daniel@Daniels-MacBook-Pro-2.local>

Updated the Content Creator schema and related OpenAPI and TypeScript definitions to require the lastName field. This ensures lastName is mandatory for content creator entities and improves validation consistency across the API and documentation.

* Wrote in the controller so that it can populate * update inorder to populate so we can find subscribed courses * Auto enable policies * Removing manual populate * Update documentation * Updated to return pagination on the find * Updated bootstrapi function --------- Co-authored-by: PhilipShaffer <152175307+PhilipShaffer@users.noreply.github.com> Co-authored-by: Jakob Rossander Kristensen <jakobrk@gmail.com> Co-authored-by: Jakob Rossander Kristensen <152175219+Jakobrk@users.noreply.github.com>

* removed hero-icons and react-icons * exchanged lucide icons with mdi

)

Profile picture for content creator - Upload - Replace - Delete

OliverKjaer · 2025-12-03T10:37:29Z

Co contributor: @OliverKjaer

github-actions · 2025-12-03T10:37:55Z

🔴 Code Quality Report

✅ Required Checks

All required checks passed ✓ - This PR can be merged!

📊 Codebase Quality Metrics (Advisory)

🔍 Lint & Format

Metric	Count
ESLint Errors	1952 ❌
ESLint Warnings	34 ⚠️
Files Needing Format	1 📝

🔤 Type Check

Metric	Count
TypeScript Errors	156 ❌

🧪 Tests

Metric	Count
Tests Passed	0 ✅
Tests Failed	0 ❌
Total Tests	0
Pass Rate	NaN%

🏗️ Build

Metric	Value
Build Status	failed
Build Time	19s ⏱️
Dist Size	N/A 📦

💡 Note: These metrics show the entire codebase health and won't block merging. Only changed files are required to pass checks.

📈 Track these numbers over time to see progress on technical debt!

JessicaTegner

Over all looks good. Clean changes, easy to follow. Added a few comments.

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

JessicaTegner · 2025-12-03T10:59:03Z

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

-      `http://localhost:8888/api/bucket/${formData.photo}`,
-    );
+
+  // Helper get correct image URL


why is this doing what it's doing?

Im not sure what if you mean why there is a comment or you mean the code

But i have fixed the comment to better explain it:

// Helper function to construct the full image URL from Strapi
// Handles both absolute URLs (starting with http) and relative URLs from Strapi

Please let me know if that explains it or else please reach back and i will fix it ⚡

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

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

ollioddi · 2025-12-03T18:04:50Z

Looks good @RasmusJensen1 . There is however a bunch of image components and utilities pending in #124 which would be nice to reuse in this as well.

EDIT2: Added docs Media Docs as also suggested by @HasnainAliprogramming in PR review.

EDIT: If you want to use my code, one way to do that would be for you to rebase on top of my branch, and then rebase later on dev. Then you could get access to my shared functions before the PR merges.

# Your actions:
git checkout us-0092-update-profile-picture-content-creator
git rebase web/media

# Refactor to use shared functions etc. etc..

# Commit the changes
git add .
git commit -m "Use functions from web/media branch"
git push --force-with-lease # Because we rewrite history

Then, when #124 gets merged, you simply do:

# rebase onto the updated dev:
git checkout us-0092-update-profile-picture-content-creator
git fetch origin
git rebase origin/dev
git push --force-with-lease # Because we rewrite history

Git will recognize that the commits from the web/media branch are already in dev and automatically skip them during the rebase. Then your branch should only contain the unique commits on top of dev. Hopefully.

EmilLykke

I have added some comments.
I think you should try and get your ESLint up and running. There are a lot of errors inside of your edited files:

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

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

ollioddi · 2025-12-10T19:17:40Z

I have added some comments.
I think you should try and get your ESLint up and running. There are a lot of errors inside of your edited files:

npm run lint:check:changed

RasmusJensen1 · 2025-12-11T15:41:45Z

Looks good @RasmusJensen1 . There is however a bunch of image components and utilities pending in #124 which would be nice to reuse in this as well.

EDIT2: Added docs Media Docs as also suggested by @HasnainAliprogramming in PR review.

EDIT: If you want to use my code, one way to do that would be for you to rebase on top of my branch, and then rebase later on dev. Then you could get access to my shared functions before the PR merges.
# Your actions:
git checkout us-0092-update-profile-picture-content-creator
git rebase web/media

# Refactor to use shared functions etc. etc..

# Commit the changes
git add .
git commit -m "Use functions from web/media branch"
git push --force-with-lease # Because we rewrite history
Then, when #124 gets merged, you simply do:
# rebase onto the updated dev:
git checkout us-0092-update-profile-picture-content-creator
git fetch origin
git rebase origin/dev
git push --force-with-lease # Because we rewrite history
Git will recognize that the commits from the web/media branch are already in dev and automatically skip them during the rebase. Then your branch should only contain the unique commits on top of dev. Hopefully.

I think this would make more sense to make a follow op/succesor task for due to time constraints of the merge tomorrow

I hope that is ok or else let me know ⚡

…or content creator

EmilLykke

When you have merged dev into you branch and resolved merge conflicts then I will approve

…e component - Cleaned up merge conflict markers in course-columns.tsx. - Updated useFileUpload hook to return an array of UploadedFile objects instead of UploadPostResponses. - Enhanced file upload logic to handle both single objects and arrays in useFileUpload. - Modified Profile component to use the updated useFileUpload hook. - Improved buildUpdatePayload function to validate statusValue and handle optional fields. - Added detailed logging for debugging during profile updates and file uploads. - Ensured proper error handling and user feedback for profile picture uploads.

sonarqubecloud · 2025-12-11T17:21:22Z

Quality Gate failed

Failed conditions
23.1% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

AleksandarDzambas

Looks good

ollioddi · 2025-12-11T18:04:11Z

web/eslint.config.ts

      // 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": [


Remove the rule

ollioddi · 2025-12-11T18:04:47Z

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

+
 // eslint-disable-next-line sonarjs/class-name, @typescript-eslint/naming-convention
 interface useFileUploadReturn {
-  uploadFile: (files: FileWithMetadata[]) => Promise<UploadPostResponses[200] | undefined>;


This type is driven by the openapi spec. Why define and maintain it manually?

ollioddi · 2025-12-11T18:05:35Z

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

+
+  // 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 => {


Exists in media utils

ollioddi · 2025-12-11T18:06:55Z

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

        return;
      }

+      console.log("Form data before submit:", formData);


Remove logging

ollioddi · 2025-12-11T18:07:04Z

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

      const firstName = nameParts[0] || "";
      const lastName = nameParts.slice(1).join(" ");

+      console.log("Name parts:", { firstName, lastName });


Remove logging

ollioddi · 2025-12-11T18:09:49Z

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

+      if (error instanceof Error) {
+        toast.error(`Erro ao fazer upload da foto de perfil: ${error.message}`);
+      } else {
+        toast.error("Erro ao fazer upload da foto de perfil");


Translations

ollioddi · 2025-12-11T18:09:59Z

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

+    try {
+      const documentId = localStorage.getItem("id");
+      if (!documentId) {
+        toast.error("Erro: ID do usuário não encontrado");


Translations

ollioddi · 2025-12-11T18:10:09Z

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

+      const profilePictureId = contentCreatorData?.profilePicture?.id;
+      if (!profilePictureId) {
+        if (showToast) {
+          toast.info("Nenhuma foto de perfil para deletar");


Translations

ollioddi · 2025-12-11T18:10:34Z

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

+      });
+
+      if (showToast) {
+        toast.success("Foto de perfil deletada com sucesso!");


Translations

ollioddi · 2025-12-11T18:10:47Z

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

+    } catch (error) {
+      console.error("Error deleting profile picture:", error);
+      if (showToast) {
+        toast.error("Erro ao deletar foto de perfil");


Translations

DandingB and others added 30 commits October 14, 2025 19:19

Border on select and multinput

7cda8a8

Small design adjustments

0c25712

Changed grid/list button to look like figma

19078e3

Added translation to rest of the english words

68cfb62

feat: (web) file upload to course (#29)

cf592ed

* start * save * fixed * fix

Test

d816051

DataToolBar fix

89121fd

+ more

Update course-card.tsx

8f8884a

Update course-card.tsx

8d03ea5

Merge pull request #42 from ErasmusEgalitarian/design-changes

66a2758

Design changes

Course editor menu

dc63e0b

Unchecked color

2b10a1c

Merge branch 'dev' into feat/translation

363e90e

Merge pull request #54 from ErasmusEgalitarian/feat/translation

0697d1a

Added translation to rest of the english words

Merge pull request #55 from ErasmusEgalitarian/web/editor-menu

00a36ec

Fix(Web): Course editor menu visuals

removed workflow for now

357977b

fix

f7c39a3

feat: (web) file upload to course (#29)

a77baea

* start * save * fixed * fix

Test

263cac3

removed workflow for now

3ef9304

Merge branch 'dev' of https://github.com/ErasmusEgalitarian/educado-b…

5674165

…ackend into dev

strapi 5.29 version

ffae260

Package lock

c9acad6

Add environment to build pipelines

a050999

Test build pipeline

8d9debb

Fix npm not installing (#73)

a3cc570

* Fix npm not installing

DandingB and others added 7 commits November 24, 2025 13:21

Migration of all icons to a singular library (mdi) (#100)

ff1facf

* removed hero-icons and react-icons * exchanged lucide icons with mdi

updated package lock (#126)

aa5f5ad

Added a (pre)vious slide function that was missing for some reason (#127

4639a42

)

Implented:

0bc7486

Profile picture for content creator - Upload - Replace - Delete

RasmusJensen1 requested a review from Alb9ert December 3, 2025 10:36

OliverKjaer assigned OliverKjaer and RasmusJensen1 Dec 3, 2025

JessicaTegner requested changes Dec 3, 2025

View reviewed changes

ollioddi self-requested a review December 3, 2025 12:04

EmilLykke requested changes Dec 10, 2025

View reviewed changes

web/src/features/user/components/PersonalInformation.tsx Outdated Show resolved Hide resolved

web/src/features/user/components/Profile.tsx Outdated Show resolved Hide resolved

web/src/features/user/components/Profile.tsx Show resolved Hide resolved

feat: update profile picture handling and improve payload structure f…

d035e59

…or content creator

EmilLykke reviewed Dec 11, 2025

View reviewed changes

RasmusJensen1 added 4 commits December 11, 2025 17:16

Merge branch 'dev' into us-0092-update-profile-picture-content-creator

308e910

Merge branch 'dev' into us-0092-update-profile-picture-content-creator

a79d8be

Merge branch 'dev' into us-0092-update-profile-picture-content-creator

0c94c6d

EmilLykke approved these changes Dec 11, 2025

View reviewed changes

AleksandarDzambas self-requested a review December 11, 2025 17:43

AleksandarDzambas approved these changes Dec 11, 2025

View reviewed changes

ollioddi reviewed Dec 11, 2025

View reviewed changes

OliverKjaer mentioned this pull request Dec 11, 2025

Us 0092 update profile picture content creator new #163

Merged

3 tasks

Conversation

RasmusJensen1 commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Descrption

Summary of Changes

Backend Manual Changes

schema.json

Frontend Manual Changes

Profile.tsx

PersonalInformation.tsx

Auto-Generated Files (Strapi)

Acceptence criteria

Uh oh!

OliverKjaer commented Dec 3, 2025

Uh oh!

github-actions bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔴 Code Quality Report

✅ Required Checks

📊 Codebase Quality Metrics (Advisory)

Uh oh!

JessicaTegner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ollioddi commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EmilLykke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ollioddi commented Dec 10, 2025

Uh oh!

RasmusJensen1 commented Dec 11, 2025

Uh oh!

EmilLykke left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Dec 11, 2025

Quality Gate failed

Uh oh!

AleksandarDzambas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

RasmusJensen1 commented Dec 3, 2025 •

edited

Loading

`schema.json`

`Profile.tsx`

`PersonalInformation.tsx`

github-actions bot commented Dec 3, 2025 •

edited

Loading

ollioddi commented Dec 3, 2025 •

edited

Loading