diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a5cfc0d..b6e9143 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@mui/icons-material": "^6.1.4", "@mui/material": "^6.1.3", "@testing-library/jest-dom": "^5.17.0", @@ -21,8 +23,11 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-final-form": "^6.5.9", + "react-icons": "^5.3.0", + "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", + "styled-components": "^6.1.13", "web-vitals": "^2.1.4" } }, @@ -2485,6 +2490,49 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -4845,6 +4893,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -6320,6 +6373,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6776,6 +6837,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6917,6 +6986,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -15562,6 +15641,25 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "peerDependencies": { + "react": "*" + } + }, + "node_modules/react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "dependencies": { + "throttle-debounce": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17064,6 +17162,88 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/styled-components/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -17514,6 +17694,14 @@ "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz", "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==" }, + "node_modules/throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/thunky": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8fc6166..83fdff7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-final-form": "^6.5.9", + "react-icons": "^5.3.0", "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", diff --git a/frontend/src/App.js b/frontend/src/App.js index e584a55..899b70d 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -2,6 +2,7 @@ import './App.css'; import LoginPage from './pages/LoginPage'; import SignUpPage from './pages/SignUpPage'; import HomePage from './pages/HomePage'; +import ArchivePage from './pages/ArchivePage'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; @@ -42,6 +43,7 @@ function App() { } /> } /> } /> + } /> diff --git a/frontend/src/components/archivepage/ArchiveCard.jsx b/frontend/src/components/archivepage/ArchiveCard.jsx new file mode 100644 index 0000000..af57565 --- /dev/null +++ b/frontend/src/components/archivepage/ArchiveCard.jsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from 'react'; +import Navbar from '../common/Navbar'; +import GameScreen from './GameScreen'; +import { Box, Typography } from '@mui/material'; + +const BACKEND_URL = process.env.REACT_APP_API_URL; + +const ArchiveCard = () => { + const [isGuest, setIsGuest] = useState(false); + + // Example moves for the game + const exampleMoves = [ + "start", // Initial board setup + "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1", // After 1. e4 + "rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2", // After 1... e5 + "rnbqkbnr/pppp1ppp/8/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R b KQkq - 1 2", // After 2. Nf3 + "r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3" // After 2... Nc6 + ]; + + // Example game title + const gameTitle = "Chess Match - October 15, 2023"; + + useEffect(() => { + const token = localStorage.getItem("token"); + + if (!token) { + setIsGuest(true); + return; + } + + const checkHealth = async () => { + try { + const response = await fetch(BACKEND_URL + "/healthcheck/hc/", { + method: "GET", + headers: { + "Authorization": `Bearer ${token}`, + "Content-Type": "application/json" + } + }); + + if (!response.ok) { + throw new Error('Failed to fetch health check data'); + } + + const data = await response.json(); + console.log(data); + } catch (error) { + console.error('Error:', error); + } + }; + + checkHealth(); + }, []); + + return ( +
+ + + + {gameTitle} + + + +
+ ); +}; + +export default ArchiveCard; diff --git a/frontend/src/components/archivepage/CommentsList.jsx b/frontend/src/components/archivepage/CommentsList.jsx new file mode 100644 index 0000000..becf12c --- /dev/null +++ b/frontend/src/components/archivepage/CommentsList.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import { Box, Typography, Card, CardContent, Avatar, Divider } from "@mui/material"; +import FENRenderer from "../common/FENRenderer"; + +const CommentsList = ({ comments }) => { + return ( + + {comments.map((comment, index) => ( + + + + + + {comment.username || "User"} + + + + {comment.text} + + {comment.fen && ( + + + + )} + + {comment.image && ( + + Comment + + )} + + + ))} + + ); +}; + +export default CommentsList; diff --git a/frontend/src/components/archivepage/GameScreen.jsx b/frontend/src/components/archivepage/GameScreen.jsx new file mode 100644 index 0000000..365069f --- /dev/null +++ b/frontend/src/components/archivepage/GameScreen.jsx @@ -0,0 +1,168 @@ +import React, { useState } from "react"; +import FENRenderer from "../common/FENRenderer"; +import { FaArrowLeft, FaArrowRight } from "react-icons/fa"; +import { Button, Select, MenuItem, Box, Stack, Typography } from "@mui/material"; +import ShareComment from "./ShareComment"; +import CommentsList from "./CommentsList"; + +const GameScreen = ({ moves }) => { + const [currentMoveIndex, setCurrentMoveIndex] = useState(0); + + const initialCommentsByStep = { + 0: [ + { + id: 1, + username: "Alice", + text: "Great opening move!", + fen: "start", + image: null, + userIcon: null, + }, + { + id: 2, + username: "Bob", + text: "Looking forward to seeing how this goes.", + fen: null, + image: null, + userIcon: null, + }, + ], + 1: [ + { + id: 1, + username: "Charlie", + text: "Classic e4 opening!", + fen: "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1", + image: null, + userIcon: null, + }, + { + id: 2, + username: "Dana", + text: "I prefer d4 myself.", + fen: null, + image: null, + userIcon: null, + }, + ], + 2: [ + { + id: 1, + username: "Eve", + text: "Both players are playing really solidly.", + fen: "rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2", + image: null, + userIcon: null, + }, + ], + 3: [ + { + id: 1, + username: "Frank", + text: "Knight to f3, a classic move!", + fen: "rnbqkbnr/pppp1ppp/8/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R b KQkq - 1 2", + image: null, + userIcon: null, + }, + ], + }; + + const [commentsByStep, setCommentsByStep] = useState(initialCommentsByStep); + + + const goToMove = (index) => { + if (index >= 0 && index < moves.length) { + setCurrentMoveIndex(index); + } + }; + + const handlePrevMove = () => goToMove(currentMoveIndex - 1); + const handleNextMove = () => goToMove(currentMoveIndex + 1); + + const handleMoveSelect = (e) => { + const selectedMove = parseInt(e.target.value, 10); + goToMove(selectedMove); + }; + + const handleAddComment = (comment) => { + setCommentsByStep((prev) => ({ + ...prev, + [currentMoveIndex]: [ + ...(prev[currentMoveIndex] || []), + { ...comment, id: (prev[currentMoveIndex]?.length || 0) + 1 }, + ], + })); + }; + + const commentsForCurrentStep = commentsByStep[currentMoveIndex] || []; + const currentPosition = moves[currentMoveIndex]; + + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + +export default GameScreen; diff --git a/frontend/src/components/archivepage/ShareComment.jsx b/frontend/src/components/archivepage/ShareComment.jsx new file mode 100644 index 0000000..dd62fda --- /dev/null +++ b/frontend/src/components/archivepage/ShareComment.jsx @@ -0,0 +1,105 @@ +import React, { useState } from "react"; +import { TextField, Button, Box, Input, Typography, Card, Snackbar, Alert } from "@mui/material"; +import FENRenderer from "../common/FENRenderer"; + +const ShareComment = ({ onCommentSubmit }) => { + const [commentText, setCommentText] = useState(""); + const [imagePreview, setImagePreview] = useState(null); + const [imageName, setImageName] = useState(null); + const [fen, setFen] = useState(""); + const [showChessboard, setShowChessboard] = useState(false); + const [openSnackbar, setOpenSnackbar] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(""); + + const handleCommentSubmit = () => { + if (commentText.trim()) { + onCommentSubmit({ text: commentText, image: imagePreview, fen }); + setSnackbarMessage("Comment shared successfully!"); + setCommentText(""); + setImagePreview(null); + setImageName(null); + setFen(""); + setShowChessboard(false); + } else { + setSnackbarMessage("Please enter a comment."); + } + setOpenSnackbar(true); + }; + + const handleImageChange = (event) => { + const file = event.target.files[0]; + if (file) { + setImagePreview(URL.createObjectURL(file)); + setImageName(file.name); + } + }; + + const handleSaveFEN = () => { + setShowChessboard(true); + }; + + const handleCloseSnackbar = () => { + setOpenSnackbar(false); + }; + + return ( + + setCommentText(e.target.value)} + sx={{ marginBottom: 1 }} + /> + + + setFen(e.target.value)} + /> + + + + + {imageName && {imageName}} + {!imageName && No file chosen.} + + + + {(showChessboard && fen) && ( + + + + )} + + {imagePreview && ( + + Preview + + )} + + + + + + + + {snackbarMessage} + + + + ); +}; + +export default ShareComment; diff --git a/frontend/src/components/homepage/FENRenderer.jsx b/frontend/src/components/common/FENRenderer.jsx similarity index 65% rename from frontend/src/components/homepage/FENRenderer.jsx rename to frontend/src/components/common/FENRenderer.jsx index 4aa5180..8d4c9a4 100644 --- a/frontend/src/components/homepage/FENRenderer.jsx +++ b/frontend/src/components/common/FENRenderer.jsx @@ -2,11 +2,12 @@ import React from "react"; import Chessboard from "chessboardjsx"; -const FENRenderer = ({ fen }) => { +const FENRenderer = ({ fen, width }) => { return ( ); }; diff --git a/frontend/src/components/homepage/Navbar.jsx b/frontend/src/components/common/Navbar.jsx similarity index 90% rename from frontend/src/components/homepage/Navbar.jsx rename to frontend/src/components/common/Navbar.jsx index e412114..a5e4d34 100644 --- a/frontend/src/components/homepage/Navbar.jsx +++ b/frontend/src/components/common/Navbar.jsx @@ -18,6 +18,10 @@ const Navbar = () => { navigate('/'); }; + const handleArchiveClick = () => { + navigate('/archive'); + }; + const handleLoginClick = () => { navigate('/login'); }; @@ -36,7 +40,7 @@ const Navbar = () => { Chess Social - + {!isLoggedIn && } {isLoggedIn && } {isLoggedIn && } diff --git a/frontend/src/components/homepage/HomeCard.jsx b/frontend/src/components/homepage/HomeCard.jsx index 0bc370a..ba6380c 100644 --- a/frontend/src/components/homepage/HomeCard.jsx +++ b/frontend/src/components/homepage/HomeCard.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import Navbar from './Navbar'; +import Navbar from '../common/Navbar'; import Feed from './Feed'; import { useNavigate } from 'react-router-dom'; // For navigation diff --git a/frontend/src/components/homepage/Post.jsx b/frontend/src/components/homepage/Post.jsx index 927d31e..c2dab80 100644 --- a/frontend/src/components/homepage/Post.jsx +++ b/frontend/src/components/homepage/Post.jsx @@ -9,7 +9,7 @@ import { Chip, Divider, } from "@mui/material"; -import FENRenderer from "./FENRenderer"; +import FENRenderer from "../common/FENRenderer"; import ThumbUpIcon from "@mui/icons-material/ThumbUp"; import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import ShareIcon from "@mui/icons-material/Share"; diff --git a/frontend/src/components/homepage/SharePost.jsx b/frontend/src/components/homepage/SharePost.jsx index adeef94..045234c 100644 --- a/frontend/src/components/homepage/SharePost.jsx +++ b/frontend/src/components/homepage/SharePost.jsx @@ -12,7 +12,7 @@ import { Typography, } from "@mui/material"; import { Form, Field } from "react-final-form"; -import FENRenderer from "./FENRenderer"; +import FENRenderer from "../common/FENRenderer"; const BACKEND_URL = process.env.REACT_APP_API_URL; @@ -185,7 +185,7 @@ const SharePost = () => { {({ input }) => ( - + - {imageName && ( - {imageName} - )} + {imageName && {imageName}} + {!imageName && No file chosen.} )} @@ -243,15 +242,17 @@ const SharePost = () => { )} )} - + + )} /> diff --git a/frontend/src/pages/ArchivePage.jsx b/frontend/src/pages/ArchivePage.jsx new file mode 100644 index 0000000..2e022cc --- /dev/null +++ b/frontend/src/pages/ArchivePage.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ArchiveCard from '../components/archivepage/ArchiveCard'; + +function ArchivePage() { + return ( + + ); +} + +export default ArchivePage;