Firat/archive

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",

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() {
           <Route path="/home" element={<HomePage />} />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/signup" element={<SignUpPage />} />
+          <Route path="/archive" element={<ArchivePage />} />
       </Routes>
     </Router>
   </ThemeProvider>

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 (
+    <div>
+      <Navbar />
+      <Box sx={{ p: 3, textAlign: 'center', backgroundColor: 'background.paper', borderRadius: 2, mb: 2 }}>
+        <Typography variant="h5" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
+          {gameTitle}
+        </Typography>
+      </Box>
+      <GameScreen moves={exampleMoves} />
+    </div>
+  );
+};
+
+export default ArchiveCard;

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 (
+    <Box sx={{ marginTop: 2 }}>
+      {comments.map((comment, index) => (
+        <Card key={index} sx={{ marginBottom: 2 }}>
+          <CardContent>
+            <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1 }}>
+              <Avatar alt="User" src={comment.userIcon || ""} sx={{ marginRight: 1 }} />
+              <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
+                {comment.username || "User"}
+              </Typography>
+            </Box>
+            <Divider sx={{ marginBottom: 1 }} />
+            <Typography variant="body2">{comment.text}</Typography>
+
+            {comment.fen && (
+              <Box sx={{ marginTop: 2, display: "flex", justifyContent: "center" }}>
+                <FENRenderer fen={comment.fen} width={200} />
+              </Box>
+            )}
+
+            {comment.image && (
+              <Box sx={{ display: "flex", justifyContent: "center", marginTop: 2 }}>
+                <img src={comment.image} alt="Comment" style={{ maxWidth: "100%", maxHeight: "200px" }} />
+              </Box>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </Box>
+  );
+};
+
+export default CommentsList;