mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-07 06:08:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add image connection to database

Browse source
This commit is contained in:
luisa.bellitto 2025-06-27 13:55:08 +02:00 • committed by Rudi Regentonne
parent 160ac4571c
commit 68d1d6930c
6 changed files with 67 additions and 371 deletions
Download patch file Download diff file Expand all files Collapse all files

30
code/frontend/src/components/ChangeAvatarDialog.tsx
View file

@ -13,13 +13,12 @@ import {
} from "@mui/material"; } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import EditSquareIcon from "@mui/icons-material/EditSquare"; import EditSquareIcon from "@mui/icons-material/EditSquare";
import "../styles/colors.css";
import "../styles/fonts.css";
import "./changeAvatarDialog.css"; import "./changeAvatarDialog.css";
import ButtonRotkehlchen from "./ButtonRotkehlchen"; import ButtonRotkehlchen from "./ButtonRotkehlchen";
import { useFilePicker } from "use-file-picker"; import { useFilePicker } from "use-file-picker";
import Username from "./Username"; import Username from "./Username";
import "./username.css" import "./username.css";
import api from "../api/axios";
const BootstrapDialog = styled(Dialog)(({ theme }) => ({ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": { "& .MuiDialogContent-root": {
@ -37,6 +36,26 @@ export default function AvatarDialog({
ownAccount: boolean; ownAccount: boolean;
username: string; username: string;
}) { }) {
const [profilePicture, setProfilePicture] = React.useState<string | null>(
null
);
const saveProfilePicture = async () => {
try {
const response = await api.post("/profile/updateProfilePicture", {
profilePicture: profilePicture,
});
setProfilePicture(response.data.data.profilePicture);
console.log(
"Profile picture saved successfully:",
response.data.data.profilePicture
);
setOpen(false); // Close the dialog after saving
} catch (error) {
console.error("Error saving profile picture:", error);
}
};
const { openFilePicker, filesContent, loading, clear } = useFilePicker({ const { openFilePicker, filesContent, loading, clear } = useFilePicker({
accept: ".png, .jpg, .jpeg", accept: ".png, .jpg, .jpeg",
multiple: false, multiple: false,
@ -61,9 +80,6 @@ export default function AvatarDialog({
clear(); // Reset the selected image when closing clear(); // Reset the selected image when closing
setOpen(false); setOpen(false);
}; };
const handleSaveChanges = () => {
setOpen(false);
};
return ( return (
<React.Fragment> <React.Fragment>
@ -154,7 +170,7 @@ export default function AvatarDialog({
style="primary" style="primary"
label="Save Changes" label="Save Changes"
type="submit" type="submit"
onClick={handleSaveChanges} onClick={saveProfilePicture}
/> />
<ButtonRotkehlchen <ButtonRotkehlchen
style="secondary" style="secondary"

377
code/frontend/src/components/QuiltedImageList.tsx
View file

@ -2,8 +2,33 @@ import ImageListItem from "@mui/material/ImageListItem";
import { StyledEngineProvider } from "@mui/material/styles"; import { StyledEngineProvider } from "@mui/material/styles";
import "./quiltedImageList.css"; import "./quiltedImageList.css";
import { Box, Grid } from "@mui/material"; import { Box, Grid } from "@mui/material";
import api from "../api/axios";
import { useState } from "react";
import { UserProfile } from "../types/UserProfile";
import { useNavigate } from "react-router-dom";
export default function StandardImageList({user} : {user: UserProfile}) {
const navigate = useNavigate();
const [itemData, setData] = useState<{ img: string; title: string }[]>([]);
const fetchUserPosts = async () => {
try {
const response = await api.get(`/profile/posts/${user.username}`);
const posts = response.data.data;
const images = posts.map((post: { imageUrl: string; title: string }) => ({
img: post.imageUrl,
title: post.title,
}));
setData(images);
} catch (error) {
console.error("Error fetching user posts:", error);
}
};
fetchUserPosts().then(console.log);
export default function StandardImageList() {
return ( return (
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
<Box className="box"> <Box className="box">
@ -15,8 +40,9 @@ export default function StandardImageList() {
src={`${item.img}?w=164&h=164&fit=crop&auto=format`} src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
alt={item.title} alt={item.title}
onClick={() => onClick={() =>
console.log(item.title) navigate("/feed", { replace: true })
} /* change to onClick => Feed*/ // anchor to post that was clicked
}
loading="lazy" loading="lazy"
/> />
</ImageListItem> </ImageListItem>
@ -27,348 +53,3 @@ export default function StandardImageList() {
); );
} }
const itemData = [
{ img: "/assets/images/BirdLogin.jpg", title: "Bird" },
{ img: "../../assets/images/BirdsSky.jpg", title: "Bird Sky" },
{ img: "../../assets/images/evening.jpg", title: "Evening" },
{ img: "../../assets/images/PortraitForestAndStreet.jpg", title: "Forest" },
{ img: "../../assets/images/IceBirdLogin.jpg", title: "Ice Bird" },
{ img: "../../assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
{
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: "Breakfast",
},
{
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: "Burger",
},
{
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: "Camera",
},
{
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: "Coffee",
},
{
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: "Hats",
},
{
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: "Honey",
},
{
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: "Basketball",
},
{
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: "Fern",
},
{
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: "Mushrooms",
},
{
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: "Tomato basil",
},
{
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: "Sea star",
},
{
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: "Bike",
},
];

8
code/frontend/src/components/changeAvatarDialog.css
View file

@ -32,11 +32,10 @@
.user { .user {
display: inline-flex; display: inline-flex;
width: fit-content; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: start;
gap: 20px; gap: 20px;
padding-bottom: 1rem;
margin-top: 1rem; margin-top: 1rem;
border-radius: 1rem; border-radius: 1rem;
} }
@ -49,9 +48,8 @@
} }
.user { .user {
width: fit-content;
padding-left: 1rem; padding-left: 1rem;
padding-right: 3rem; padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
} }

13
code/frontend/src/pages/Profile.tsx
View file

@ -12,16 +12,7 @@ import api from "../api/axios";
import { useAuth } from "../api/Auth"; import { useAuth } from "../api/Auth";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { UserProfile } from "../types/UserProfile";
type UserProfile = {
id: string;
username: string;
bio: string | undefined;
profilePictureUrl: string | null;
followers: number;
following: number;
// posts: number;
}
function Profile() { function Profile() {
const { user } = useAuth(); const { user } = useAuth();
@ -88,7 +79,7 @@ const setBio = (bio: string) => {
</div> </div>
<RotkehlchenButton style="primary" label="Follow" type="button" /> <RotkehlchenButton style="primary" label="Follow" type="button" />
</div> </div>
<QuiltedImageList /> {userData && <QuiltedImageList user={userData} />}
</div> </div>
</StyledEngineProvider> </StyledEngineProvider>
); );

1
code/frontend/src/pages/profile.css
View file

@ -1,5 +1,6 @@
.profile-display { .profile-display {
padding-top: calc(var(--Header-height) + 1rem); padding-top: calc(var(--Header-height) + 1rem);
min-height: 100vh;
} }
.user-info { .user-info {

9
code/frontend/src/types/UserProfile.ts Normal file
View file

@ -0,0 +1,9 @@
export type UserProfile = {
id: string;
username: string;
bio: string | undefined;
profilePictureUrl: string | null;
followers: number;
following: number;
// posts: number;
}