diff --git a/client/src/components/DiscoverFilters.tsx b/client/src/components/DiscoverFilters.tsx
index c7c88f364..46a21461f 100644
--- a/client/src/components/DiscoverFilters.tsx
+++ b/client/src/components/DiscoverFilters.tsx
@@ -87,7 +87,7 @@ export const DiscoverFilters = ({ category, updateItemList }: { category: string
}
} else if (category === 'projects') {
// Pull Project Types and append it to full data
- response = await fetch(`/api/datasets/project-types`);
+ response = await fetch(`/api/datasets/mediums`);
const extraData = await response.json();
if (extraData.data !== undefined) {
extraData.data.forEach((projectType: Skill) => data.push({ label: projectType.label, type: 'Project Type' }));
@@ -332,7 +332,7 @@ export const DiscoverFilters = ({ category, updateItemList }: { category: string
{/* Additional filters popup */}
-
{/*
When page loads, get all necessary tag lists based on page category.
@@ -346,11 +346,7 @@ export const DiscoverFilters = ({ category, updateItemList }: { category: string
{/* Back button */}
-
= ({ project }) => {
return (
-
{category === 'projects' ? 'Project Filters' : 'People Filters'}
diff --git a/client/src/components/Endorsement.tsx b/client/src/components/Endorsement.tsx index 7feac7a52..bb4a6835b 100644 --- a/client/src/components/Endorsement.tsx +++ b/client/src/components/Endorsement.tsx @@ -1,32 +1,41 @@ -import { projects } from '../constants/fakeData'; // FIXME: use data in db -import { profiles } from '../constants/fakeData'; // FIXME: use data in db import profilePicture from '../images/blue_frog.png'; import { Tags } from './Tags'; +interface Project { + id: number; + name: string; + description?: string; + thumbnail?: string; + tags?: string[]; +} + +interface EndorsementProps { + project: Project; +} + //used on the profile page to show an endorsement -export const Endorsement = ({ endorsement, endorsedID }) => { - const user = profiles[endorsedID]; +export const Endorsement: React.FC
+
![{profiles[endorsement.endorserID].name}]({profilePicture})
);
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index cafd2c3ce..27faa0413 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -20,6 +20,7 @@ import { sendPost } from '../functions/fetch';
import { ThemeIcon } from './ThemeIcon';
import { ThemeContext } from '../contexts/ThemeContext';
import { useLocation } from 'react-router-dom'; // Hook to access the current location
+import profilePicture from '../images/blue_frog.png';
//user utils
import { getCurrentUsername } from '../api/users.ts';
@@ -117,8 +118,8 @@ export const Header = ({ dataSets, onSearch, hideSearchBar = false }) => {
{/* Notififcations not being used rn */}
{/*
+ // If implementing, use SVG sprite sheet instead of hard-coded pngs
{
src={`${API_BASE}/images/profiles/${profileImg}`}
id={'profile-img-icon'}
className={'rounded'}
+ title={'Profile picture'}
+ // Cannot use usePreloadedImage function because this is in a callback
+ onLoad={(e) => {
+ const profileImg = e.target as HTMLImageElement;
+ profileImg.src = `${API_BASE}/images/profiles/${profileImg}`;
+ }}
+ onError={(e) => {
+ const profileImg = e.target as HTMLImageElement;
+ profileImg.src = profilePicture;
+ }}
/>
) : (
-
)}
{/* These are its elements once opened (unique for logged out/in) */}
@@ -158,11 +166,7 @@ export const Header = ({ dataSets, onSearch, hideSearchBar = false }) => {
{/* (Blank) Profile Icon */}
(null);
@@ -38,31 +51,33 @@ export const ImageUploader = ({
return () => input.removeEventListener('change', handleImgChange);
}, [keepImage, onFileSelected]);
- return (
-
- "{endorsement.endorsement}" -
-- From {profiles[endorsement.endorserID].name} for work on{' '} - {projects[endorsement.endorseProjectID].name} + {project.name}
- {/*the skills the user is being endorsed for*/} -
- {endorsement.skills.map((skill) => (
- {user.skills[skill].skill}
- ))}
-
+ {project.description && {project.description}
} + {project.tags && project.tags.length > 0 && ( + + )} {
src={`${API_BASE}/images/profiles/${profileImg}`}
id={'profile-img-icon'}
className={'rounded'}
+ title={'Profile picture'}
+ // Cannot use usePreloadedImage function because this is in a callback
+ onLoad={(e) => {
+ const profileImg = e.target as HTMLImageElement;
+ profileImg.src = `${API_BASE}/images/profiles/${profileImg}`;
+ }}
+ onError={(e) => {
+ const profileImg = e.target as HTMLImageElement;
+ profileImg.src = profilePicture;
+ }}
/>
) : (
-
{dataList.map((image, index) => {
@@ -148,11 +157,7 @@ export const ImageCarousel = ({
onClick={() => handleIndexChange(currentIndex + 1)}
id="project-image-carousel-right"
>
-
@@ -172,11 +177,7 @@ export const ImageCarousel = ({
onClick={() => handleIndexChange(currentIndex - 1)}
id="discover-carousel-left"
>
-
Learn More
-
diff --git a/client/src/components/ImageCarouselNew.tsx b/client/src/components/ImageCarouselNew.tsx
index 2536b9eac..dea32b774 100644
--- a/client/src/components/ImageCarouselNew.tsx
+++ b/client/src/components/ImageCarouselNew.tsx
@@ -33,11 +33,7 @@ export const CarouselButton = ({
className={`${className} carousel-btn-${direction}`}
onClick={() => handleIndexChange(currentIndex + directionNum)}
>
-