mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-07 18:38:50 +00:00
add image connection to database
This commit is contained in:
luisa.bellitto
Rudi Regentonne
parent
160ac4571c
commit
68d1d6930c
6 changed files with 67 additions and 371 deletions
|
|
@ -2,8 +2,33 @@ import ImageListItem from "@mui/material/ImageListItem";
|
|||
import { StyledEngineProvider } from "@mui/material/styles";
|
||||
import "./quiltedImageList.css";
|
||||
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 (
|
||||
<StyledEngineProvider injectFirst>
|
||||
<Box className="box">
|
||||
|
|
@ -15,8 +40,9 @@ export default function StandardImageList() {
|
|||
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
|
||||
alt={item.title}
|
||||
onClick={() =>
|
||||
console.log(item.title)
|
||||
} /* change to onClick => Feed*/
|
||||
navigate("/feed", { replace: true })
|
||||
// anchor to post that was clicked
|
||||
}
|
||||
loading="lazy"
|
||||
/>
|
||||
</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",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue