- {/* Profile picture and username div here */}
-
-
-
{
- e.stopPropagation();
- setAnchorEl(e.currentTarget)}}>
-
-
-
+
(null)} className="w-full flex gap-2">
+
+
+
+
+
+
+
+
+
+ {data.isVisualPost && data.challengedPostId !== null ?
+
+
+
: null
+ }
+
+
+ {
+ e.stopPropagation();
+ setAnchorEl(e.currentTarget)}}>
+
+
+
+
+
+
+ {modelAppearence ?
+
+
-
-
- {modelAppearence ?
-
-
-
- :
-
event.stopPropagation() } className={`flex justify-center items-center non-clickable-div ${styles.previewContainer}`} style={{backgroundImage: "url(/previewmodel.jpg)"}} >
-
+ :
+
event.stopPropagation() } className={`flex justify-center items-center non-clickable-div ${styles.previewContainer}`} style={{backgroundImage: "url(/previewmodel.jpg)"}} >
+
+
+ }
+
{data.title}
+ {
+ annotationsVisible ?
+
+ :
+ (null)}>{data.text}
+ }
- }
-
{data.title}
-
{data.body}
-
-
+
-
-
{formatInteractions(data.likeCount)}
+
+
{formatInteractions(data.likes)}
+
+
+
+
{formatInteractions(data.dislikes)}
+
+
+
+
{data.comments}
+
+
+
+ {setAnnotationsVisible(e); setCurrentAnnotations([])}} checkedChildren="Annotations Visible" unCheckedChildren="Annotations Disabled"/>
+
-
-
-
{formatInteractions(data.dislikeCount)}
+
+ setComment(e.target.value)} className='w-full border border-gray-300 rounded-lg p-2'/>
+
-
-
-
{1453 /*comment sayısı buraya gelecek */}
+
+ {comments.map((item, index) => (
+
+ )) }
-
-
-
- setComment(e.target.value)} className='w-full border border-gray-300 rounded-lg p-2'/>
-
-
-
- {comments.map((item, index) => (
- item.postId === data.id ?
-
- :
- null
- )) }
+
+ {annotationsVisible && currentAnnotations.length != 0 &&
+
+
+
Annotations
+
+
+
+ {currentAnnotations.map((item, index) => (
+
+
{item.username}
+
Annotated text: "{item.annotatedText}"
+
{item.annotation}
+
+ ))}
+
+
}
+
)
}
diff --git a/3Design/frontend/src/components/GenericFeed/GenericFeed.tsx b/3Design/frontend/src/components/GenericFeed/GenericFeed.tsx
index 5c7973f9..09badf30 100644
--- a/3Design/frontend/src/components/GenericFeed/GenericFeed.tsx
+++ b/3Design/frontend/src/components/GenericFeed/GenericFeed.tsx
@@ -4,6 +4,7 @@ import GalleryPost from '../GalleryPost/Clickable/GalleryPost';
import { Skeleton } from 'antd';
import DiscussionPost from '../DiscussionPost/Clickable/DiscussionPost';
import styles from "./GenericFeed.module.css";
+import axios from 'axios';
interface Props{
pageNumber: number
}
@@ -17,13 +18,20 @@ const GenericFeed = ({pageNumber}:Props) => {
}, [])
const fetchPostData = async () => {
- // AJAX Request
-
- const data = require("../../resources/json-files/MockGenericPosts.json");
- setPostData(data.slice(2*(pageNumber-1), 2*pageNumber));
- setFeedLoading(false);
-
- }
+ try{
+ const postRes = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/posts/feed`,
+ {headers: {
+ Authorization: `Bearer ${localStorage.getItem("jwt_token")}`
+ }}
+ );
+ setPostData(postRes.data);
+ }
+ catch(e){
+ }
+ finally{
+ setFeedLoading(false);
+ }
+ }
return (
@@ -39,12 +47,16 @@ const GenericFeed = ({pageNumber}:Props) => {
) :
- postData.map((item, index) => (
- item.visual ?
-
- :
-
- ))
+ postData.length == 0 ?
+ Follow categories or users to get recommended posts.
+ :
+ (postData.map((item, index) => (
+ item.isVisualPost ?
+
+ :
+
+ ))
+ )
}
diff --git a/3Design/frontend/src/components/Login/LoginPage.tsx b/3Design/frontend/src/components/Login/LoginPage.tsx
index dd68f6e1..7976d8f3 100644
--- a/3Design/frontend/src/components/Login/LoginPage.tsx
+++ b/3Design/frontend/src/components/Login/LoginPage.tsx
@@ -51,7 +51,8 @@ const Login = () => {
try{
//AJAX POST Request
const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/v1/auth/authenticate`,{email:email,password:password});
- localStorage.setItem("username",`${response.data.firstName} ${response.data.lastName}`);
+ console.log(response.data);
+ localStorage.setItem("username",`${response.data.userName}`);
localStorage.setItem("user_id",response.data.userId);
localStorage.setItem("jwt_token",response.data.accessToken);
window.location.href = "/home";
diff --git a/3Design/frontend/src/components/PageHeader/PageHeader.tsx b/3Design/frontend/src/components/PageHeader/PageHeader.tsx
index a69dddd5..a42da523 100644
--- a/3Design/frontend/src/components/PageHeader/PageHeader.tsx
+++ b/3Design/frontend/src/components/PageHeader/PageHeader.tsx
@@ -1,18 +1,21 @@
import { Logout, Person } from '@mui/icons-material'
import React, { useEffect, useRef, useState } from 'react'
import styles from "./PageHeader.module.css";
-import { Avatar, Dialog } from '@mui/material';
-import { CustomProfile } from '../interfaces';
+import { Avatar, CircularProgress, Dialog, TextField } from '@mui/material';
+import { CustomUser } from '../interfaces';
import Search from 'antd/es/input/Search';
+import { message } from 'antd';
+import axios from 'axios';
const PageHeader = () => {
const [profileDialog, setProfileDialog] = useState(false);
- const [profileInfo, setProfileInfo] = useState
({profilePhoto: "", tournamentPoints: "", username: ""});
+ const [profileInfo, setProfileInfo] = useState(null);
+ const [changePasswordConfig, setChangePasswordConfig] = useState({dialog: false, newPassword: "", sending:false})
const imageRef = useRef(null);
useEffect(() => {
+ fetchProfileInfo();
//Get profile info with an AJAX request.
- setProfileInfo({profilePhoto: "/logo192.png", tournamentPoints: "1500", username: "User62"})
}, [])
const logout=() => {
@@ -21,6 +24,82 @@ const PageHeader = () => {
localStorage.removeItem("username");
window.location.href = "/login";
}
+
+ const validatePassword = () => {
+ if (!changePasswordConfig.newPassword){
+ return "New password is required.";
+ }
+ if (changePasswordConfig.newPassword.length < 6){
+ return "The password has to be at least 6 characters.";
+ }
+ if (!(/[A-Z]/.test(changePasswordConfig.newPassword)) || !(/[a-z]/.test(changePasswordConfig.newPassword)) || !(/\d/.test(changePasswordConfig.newPassword))){
+ return "The password has to have at least 1 uppercase, 1 lowercase and 1 number.";
+ }
+ return "";
+ }
+
+ const fetchProfileInfo = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/users/${localStorage.getItem("user_id")}`, {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ });
+ setProfileInfo(res.data);
+ }catch(e){
+ message.error("Couldn't fetch user information. The site might not work as intended.")
+ }
+ }
+
+ const changeProfilePicture = async (e:React.ChangeEvent) => {
+ if (!e.target.files || !e.target.files[0]){
+ return;
+ }
+ const fileExtension = e.target.files[0].name.split(".").pop();
+ if (fileExtension != "png" && fileExtension != "jpg" && fileExtension != "jpeg"){
+ e.target.files = null;
+ message.error("Only png, jpg and jpeg extensions are allowed.");
+ return;
+ }
+ setProfileInfo(null);
+ try{
+ const fd = new FormData();
+ fd.append("file", e.target.files[0]);
+ await axios.post(`${process.env.REACT_APP_API_URL}/api/v1/users/profile-picture/upload`,
+ fd,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ });
+ message.success("Profile photo successfully changed.");
+ await fetchProfileInfo();
+ }
+ catch(e){
+ message.error("Unable to change the profile photo.");
+ await fetchProfileInfo();
+ }
+
+ }
+
+ const changePassword = async () => {
+ const passwordValid = validatePassword();
+ if (!!passwordValid){
+ message.error(passwordValid);
+ return;
+ }
+ try{
+ setChangePasswordConfig(prev => ({...prev, sending: true}));
+ await axios.put(`${process.env.REACT_APP_API_URL}/api/v1/users/${localStorage.getItem("user_id")}/change-password`,
+ null,
+ {headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`},
+ params: {password : changePasswordConfig.newPassword}
+ }
+ );
+
+ message.success("Password successfully changed.");
+ setChangePasswordConfig({dialog: false, newPassword: "", sending: false});
+ }catch(e){
+ message.error("Something went wrong.");
+ setChangePasswordConfig(prev => ({...prev, sending: false}));
+ }
+ }
return (
@@ -32,7 +111,13 @@ const PageHeader = () => {
size='large'
style={{width: "80%"}}
placeholder='Search...'
- onSearch={(val) => window.location.href = `/search/${val}`}
+ onSearch={(val) => {
+ if (!val){
+ return;
+ }
+ window.location.href = `/search/${val}`
+ }
+ }
/>
@@ -46,23 +131,40 @@ const PageHeader = () => {
+
diff --git a/3Design/frontend/src/components/PostPage/PostPage.module.css b/3Design/frontend/src/components/PostPage/PostPage.module.css
index 40b1ebff..f9c230bd 100644
--- a/3Design/frontend/src/components/PostPage/PostPage.module.css
+++ b/3Design/frontend/src/components/PostPage/PostPage.module.css
@@ -1,5 +1,5 @@
.mainContainer{
- width: 60%;
+ width: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
diff --git a/3Design/frontend/src/components/PostPage/PostPage.tsx b/3Design/frontend/src/components/PostPage/PostPage.tsx
index 5e55b361..e52bfb0e 100644
--- a/3Design/frontend/src/components/PostPage/PostPage.tsx
+++ b/3Design/frontend/src/components/PostPage/PostPage.tsx
@@ -8,37 +8,62 @@ import DiscussionPost from "../DiscussionPost/Page/DiscussionPost";
import SideBar from "../SideBar/SideBar";
import PageHeader from "../PageHeader/PageHeader";
import styles from "./PostPage.module.css"
+import { Skeleton } from "antd";
+import axios from "axios";
const PostPage = () => {
const { id } = useParams();
const [postData, setPostData] = useState
(null);
+ const [publishedAnnotations, setPublishedAnnotations] = useState([]);
useEffect(() => {
- setPostData(getPostFromId(id));
+ fetchPostData();
}, []);
+ const fetchPostData = async () =>{
+ try{
+ const postRes = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/posts/new/${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ const annotationRes = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/annotations/get?postId=${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ setPublishedAnnotations(annotationRes.data);
+ setPostData(postRes.data);
+ }
+ catch(e){
+ setPublishedAnnotations(require("../../resources/json-files/MockAnnotations.json"));
+ setPostData(getPostFromId(id));
+ }
+ }
if (!id){
return 404
;
}
- if(!postData){
- return Loading
;
- }
-
return (
<>
- {postData.visual ?
+ {
+ postData ?
+ (postData.isVisualPost ?
-
- :
-
+
+ :
+
+ )
+ :
+
}
+
diff --git a/3Design/frontend/src/components/ProfilePage/ProfilePage.module.css b/3Design/frontend/src/components/ProfilePage/ProfilePage.module.css
new file mode 100644
index 00000000..697b2f79
--- /dev/null
+++ b/3Design/frontend/src/components/ProfilePage/ProfilePage.module.css
@@ -0,0 +1,96 @@
+/* Main container */
+.mainContainer{
+ width: 70%;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+}
+
+.postContainer{
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ height: 740px;
+ overflow-y: scroll;
+}
+
+
+
+
+
+.profileHeaderButtonsContainer{
+ width: 100%; /* Adjust as needed */
+ height: 40%; /* Same as width for a square */
+ padding: 1px;
+ border: 1px solid black; /* Define the border style */
+ border-radius: 0; /* This ensures it stays as a rectangle (default) */
+ flex-direction: row;
+}
+
+.scrollableList{
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 10px;
+ height: 400px;
+ overflow-y: scroll;
+}
+
+.profileHeaderDetailsAvatar {
+ width: 100px; /* Adjust as needed */
+ height: 100px; /* Same as width for a square */
+ padding: 1px;
+ object-fit: cover; /* Crop and fill */
+ border-radius: 50%; /* Circular shape */
+}
+.profileHeaderButtonsFollowButton {
+ padding: 3px;
+ width: 150px;
+ height: 40px;
+ background-color: #383434;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ transition: background-color 0.3s ease;
+}
+.profileHeaderButtonsFollowButton:hover {
+ background-color: #181414;
+}
+.profileHeaderButtonsFollowingButton {
+ margin-top: 3px;
+ width: 150px;
+ height: 40px;
+ background-color: #383434;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ transition: background-color 0.3s ease;
+}
+.profileHeaderButtonsFollowingButton:hover {
+ background-color: #181414;
+}
+.profileHeaderButtonsFollowersButton {
+ margin-top: 3px;
+ width: 150px;
+ height: 40px;
+ background-color: #383434;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ transition: background-color 0.3s ease;
+}
+.profileHeaderButtonsFollowersButton:hover {
+ background-color: #181414;
+}
+
+/* Dialog Parent Containers */
+
+/* Dialog Sub Containers */
+
+/* Dialog Elements */
\ No newline at end of file
diff --git a/3Design/frontend/src/components/ProfilePage/ProfilePage.tsx b/3Design/frontend/src/components/ProfilePage/ProfilePage.tsx
new file mode 100644
index 00000000..9552305f
--- /dev/null
+++ b/3Design/frontend/src/components/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,449 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useState } from "react";
+import SideBar from "../SideBar/SideBar";
+import PageHeader from "../PageHeader/PageHeader";
+import styles from "./ProfilePage.module.css"
+import { Achievement, CustomUser, DPost } from '../interfaces'
+import { CircularProgress, Dialog, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Paper } from "@mui/material";
+import ProfileDisplayer from "./ProfilePageDialogDisplayer/ProfilePageDialogDisplayer"
+import axios, { AxiosError } from "axios";
+import { message, Skeleton } from "antd";
+import GalleryPost from "../GalleryPost/Clickable/GalleryPost";
+import DiscussionPost from "../DiscussionPost/Clickable/DiscussionPost";
+import StarsIcon from '@mui/icons-material/Stars';
+
+const ProfilePage = () => {
+
+ const { id } = useParams();
+ const [profile, setProfile] = useState(null);
+ const [profileLoading, setProfileLoading] = useState(true);
+ const [isCurrentUserProfile, setIsCurrentUserProfile] = useState(false);
+ const [activeTab, setActiveTab] = useState(0);
+
+ const [followingDialog, setFollowingDialog] = useState(false);
+ const [followersDialog, setFollowersDialog] = useState(false);
+
+ const [followerProfilesList, setFollowerProfilesList] = useState([]); // Store the list of profiles
+ const [followingProfilesList, setFollowingProfilesList] = useState([]); // Store the list of profiles
+
+ const [displayedPosts, setDisplayedPosts] = useState(null);
+
+ const [currentlyFollowing, setCurrentlyFollowing] = useState(null);
+
+ const [achievements, setAchievements] = useState(null);
+ const [achievementDialog, setAchievementDialog] = useState(false);
+
+ const currentUserId = localStorage.getItem("user_id");
+
+ const fetchPosts = async () => {
+ setDisplayedPosts(null);
+ if (activeTab == 0){
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/posts/user/${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ setDisplayedPosts(res.data);
+ }
+ catch(e){
+ setDisplayedPosts([]);
+ }
+ }
+ else if(activeTab == 1){
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/posts/user/${id}/reacted`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ setDisplayedPosts(res.data);
+ }
+ catch(e){
+ setDisplayedPosts([]);
+ }
+ }
+ else{
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/posts/user/${id}/bookmarked`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ setDisplayedPosts(res.data);
+ }
+ catch(e){
+ setDisplayedPosts([]);
+ }
+ }
+
+ }
+
+
+ const getProfileInfo = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/users/${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ setProfile(res.data);
+ }
+ catch(e){
+
+ }
+ finally{
+ setProfileLoading(false);
+ }
+ }
+
+
+ const getFollowerUserIds = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/users/followers/${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ const idList : number[] = res.data;
+ setFollowerProfilesList(idList);
+ let checked = false;
+ for (let cid of idList){
+ if (cid == parseInt(currentUserId ?? "-1")){
+ setCurrentlyFollowing(true);
+ return;
+ }
+ }
+ setCurrentlyFollowing(false);
+
+ }
+ catch(e){
+ if (e instanceof AxiosError && e.status == 404){
+ setCurrentlyFollowing(false);
+ }
+ }
+
+ };
+
+ const getFollowingUserIds = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/users/following/${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
+ }
+ );
+ setFollowingProfilesList(res.data);
+ }
+ catch(e){
+
+ }
+
+ };
+
+
+
+ const handleFollowLogic = async(x:boolean) => {
+ setCurrentlyFollowing(null);
+ if (x){
+ try{
+ await axios.post(`${process.env.REACT_APP_API_URL}/api/v1/users/follow`,
+ null,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`},
+ params: {followedUserId: id}
+ }
+ );
+ setCurrentlyFollowing(true);
+ }
+ catch(e){
+ message.error("Couldn't follow user.");
+ setCurrentlyFollowing(false);
+ }
+ finally{
+ getFollowerUserIds();
+ getFollowingUserIds();
+ return;
+ }
+ }
+ try{
+ await axios.delete(`${process.env.REACT_APP_API_URL}/api/v1/users/unfollow`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`},
+ params: {followedUserId: id}
+ }
+ );
+ setCurrentlyFollowing(false);
+ }
+ catch(e){
+ message.error("Couldn't unfollow user.");
+ setCurrentlyFollowing(true);
+ }
+ finally{
+ getFollowerUserIds();
+ getFollowingUserIds();
+ return;
+ }
+ }
+
+ const fetchAchievements = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/achievements/user/${id}`,
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`},
+ }
+ );
+ setAchievements(res.data);
+ }
+ catch(e){
+
+ }
+ }
+
+
+ useEffect(() => {
+ getFollowerUserIds();
+ getFollowingUserIds();
+ getProfileInfo();
+ fetchAchievements();
+
+ if (id === currentUserId) {
+ setIsCurrentUserProfile(true);
+ } else {
+ setIsCurrentUserProfile(false);
+ }
+
+ }, [id]);
+
+ useEffect(()=> {
+ fetchPosts();
+ }, [activeTab])
+
+
+ if (id == undefined || id == null){
+ window.location.href = "/home";
+ return null;
+ }
+
+ if(!/^\d+$/.test(id)){
+ window.location.href = "/home";
+ return null;
+ }
+
+
+
+ if(!profile){
+ return (
+ <>
+
+
+
+ {profileLoading ?
+
+
+
+ :
+
+
+ not a valid user
+
+ }
+
+
+
+
+
+
+ {/* Profile Header Container*/}
+
+
+ {/* Profile Header Details Container */}
+
+
+ {/* Profile Header Details Avatar */}
+
+
+ {/* Profile Header Details Nickname */}
+
{profile.nickName}
+
+ {/* Profile Header Details Exp Points */}
+
Exp Points: {profile.experience}
+
+
+
+ {/* Profile Header Buttons Container */}
+
+
+ {/* Profile Header Buttons Follow */}
+ {!isCurrentUserProfile && (
+
+ )
+ }
+
+ {/* Profile Header Buttons Following */}
+
+
+ {/* Profile Header Buttons Followers */}
+
+
+
+
+ {/* Dialog section TODO */}
+
+
+
+
+
+ {/* Tab Buttons */}
+
+
+ {tabContents.map((content, index) => (
+
+ ))}
+
+
+
+
+ {/* Tab Content */}
+
+ {displayedPosts == null ?
+
:
+ (displayedPosts.length == 0 ?
+
There are currently no posts here.
:
+
+ {displayedPosts.map((item) => (
+ item.isVisualPost ?
+ :
+
+ ))}
+
)
+
+ }
+
+
+
+
+
+
+
+ )
+ }
+ return (
+ window.location.href = `/profile/${profileId}`} className={styles.profileContainer}>
+
+
{profileInfo.nickName}
+
+
+
+
+ { searchLoading ?
+ (
+
+
+
+ ) :
+ searchResults.length == 0 ?
+
No results for this query
:
+ searchResults.map((item, index) => (
+ item.isVisualPost ?
+
+ :
+
+ ))
+ }
+
+
+
Categories
{categories.map((item, index) => (
-
+
))}
diff --git a/3Design/frontend/src/components/TournamentInfo/TournamentInfo.module.css b/3Design/frontend/src/components/TournamentInfo/TournamentInfo.module.css
new file mode 100644
index 00000000..ae921689
--- /dev/null
+++ b/3Design/frontend/src/components/TournamentInfo/TournamentInfo.module.css
@@ -0,0 +1,10 @@
+.mainContainer{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #FFFACD;
+ padding: 10px 20px;
+ border-left: 5px solid #FFA500;
+ border-radius: 5px;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/3Design/frontend/src/components/TournamentInfo/TournamentInfo.tsx b/3Design/frontend/src/components/TournamentInfo/TournamentInfo.tsx
new file mode 100644
index 00000000..0c9801fe
--- /dev/null
+++ b/3Design/frontend/src/components/TournamentInfo/TournamentInfo.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import Countdown, { CountdownRendererFn } from "react-countdown";
+import styles from "./TournamentInfo.module.css"
+import { Button } from "antd";
+import { Tournament } from "../interfaces";
+
+interface Props{
+ info: Tournament | null,
+ showButton: number
+}
+
+const TournamentInfo = ({info, showButton}: Props) => {
+
+ const renderer: CountdownRendererFn = ({ days, hours, minutes, seconds, completed }) => {
+ if (completed || info!.isFinished) {
+ return
Tournament Over;
+ } else {
+ return (
+
+ {days}d {hours}h {minutes}m {seconds}s
+
+ );
+ }
+ };
+
+
+ return (
+
+
+
+ Weekly Tournament
+
+ {
+ !info ?
+
Tournament has ended. Waiting for rewards.
:
+
+ Time left:{" "}
+
+
+ }
+
+
+ {!!info && showButton == 0 &&
+
+
}
+
+ );
+};
+
+export default TournamentInfo;
diff --git a/3Design/frontend/src/components/TournamentLeaderboard/LeaderboardPage.module.css b/3Design/frontend/src/components/TournamentLeaderboard/LeaderboardPage.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/3Design/frontend/src/components/TournamentLeaderboard/LeaderboardPage.tsx b/3Design/frontend/src/components/TournamentLeaderboard/LeaderboardPage.tsx
new file mode 100644
index 00000000..1580198c
--- /dev/null
+++ b/3Design/frontend/src/components/TournamentLeaderboard/LeaderboardPage.tsx
@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { Category, Tournament, TournamentEntry } from '../interfaces';
+import axios from 'axios';
+import { CircularProgress } from '@mui/material';
+import { Avatar, Table, Typography } from 'antd';
+import styles from "./LeaderboardPage.module.css";
+import SideBar from '../SideBar/SideBar';
+import PageHeader from '../PageHeader/PageHeader';
+import TournamentInfo from '../TournamentInfo/TournamentInfo';
+import { getCategoryById } from '../tsfunctions';
+
+const {Text} = Typography;
+
+const LeaderboardPage = () => {
+ const { category } = useParams();
+ if ( category == undefined || !/^\d+$/.test(category)){
+ window.location.href = "/home";
+ }
+
+ const [entries, setEntries] = useState
([]);
+ const [entryFailed, setEntryFailed] = useState(true);
+ const categoryName = getCategoryById(category ?? "-1");
+
+ const [tournamenInfo, setTournamentInfo] = useState(null);
+
+ const [dataLoading, setDataLoading] = useState(true);
+
+ const columns = [
+ {
+ title: "Ranking",
+ width: 100,
+ render: (_ : any, record : any, index : any) => index + 1,
+ },
+ {
+ title: "User",
+ key: "user",
+ render: (_ : any, record: any) => (
+
+ ),
+ },
+ {
+ title: "Score",
+ dataIndex: "score",
+ key: "score",
+ },
+ {
+ title: "Post",
+ key: "postId",
+ render: (_ : any, record: any) => (
+
+ ),
+ },
+ ];
+
+
+ useEffect(() => {
+ fetchServerData();
+ },[]);
+
+
+ useEffect(() => {
+ console.log(entries);
+ }, [entries]);
+
+ const fetchServerData = async () => {
+ await fetchTournamentData();
+ await fetchTournamentEntries();
+ setDataLoading(false);
+ }
+
+
+ const fetchTournamentData = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/tournaments/category/${category}`,
+ {headers: {
+ Authorization: `Bearer ${localStorage.getItem("jwt_token")}`
+ }}
+ )
+ setTournamentInfo(res.data);
+ }
+ catch(e){
+
+ }
+ }
+
+ const fetchTournamentEntries = async () => {
+ try{
+ const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/tournaments/leaderboard/${category}`,
+ {headers: {
+ Authorization: `Bearer ${localStorage.getItem("jwt_token")}`
+ }}
+ )
+ setEntries(res.data);
+ setEntryFailed(false);
+ }
+ catch(e){
+ ;
+ }
+ }
+
+
+
+ const renderMain = () => {
+ if(dataLoading){
+ return(
+
+
+
+ )
+ }
+ if (entryFailed){
+ return(
+
+
There are currently no tournaments for this category.
+
+
+
Leaderboard for {categoryName} category
+
+
+
+ {renderMain()}
+
+
+
+ )
+}
+
+export default LeaderboardPage
\ No newline at end of file
diff --git a/3Design/frontend/src/components/interfaces.ts b/3Design/frontend/src/components/interfaces.ts
index 111c40c6..477c42b4 100644
--- a/3Design/frontend/src/components/interfaces.ts
+++ b/3Design/frontend/src/components/interfaces.ts
@@ -1,43 +1,45 @@
-export interface CustomProfile{
+export interface Profile{
+ id: number,
username: string,
- profilePhoto: string,
- tournamentPoints : string
+ avatarUrl: string,
+ tournamentPoints: number
}
export interface Category{
- text: string,
- id: string
+ name: string,
+ id: string,
+ description: string,
+ followerCount: number
}
export interface DComment{
- id: number,
- user:CustomProfile,
- body: string,
- memberId: number,
- postId: number,
- likeCount: number,
- dislikeCount: number,
- liked: boolean,
- disliked: boolean
+ commentId: number;
+ text: string;
+ user:CustomUser;
+ likes: number;
+ dislikes: number;
+ reactionType: string;
}
export interface DPost{
- id: number,
+ postId: number,
title: string,
- body: string,
- memberId: number,
+ text: string,
+ user: CustomUser,
tags: Tag[],
- category: string,
- visual: boolean,
+ categoryId: number,
+ isVisualPost: boolean,
//reaction list, bookmark list, comment list
- challangeTo: number|null,
+ challengedPostId: number|null,
fileUrl: string|null,
- likeCount: number,
- dislikeCount: number,
+ likes: number,
+ dislikes: number,
+ comments: number,
liked: boolean,
disliked: boolean,
- bookmark: boolean
+ bookmark: boolean,
+ reactionType: string
}
export interface Tag{
@@ -46,17 +48,78 @@ export interface Tag{
}
export interface SendAnnotationData{
- target: SendAnnotationTarget,
- body: string
+ postId : number,
+ userId : number,
+ startIndex: number | null,
+ endIndex: number | null,
+ content: string,
}
-export interface SendAnnotationTarget{
- selector: SendAnnotationTargetSelector,
- source: number
+
+export interface CustomUser{
+ id : number,
+ profilePictureUrl: string | null,
+ nickName: string,
+ experience: number
+}
+
+
+export interface DisplayedAnnotationData{
+ userId: string,
+ username: string,
+ annotation: string,
+ annotatedText : string
+}
+
+export interface RecievedAnnotationData{
+ context: string,
+ id : string,
+ type: string,
+ bodyValue: string,
+ created: string,
+ creator: RecievedAnnotationCreator,
+ target: RecievedAnnotationTarget
}
-export interface SendAnnotationTargetSelector{
- start: number | null,
- end: number | null
+
+interface RecievedAnnotationCreator{
+ id: string,
+ type: string,
+ nickname: string
+}
+
+interface RecievedAnnotationTarget{
+ selector: RecievedAnnotationTargetSelector,
+ source: string
+}
+interface RecievedAnnotationTargetSelector{
+ type: string,
+ start: number,
+ end: number
+}
+
+export interface Tournament{
+ id: number,
+ startTime: string,
+ endTime : string,
+ categoryId: number,
+ isFinished : boolean
+}
+
+export interface TournamentEntry{
+ id: number,
+ user: CustomUser,
+ postId: number,
+ tournament: Tournament,
+ score : number,
+ finishedPosition : number
+}
+
+export interface Achievement{
+ id: number,
+ name: string,
+ description: string,
+ point: number,
+ earnedAt: string
}
\ No newline at end of file
diff --git a/3Design/frontend/src/components/tsfunctions.ts b/3Design/frontend/src/components/tsfunctions.ts
index 23c4609d..f90c8915 100644
--- a/3Design/frontend/src/components/tsfunctions.ts
+++ b/3Design/frontend/src/components/tsfunctions.ts
@@ -1,11 +1,11 @@
-import { Category } from "./interfaces";
+import { Category, DPost, Profile } from "./interfaces";
export function getCategoryById(id: string){
const categories = require("../resources/json-files/Categories.json") as Category[];
for (let i = 0; i < categories.length; i++) {
const element = categories[i];
if (element.id == id){
- return element.text;
+ return element.name;
}
}
@@ -13,6 +13,9 @@ export function getCategoryById(id: string){
}
export function formatInteractions(num: number): string {
+ if (!num){
+ return "0";
+ }
if (num >= 1_000_000) {
return (num / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
} else if (num >= 1_000) {
@@ -28,11 +31,47 @@ export function getPostFromId(id: string | undefined){
const intId = parseInt(id);
const posts = require("../resources/json-files/MockGenericPosts.json");
for (let i = 0; i < posts.length; i++) {
- const element = posts[i];
- if (element.id == intId){
+ const element: DPost = posts[i];
+ if (element.postId == intId){
return element;
}
}
return null;
-}
\ No newline at end of file
+}
+
+export function limitPostBodies(x:string){
+ let count = 0;
+ for (let i = 0; i < x.length; i++) {
+ if (x.charAt(i) == "\n"){
+ count += 50;
+ continue;
+ }
+ count++;
+ }
+ return count > 1024;
+}
+
+export function getProfileFromId(id: number | undefined){
+ if (!id){
+ return null;
+ }
+ const profiles = require("../resources/json-files/MockProfiles.json");
+ for (let i = 0; i < profiles.length; i++) {
+ const element: Profile = profiles[i];
+ if (element.id == id){
+ return element;
+ }
+ }
+ return null;
+}
+
+export function getProfilesList(){
+ return [
+ { id: 1, username: "profile1", avatarUrl: "/profile1.png", tournamentPoints: 100 },
+ { id: 2, username: "profile2", avatarUrl: "/profile2.png", tournamentPoints: 150 },
+ { id: 3, username: "profile3", avatarUrl: "/profile3.png", tournamentPoints: 200 },
+ { id: 4, username: "profile4", avatarUrl: "/profile4.png", tournamentPoints: 250 },
+ // Add more profiles as needed
+ ];
+ };
diff --git a/3Design/frontend/src/resources/json-files/Categories.json b/3Design/frontend/src/resources/json-files/Categories.json
index a9e0776e..c09de28e 100644
--- a/3Design/frontend/src/resources/json-files/Categories.json
+++ b/3Design/frontend/src/resources/json-files/Categories.json
@@ -1,7 +1,13 @@
[
- {"text": "Characters", "id": "characters"},
- {"text": "Enviroments", "id": "enviroments"},
- {"text": "Props", "id": "props"},
- {"text": "Vehicles", "id": "vehicles"},
- {"text": "Animations", "id": "animations"}
+ {"name": "Characters", "id": "1", "description": "Models of humans, animals, and fantastical creatures for storytelling or design.", "followerCount": 0},
+ {"name": "Nature", "id": "2", "description": "Organic models like trees, plants, rocks, and natural landscapes.", "followerCount": 0},
+ {"name": "Architecture", "id": "3", "description": "Designs of buildings, structures, interiors, and urban settings.", "followerCount": 0},
+ {"name": "Vehicles and Machines", "id": "4", "description": "Cars, planes, robots, and mechanical objects in intricate detail.", "followerCount": 0},
+ {"name": "Furniture and Home Decor", "id": "5", "description": "Household items like chairs, tables, lamps, and other interior designs.", "followerCount": 0},
+ {"name": "Minimalist and Abstract", "id": "6", "description": "Simplistic or experimental models emphasizing form and creativity.", "followerCount": 0},
+ {"name": "3D Printing Models", "id": "7", "description": "Models optimized and prepared for 3D printing purposes.", "followerCount": 0},
+ {"name": "Statues and Sculptures", "id": "8", "description": "Artistic creations, including busts, figurines, and decorative models.", "followerCount": 0},
+ {"name": "Props and Accessories", "id": "9", "description": "Everyday objects, tools, weapons, and standalone design elements.", "followerCount": 0},
+ {"name": "Fantasy and Sci-Fi", "id": "10", "description": "Models inspired by futuristic, mythical, or imaginative themes.", "followerCount": 0}
+
]
\ No newline at end of file
diff --git a/3Design/frontend/src/resources/json-files/Comments.json b/3Design/frontend/src/resources/json-files/Comments.json
index a10e742d..03ea0c00 100644
--- a/3Design/frontend/src/resources/json-files/Comments.json
+++ b/3Design/frontend/src/resources/json-files/Comments.json
@@ -1,32 +1,28 @@
[
{
- "id": 1,
+ "commentId": 1,
"user": {
"username": "erselcanakcili",
- "profilePhoto": "",
- "tournamentPoints" : "1500"
+ "profilePictureUrl": null,
+ "id" : 1500
},
- "body": "This is a great post! Thanks for sharing.",
- "memberId": 1,
- "postId": 4,
- "likeCount":10,
- "dislikeCount": 2,
+ "text": "This is a great post! Thanks for sharing.",
+ "likes":10,
+ "dislikes": 2,
"liked": true,
"disliked": false
},
{
- "id": 2,
+ "commentId": 2,
"user": {
- "username": "oguzkagnici",
- "profilePhoto": "",
- "tournamentPoints" : "1500"
+ "username": "oguzkagnici",
+ "profilePictureUrl": null,
+ "id" : 1500
},
- "body": "Inspiring.",
- "memberId": 1,
- "postId": 4,
- "likeCount":10,
- "dislikeCount": 200,
+ "text": "Inspiring.",
+ "likes":10,
+ "dislikes": 200,
"liked": false,
"disliked": true
}
diff --git a/3Design/frontend/src/resources/json-files/MockAnnotations.json b/3Design/frontend/src/resources/json-files/MockAnnotations.json
new file mode 100644
index 00000000..72909149
--- /dev/null
+++ b/3Design/frontend/src/resources/json-files/MockAnnotations.json
@@ -0,0 +1,42 @@
+[
+{
+ "@context": "http://www.w3.org/ns/anno.jsonld",
+ "id": "http://example.org/anno6",
+ "type": "Annotation",
+ "bodyValue": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
+ "creator": {
+ "id": "http://example.org/uer1s",
+ "type": "Person",
+ "nickname": "User 1"
+ },
+ "created": "2021-06-01T12:00:00Z",
+ "target": {
+ "source": "http://example.org/ebook1",
+ "selector": {
+ "type": "TextPositionSelector",
+ "start": 5,
+ "end": 10
+ }
+ }
+},
+{
+ "@context": "http://www.w3.org/ns/anno.jsonld",
+ "id": "http://example.org/anno6",
+ "type": "Annotation",
+ "bodyValue": "This text means something.",
+ "creator": {
+ "id": "http://example.org/uer1s",
+ "type": "Person",
+ "nickname": "User 2"
+ },
+ "created": "2021-06-01T12:00:00Z",
+ "target": {
+ "source": "http://example.org/ebook1",
+ "selector": {
+ "type": "TextPositionSelector",
+ "start": 1,
+ "end": 20
+ }
+ }
+}
+]
\ No newline at end of file
diff --git a/3Design/frontend/src/resources/json-files/MockDiscussions.json b/3Design/frontend/src/resources/json-files/MockDiscussions.json
index 62df235e..655f6b41 100644
--- a/3Design/frontend/src/resources/json-files/MockDiscussions.json
+++ b/3Design/frontend/src/resources/json-files/MockDiscussions.json
@@ -1,32 +1,42 @@
[
{
- "id": 7,
+ "postId": 7,
"title": "How do I print a model?",
- "body": "Which button should I press to start printing?",
- "memberId": 2,
+ "text": "Which button should I press to start printing?",
+ "user": {
+ "username" : "Jim",
+ "profilePictureUrl" : null,
+ "id": 1
+ },
"tags": [],
- "category": "Printing",
- "visual": true,
- "challangeTo": null,
+ "categoryId": 1,
+ "isVisualPost": true,
+ "challengedPostId": null,
"fileUrl": null,
- "likeCount": 2,
- "dislikeCount": 4,
+ "likes": 2,
+ "dislikes": 4,
+ "comments":1234,
"liked": false,
"disliked": true,
"bookmark":false
},
{
- "id": 23,
+ "postId": 23,
"title": "How can I log out from this site?",
- "body": "I think they forgot to implented this feature.",
- "memberId": 2,
+ "text": "I think they forgot to implented this feature.",
+ "user": {
+ "username" : "James",
+ "profilePictureUrl" : null,
+ "id": 2
+ },
"tags": [],
- "category": "General",
- "visual": true,
- "challangeTo": null,
+ "categoryId": 2,
+ "isVisualPost": true,
+ "challengedPostId": null,
"fileUrl": null,
- "likeCount": 21221,
- "dislikeCount": 5,
+ "likes": 21221,
+ "dislikes": 5,
+ "comments": 123,
"liked": false,
"disliked": true,
"bookmark":false
diff --git a/3Design/frontend/src/resources/json-files/MockGenericPosts.json b/3Design/frontend/src/resources/json-files/MockGenericPosts.json
index 5d254487..942a354e 100644
--- a/3Design/frontend/src/resources/json-files/MockGenericPosts.json
+++ b/3Design/frontend/src/resources/json-files/MockGenericPosts.json
@@ -4,11 +4,14 @@
"title": "Human Model",
"body": "Check out this human model",
"memberId": 2,
+ "user":{ "nickName": "John Doe", "profilePicture": "/profile.jpg","id":2,"userPoints": 100},
"tags": [],
"category": "Human",
+ "categoryId":1,
"visual": true,
"challangeTo": null,
"fileUrl": "/3d.glb",
+ "comments":1234,
"likeCount": 62,
"dislikeCount": 129,
"liked": true,
@@ -20,6 +23,8 @@
"title": "How do I print a model?",
"body": "Which button should I press to start printing?",
"memberId": 2,
+ "categoryId":1,
+ "user":{ "nickName": "John Doe", "profilePicture": "/profile.jpg","id":2,"userPoints": 100},
"tags": [],
"category": "Printing",
"visual": false,
@@ -28,7 +33,8 @@
"likeCount": 2,
"dislikeCount": 4,
"liked": false,
- "disliked": true,
+ "disliked": false,
+ "comments":1234,
"bookmark":false
},
{
@@ -36,6 +42,7 @@
"title": "Car Model",
"body": "Check out this car model",
"memberId": 2,
+ "categoryId":1,
"tags": [],
"category": "Car",
"visual": true,
@@ -43,6 +50,7 @@
"fileUrl": "/mug.fbx",
"likeCount": 1,
"dislikeCount": 2000,
+ "comments":1234,
"liked": false,
"disliked": true,
"bookmark":false
@@ -52,12 +60,14 @@
"title": "How can I log out from this site?",
"body": "I think they forgot to implented this feature.",
"memberId": 2,
+ "categoryId":1,
"tags": [],
"category": "General",
"visual": false,
"challangeTo": null,
"fileUrl": null,
"likeCount": 21221,
+ "comments":1234,
"dislikeCount": 5,
"liked": false,
"disliked": true,
diff --git a/3Design/frontend/src/resources/json-files/MockPosts.json b/3Design/frontend/src/resources/json-files/MockPosts.json
index 18a81896..d0a2b589 100644
--- a/3Design/frontend/src/resources/json-files/MockPosts.json
+++ b/3Design/frontend/src/resources/json-files/MockPosts.json
@@ -1,32 +1,36 @@
[
{
- "id": 4,
+ "postId": 4,
"title": "Human Model",
- "body": "Check out this human model",
+ "text": "Check out this human model",
"memberId": 2,
+ "user":{ "nickName": "John Doe", "profilePicture": "/profile.jpg","id":2,"userPoints": 100},
"tags": [],
- "category": "Human",
- "visual": true,
- "challangeTo": null,
+ "categoryId": 4,
+ "isVisualPost": true,
+ "challengedPostId": null,
"fileUrl": "/3d.glb",
- "likeCount": 62,
- "dislikeCount": 129,
+ "likes": 62,
+ "dislikes": 129,
+ "comments":1234,
"liked": true,
"disliked": false,
"bookmark":true
},
{
- "id": 21,
+ "postId": 21,
"title": "Car Model",
- "body": "Check out this car model",
+ "text": "Check out this car model",
+ "user":{ "nickName": "John Doe", "profilePicture": "/profile.jpg","id":2,"userPoints": 100},
"memberId": 2,
"tags": [],
- "category": "Car",
- "visual": true,
- "challangeTo": null,
+ "categoryId": 4,
+ "isVisualPost": true,
+ "challengedPostId": null,
"fileUrl": "/mug.fbx",
- "likeCount": 1,
- "dislikeCount": 2000,
+ "likes": 1,
+ "dislikes": 2000,
+ "comments":1234,
"liked": false,
"disliked": true,
"bookmark":false
diff --git a/3Design/frontend/src/resources/json-files/MockProfiles.json b/3Design/frontend/src/resources/json-files/MockProfiles.json
new file mode 100644
index 00000000..f08ed65c
--- /dev/null
+++ b/3Design/frontend/src/resources/json-files/MockProfiles.json
@@ -0,0 +1,32 @@
+[
+ {
+ "id": 1,
+ "username": "turkerdm1",
+ "avatarUrl": "/default_pp.png",
+ "tournamentPoints": "1111"
+ },
+ {
+ "id": 2,
+ "username": "turkerdm2",
+ "avatarUrl": "/default_pp.png",
+ "tournamentPoints": "2222"
+ },
+ {
+ "id": 3,
+ "username": "turkerdm3",
+ "avatarUrl": "/default_pp.png",
+ "tournamentPoints": "3333"
+ },
+ {
+ "id": 4,
+ "username": "turkerdm4",
+ "avatarUrl": "/default_pp.png",
+ "tournamentPoints": "4444"
+ },
+ {
+ "id": 5,
+ "username": "turkerdm5",
+ "avatarUrl": "/default_pp.png",
+ "tournamentPoints": "5555"
+ }
+]
\ No newline at end of file