Skip to content

Commit

Permalink
Merge pull request #113 from alexb02h/main
Browse files Browse the repository at this point in the history
This is the one
  • Loading branch information
akleinecke authored Dec 16, 2024
2 parents c93950a + 3e42743 commit d9405ba
Show file tree
Hide file tree
Showing 12 changed files with 268 additions and 109 deletions.
2 changes: 1 addition & 1 deletion frontend/src/Components/Feed/feed-input-box.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const FeedInputBox: React.FC<FeedInputBoxProps> = ( { onPostSubmit } ) => {
const [isFocused, setIsFocused] = useState(false);

const { fetchUID } = GetLocalUserID()
const [userInfo, setUserInfo] = useState<User | null>(null)
const [userInfo, setUserInfo] = useState<{user: User | null; location:string | null}>({user:null,location:null})
const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/Components/Universal/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import SearchBar from "../Search/Searchbar";
import SCLogo from "../Images/SoundCircle.gif"
import UserIcon from "../Images/UserIconTemp.png";
import { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { Link, useAsyncError, useLocation } from "react-router-dom";
import NavigationButton from "../Universal/NavigationButton";
import { useDispatch, useSelector } from "react-redux";
import { logoutUser, setUser, setUserImage, setUsername } from "../../Redux_Store/actions";
Expand Down Expand Up @@ -41,9 +41,9 @@ const Header = () => {
// Step 2: Fetch user information using the ID
const user = await FetchUserInfo(user_id)
// Set our local redux info
if (user) {
dispatch(setUser(user.id))
dispatch(setUsername(user.username))
if (user && user.user) {
dispatch(setUser(user.user.id))
dispatch(setUsername(user.user.username))
// dispatch(setUserImage(user.image))
}
} catch (error) {
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/Components/UserPage/DescriptionBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ const DescriptionBox: React.FC = () => {
}, []);

return (
<div className="w-7/10 h-[60px] max-w-xs top-[-570px] left-[-5px] relative ">
<div className="relative w-full max-w-md mx-auto p-4 bg-white shadow-md rounded-md" style={{opacity: 0.4}}>
<textarea
className="w-full p-2 max-w-xs text-sm border border-gray-300 rounded-md bg-white resize-none min-h-[200px] overflow-hidden opacity-55"
className="w-full p-2 text-sm border border-gray-300 rounded-md bg-white resize-none min-h-[200px] overflow-hidden "
value={description}
onChange={handleInputChange}
rows={1} // Start with 1 row
style={{ height: 'auto' }} // Allow auto height adjustment
style={{ height: 'auto'}} // Allow auto height adjustment
onInput={(e) => {
e.currentTarget.style.height = 'auto'; // Reset height
e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`; // Set height to scrollHeight
Expand All @@ -40,9 +40,9 @@ const DescriptionBox: React.FC = () => {
readOnly={!isEditing} // Disable editing if not in editing mode
/>
{isUserLoggedIn && (
<div className="action-container">
<button onClick={isEditing ? handleSave:handleEdit} className="Action">
<img src={EditIcon} alt="Edit Icon" className="bg-gray-700 w-[50px] h-[50px]"/>
<div className="absolute top-[-45px] right-2">
<button onClick={isEditing ? handleSave:handleEdit} className="bg-gray-700 p-2">
<img src={EditIcon} alt="Edit Icon" className="w-[25px] h-[25px] top-[10px]"/>
</button>
</div>
)}
Expand Down
100 changes: 95 additions & 5 deletions frontend/src/Components/UserPage/UserAlbumsBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,96 @@ interface Album {
userScore: number;
description: string;
}
function AlbumsBox2(){
// Dummy data for now
const dummyAlbums: Album[] = [
{ id: 1, name: 'Views', artist: 'Drake',imageUrl: `${process.env.REACT_APP_PLACEHOLDER_ALBUM}+1` ,userScore: 1, description:"Album was mid, kanye is still the goat"},
{ id: 2, name: 'folklore', artist: 'Taylor Swift',imageUrl: `${process.env.REACT_APP_PLACEHOLDER_ALBUM}+2` ,userScore: 2, description:"Definetly not recommended for any heavy metal fans, taylor swift has lost her way"},
{ id: 3, name: 'BBL Drizzy', artist: 'overthxnk',imageUrl: `${process.env.REACT_APP_PLACEHOLDER_ALBUM}+3` ,userScore: 3, description: "BBL DRIZZY, BBLLLLL DRIZAAAAAAAA, BBL DRIZZY"},
{ id: 4, name: 'GNX', artist: 'Kendrick Lamar',imageUrl: `${process.env.REACT_APP_PLACEHOLDER_ALBUM}+4` ,userScore: 4, description: "While i was listening to this I truly felt like i needed to turn the tv off, and go to the grocery store and grab some mustard"},
{ id: 5, name: 'Vultues 1', artist: 'Kanye West',imageUrl: `${process.env.REACT_APP_PLACEHOLDER_ALBUM}+5` ,userScore: 2, description: "Vultures 1 > Graduation"},
{ id: 6, name: 'Certified Lover Boy', artist: 'Drake', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_ALBUM}+6`,userScore: 5, description: "Drake is mid"},
] ;

// Setting albums to use the dummy data
const [albums, setAlbums] = useState<Album[]>(dummyAlbums);

// This is the actual line to use once the API is set up
// const [albums, setAlbums] = useState<Album[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchAlbums = async () => {
try {
setLoading(true);
const response = await fetch("HTTP ENDPOINT");
if (!response.ok) {
throw new Error('HTTP Error: Status ${response.status}');
}
const data = await response.json();
setAlbums(data);
} catch (error : any) {
setError(error.message);
setAlbums([]);
console.log("Failure to fetch albums", error);
} finally {
setLoading(false);
}
}
// Commenting this out until API is set up
// fetchAlbums();
},[]);


const getRating = (rating: number) =>{
const ratingMap : {[key:string]: string}= {
"1": oneStar,
"2": twoStar,
"3": threeStar,
"4": fourStar,
"5": fiveStar,
"0": zeroStar
};
return (
<img
src={ratingMap[rating]}
alt={`${rating} out of 5 stars`}
className="inline-block w-[120px] h-[20px] mt-2"
/>
);
};

//if(loading) return <p className="text-gray-300">Loading albums...</p>
if(error) return <p className="text-red-500"> Error:{error}</p>
return (
<div className="relative w-full max-w-[1350px] mx-auto p-2 bg-gray-900 rounded-lg overflow-hidden mt-[-90px] min-h-screen" style={{marginLeft:"-130px"}}>
{/* Simple title */}
<h2 className="text-white text-lg font-medium mb-2"> Albums </h2>
<div className="flex flex-wrap justify-start gap-4">
{albums.map((album) => (
<div
key={album.id}
className="flex flex-col items-center bg-gray-800 p-4 w-[250px]"
>
<div className="flex flex-col justify-center item-start mt-0">
<p className= " text-gray-300 text-lg mt-2">{album.name}</p>
<img
src={album.imageUrl}
alt={album.name}
className="w-[200px] h-[225px] object-cover"
/>
<p className= " text-gray-300 text-sm]">{album.artist}</p>
<p className= " text-gray-300 text-sm mt-2">{album.userScore} / 5 {getRating(album.userScore)}</p>
<p className= " text-gray-300 text-sm mt-2">{album.description}</p>
</div>
</div>
))}
</div>
</div>

);
}

function AlbumsBox() {
// Dummy data for now
Expand Down Expand Up @@ -83,15 +173,15 @@ function AlbumsBox() {
<img
src={ratingMap[rating]}
alt={`${rating} out of 5 stars`}
className="inline-block relative top-[-40px] w-150 h-20"
className="inline-block w-[120px] h-[20px] mt-2"
/>
);
};

//if(loading) return <p className="text-gray-300">Loading albums...</p>
if(error) return <p className="text-red-500"> Error:{error}</p>
return (
<div className="relative w-[1000px] mx-auto p-2 bg-gray-900 rounded-lg overflow-hidden absolute left-[-400px] top-[-20px]">
<div className="relative w-full max-w-[1000px] mx-auto p-2 bg-gray-900 rounded-lg overflow-hidden mt-[-90px]" style={{marginLeft:"-130px"}}>
{/* Simple title */}
<h2 className="text-white text-lg font-medium mb-2"> Albums </h2>

Expand Down Expand Up @@ -124,11 +214,11 @@ function AlbumsBox() {
transition: 'transform 0.5s ease',
}}
>
<div className="flex flex-col width-[10px] height-[10px] relative">
<div className="flex flex-col justify-center item-start mt-20">
<img
src={album.imageUrl}
alt={album.name}
className="w-[200px] h-[200px] left-[40px] object-cover absolute"
className="w-[200px] h-[225px] left-[40px] object-cover absolute"
/>
<p className= "absolute top-[200px] left-[110px] text-gray-300 text-sm">{album.name}</p>
<p className= "absolute top-[0px] left-[300px] text-gray-300 w-[100px]">{album.artist}</p>
Expand All @@ -151,4 +241,4 @@ function AlbumsBox() {
);
}

export default AlbumsBox;
export {AlbumsBox,AlbumsBox2};
6 changes: 3 additions & 3 deletions frontend/src/Components/UserPage/UserArtistBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@ function ArtistsBox() {
};

return (
<div className="absolute w-[950px] h-[350px] mx-auto p-2 bg-gray-900 rounded-lg overflow-hidden left-[-400px] top-[250px]">
<div className="relative w-full max-w-[950px] h-[350px] mx-auto p-4 bg-gray-900 rounded-lg overflow-hidden" style={{marginLeft:"-130px"}}>
{/* Simple title */}
<h2 className="text-white text-lg font-medium mb-2"> Favorite Artists </h2>
<div className="relative flex items-center">
{/* Previous Arrow */}
<button
onClick={handlePrev}
className="left-0 z-10 p-1 text-white rounded-full shadow hover:bg-gray-600 active:bg-gray-400 transition duration-100">
className="left-0 z-10 p-1 text-white shadow hover:bg-gray-600 active:bg-gray-400 transition duration-100">
&#60;
</button>

Expand Down Expand Up @@ -99,7 +99,7 @@ function ArtistsBox() {
{/* Next Arrow */}
<button
onClick={handleNext}
className="right-0 z-10 p-1 text-white rounded-full hover:bg-gray-600 active:bg-blue-400 transition duration-100 absolute left-[886px]">
className="right-0 z-10 p-1 text-white hover:bg-gray-600 active:bg-blue-400 transition duration-100">
&#62;
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/Components/UserPage/UserEventsBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function UserEventsBox() {
};

return (
<div className="absolute top-[450px] left-[-400px] w-[925px] h-[500px]">
<div className="relative w-full max-w-[950px] mx-auto h-[500px] bg-gray-900 p-1" style={{marginTop:'-120px', marginLeft:"-120px"}}>
{/* Simple title */}
<h2 className="text-white text-lg font-medium mb-2"> Interested Events </h2>
<div className="relative flex items-center">
Expand Down
60 changes: 25 additions & 35 deletions frontend/src/Components/UserPage/UserFollowingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,22 @@ interface Person {
imageUrl: string;
}

const dummyPeople: Person[] = [
{ id: 1, name: 'Person 1', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+1` },
{ id: 2, name: 'Person 2', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+2` },
{ id: 3, name: 'Person 3', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+3` },
{ id: 4, name: 'Person 4', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+4` },
{ id: 5, name: 'Person 5', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+5` },
{ id: 6, name: 'Person 6', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+6` },
];

function UserFollowingPage() {
// Dummy data for now
const dummyPeople: Person[] = [
{ id: 1, name: 'Person 1', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+1` },
{ id: 2, name: 'Person 2', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+2` },
{ id: 3, name: 'Person 3', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+3` },
{ id: 4, name: 'Person 4', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+4` },
{ id: 5, name: 'Person 5', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+5` },
{ id: 6, name: 'Person 6', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+6` },
];

// Setting people to use the dummy data
// const [people, setPeople] = useState<Person[]>(dummyPeople);

// This is the actual line to use once the API is set up
const [people, setPeople] = useState<Person[]>([]);

const [people, setPeople] = useState<Person[]>(dummyPeople);
const [currentIndex, setCurrentIndex] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
Expand All @@ -39,15 +38,14 @@ function UserFollowingPage() {
setPeople(data);
} catch (error : any) {
setError(error.message);
setPeople([]);
console.log("Failure to fetch people", error);
setPeople([])
} finally {
setLoading(false);
}
}
// Commenting this out until API is set up
// fetchPeople();
});
//fetchPeople();
},[]);


// Runs when next arrow is clicked
Expand All @@ -62,33 +60,34 @@ function UserFollowingPage() {
);
};


return (
<div className="relative w-[400px] left-[-300px] p-2 bg-gray-900 shadow-md overflow-hidden top-[150px]">
<div className="relative w-full max-w-lg p-4 bg-gray-900 overflow-hidden mt-16 mx-auto">
{/* Simple title */}
<h2 className="text-white text-lg font-medium mb-2"> Following </h2>
<div className="relative flex items-center">
{/* Previous Arrow */}
<button
onClick={handlePrev}
className="left-0 z-10 p-1 text-white rounded-full hover:bg-gray-600 transition duration-100">
className="p-2 text-white rounded-full hover:bg-gray-600 transition duration-100 absolute left-0 z-10">
&#60;
</button>

<div className="overflow-hidden w-full">
<div className="overflow-hidden w-full relative left-[20px]">
{/* Person Display */}
<div
className="whitespace-nowrap transition-transform duration-500"
style={{ transform: `translateX(-${(currentIndex / 3) * 100}%)` }}
>
{people.map((person) => (
<div key={person.id} className=" w-1/3 px-2 relative left-[45px]">
<div key={person.id} className=" w-1/3 px-2 ml-10">
<div className="flex flex-col items-center justify-center">
<img
src={person.imageUrl}
alt={person.name}
className="w-[400px] h-[100px] object-cover rounded-full"
className="w-full h-full object-cover rounded-full ml-5"
/>
<p className= "mt-1 text-gray-300 text-sm">{person.name}</p>
<p className= "mt-0 text-gray-300 text-sm">{person.name}</p>
</div>
</div>
))}
Expand All @@ -98,7 +97,7 @@ function UserFollowingPage() {
{/* Next Arrow */}
<button
onClick={handleNext}
className="relative left-[-150px] z-10 p-1 text-white shadow hover:bg-gray-600 transition duration-100">
className="p-2 text-white shadow hover:bg-gray-600 transition duration-100 absolute right-[160px] z-10">
&#62;
</button>
</div>
Expand All @@ -107,15 +106,6 @@ function UserFollowingPage() {
}

function UserFollowerPage() {
// Dummy data for now
const dummyPeople: Person[] = [
{ id: 1, name: 'Person 1', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+1` },
{ id: 2, name: 'Person 2', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+2` },
{ id: 3, name: 'Person 3', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+3` },
{ id: 4, name: 'Person 4', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+4` },
{ id: 5, name: 'Person 5', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+5` },
{ id: 6, name: 'Person 6', imageUrl: `${process.env.REACT_APP_PLACEHOLDER_USER}+6` },
];

// Setting people to use the dummy data
const [people, setPeople] = useState<Person[]>(dummyPeople);
Expand Down Expand Up @@ -147,7 +137,7 @@ function UserFollowerPage() {
}
// Commenting this out until API is set up
// fetchPeople();
});
},[]);


// Runs when next arrow is clicked
Expand All @@ -163,7 +153,7 @@ function UserFollowerPage() {
};

return (
<div className="relative w-[400px] left-[140px] p-2 bg-gray-900 rounded-lg shadow-md overflow-hidden top-[-647px]">
<div className="relative w-full max-w-lg p-4 bg-gray-900 overflow-hidden mt-16 mx-auto">
{/* Simple title */}
<h2 className="text-white text-lg font-medium mb-2"> Followers </h2>
<div className="relative flex items-center">
Expand All @@ -186,7 +176,7 @@ function UserFollowerPage() {
<img
src={person.imageUrl}
alt={person.name}
className="w-full h-full object-cover rounded-full"
className="w-full h-full object-cover rounded-full ml-10"
/>
<p className= "mt-1 text-gray-300 text-sm">{person.name}</p>
</div>
Expand All @@ -198,7 +188,7 @@ function UserFollowerPage() {
{/* Next Arrow */}
<button
onClick={handleNext}
className="relative left-[-170px] p-1 text-white shadow hover:bg-gray-600 transition duration-100">
className="p-[190px] text-white shadow hover:bg-gray-600 transition duration-100 absolute right-0 z-10">
&#62;
</button>
</div>
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/Components/UserPage/UserGroupsBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,7 @@ function UserGroupBox() {
};

return (
<div className="absolute w-[950px] p-2 bg-gray-900 rounded-lg overflow-hidden left-[-400px] top-[675px]">
{/* Simple title */}
<div className="relative w-full max-w-[950px] mx-auto h-[500px] bg-gray-900 p-1" style={{marginTop: '-260px', marginLeft: '-120px'}}>
<h2 className="text-white text-lg font-medium mb-2"> Groups </h2>
<div className="relative flex items-center">
{/* Previous Arrow */}
Expand Down
Loading

0 comments on commit d9405ba

Please sign in to comment.