update frontend-web

htl-leo-itp-2325-4-5BHITM · Sep 30, 2024 · fe5bc93 · fe5bc93
1 parent ffbd31e
commit fe5bc93
Show file tree

Hide file tree

Showing 14 changed files with 1,356 additions and 182 deletions.
diff --git a/logic/frontend/web/package-lock.json b/logic/frontend/web/package-lock.json
diff --git a/logic/frontend/web/package.json b/logic/frontend/web/package.json
@@ -9,18 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/material": "^6.1.1",
+    "@mui/material-nextjs": "^6.1.1",
+    "axios": "^1.7.7",
+    "next": "14.2.13",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.13"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.13",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.13"
+    "typescript": "^5"
   }
 }
diff --git a/logic/frontend/web/src/app/FYP/page.tsx b/logic/frontend/web/src/app/FYP/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import Grid from "@mui/material/Grid2";
+import {Avatar, Box, Dialog, DialogContent, DialogTitle, List, ListItem, ListItemAvatar, ListItemText, TextField, Typography} from "@mui/material";
+import {useEffect, useState} from "react";
+import {PostModel} from "@/model/model";
+import {getPost, getPosts} from "@/service/post";
+
+const colors = ["#C20B4E", "#3656FF", "#4ECA31"];
+
+function getRandomColor() {
+    return colors[Math.floor(Math.random() * colors.length)];
+}
+
+export default function Page() {
+    const [posts, setPosts] = useState<PostModel[]>([]);
+    const [selectedPost, setSelectedPost] = useState<PostModel | null>(null);
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    useEffect(() => {
+        async function fetchPosts() {
+            try {
+                const postIds = await getPosts();
+                const postDetails = await Promise.all(postIds.map(id => getPost(id)));
+                setPosts(postDetails);
+            } catch (error) {
+                console.error('Error fetching posts:', error);
+            }
+        }
+
+        fetchPosts();
+    }, []);
+
+    const handleGridItemClick = (post: PostModel) => {
+        setSelectedPost(post);
+        setDialogOpen(true);
+    };
+
+    const handleClose = () => {
+        setDialogOpen(false);
+        setSelectedPost(null);
+    };
+
+    return (
+        <Grid container spacing={2} p="40px" bgcolor="#1A1C40" height="100%" width="100%">
+            <Grid size={8} bgcolor="#22264B" padding="20px" height="200vh">
+                <Typography variant="h6" color="white">For you</Typography>
+                <Grid container spacing={12} display="flex" justifyContent="center" alignItems="center">
+                    {posts.map(post => (
+                        <Grid key={post.postId} size={4} display="flex" justifyContent="center" alignItems="center" padding="10px" onClick={() => handleGridItemClick(post)}>
+                            <Box bgcolor={getRandomColor()} m="5px" height="10rem" width="10rem" display="flex" justifyContent="center" alignItems="center" borderRadius="13px">
+                                <Typography color="#ffffff" fontWeight={700}>
+                                    {post.title}
+                                </Typography>
+                            </Box>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Grid>
+            <Grid size={4}>
+                <Box bgcolor="#22264B" p="10px">
+                    <form>
+                        <Typography
+                            variant={"h6"}
+                            color={"white"}
+                        >
+                            Create
+                        </Typography>
+                        <TextField
+                            label="Bet"
+                            variant="outlined"
+                            fullWidth
+                            margin="normal"
+                            InputProps={{style: {color: 'white'}}}
+                            InputLabelProps={{style: {color: 'white'}}}
+                        />
+                        <TextField
+                            label="Description"
+                            variant="outlined"
+                            fullWidth
+                            margin="normal"
+                            InputProps={{style: {color: 'white'}}}
+                            InputLabelProps={{style: {color: 'white'}}}
+                        />
+                    </form>
+                </Box>
+                <Box bgcolor="#22264B" p="10px" color="#fff">
+                    <Typography variant="h6" color="white">For you</Typography>
+                    <List>
+                        {["Alice", "Bob", "Charlie", "David", "Eve"].map((name, index) => (
+                            <ListItem key={index}>
+                                <ListItemAvatar>
+                                    <Avatar>{name.charAt(0)}</Avatar>
+                                </ListItemAvatar>
+                                <ListItemText primary={name} />
+                            </ListItem>
+                        ))}
+                    </List>
+                </Box>
+            </Grid>
+            <Dialog open={dialogOpen} onClose={handleClose} maxWidth={"sm"} fullWidth={true}>
+                <DialogTitle sx={{ bgcolor: "#22264B", color: "white" }}>{selectedPost?.title}</DialogTitle>
+                <DialogContent sx={{ bgcolor: "#22264B", color: "white" }}>
+                    <Typography>{selectedPost?.definition}</Typography>
+                    <Typography>by {selectedPost?.creatorName}</Typography>
+                    <Typography>{selectedPost?.postDetails?.length} participants</Typography>
+                </DialogContent>
+            </Dialog>
+        </Grid>
+    );
+}
diff --git a/logic/frontend/web/src/app/fonts/GeistMonoVF.woff b/logic/frontend/web/src/app/fonts/GeistMonoVF.woff
diff --git a/logic/frontend/web/src/app/fonts/GeistVF.woff b/logic/frontend/web/src/app/fonts/GeistVF.woff
diff --git a/logic/frontend/web/src/app/globals.css b/logic/frontend/web/src/app/globals.css
@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/logic/frontend/web/src/app/layout.tsx b/logic/frontend/web/src/app/layout.tsx
@@ -1,35 +1,32 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+"use client"
+import SideBarComponent from "@/component/SideBarComponent";
+import { CssBaseline } from "@mui/material";
+import Grid from '@mui/material/Grid2';
+import HeaderComponent from "@/component/HeaderComponent";
+import React, { useState } from "react";
+import {UserProvider} from "@/service/UserContext";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    const [user, setUser] = useState({ username: "username", email: "email" });
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}
+    return (
+        <html>
+        <body>
+        <UserProvider>
+            <CssBaseline />
+            <Grid container height="100vh" overflow="hidden" bgcolor="#1A1C40">
+                <Grid size={12}>
+                    <HeaderComponent username={user.username} email={user.email} />
+                </Grid>
+                <Grid size={2}>
+                    <SideBarComponent />
+                </Grid>
+                <Grid size={10} sx={{ overflow: "auto", height: "100vh" }}>
+                    {React.cloneElement(children as React.ReactElement, { setUser })}
+                </Grid>
+            </Grid>
+        </UserProvider>
+        </body>
+        </html>
+    );
+}
diff --git a/logic/frontend/web/src/app/login/page.tsx b/logic/frontend/web/src/app/login/page.tsx
@@ -0,0 +1,55 @@
+// src/app/login/page.tsx
+"use client"
+import { useState } from "react";
+import { TextField, Button, Box, Typography } from "@mui/material";
+import axios from "axios";
+import { UserModel } from "@/model/model";
+import {useUser} from "@/service/UserContext";
+
+export default function Page() {
+    const [name, setName] = useState("");
+    const [userData, setUserData] = useState<UserModel | null>(null);
+    const { setUser } = useUser();
+
+    const handleSubmit = async (event: { preventDefault: () => void; }) => {
+        event.preventDefault();
+        try {
+            const response = await axios.get(`https://www.boast.social/api/users/login/${name}`);
+            setUserData(response.data);
+            setUser({ username: response.data.username, email: response.data.email });
+        } catch (error) {
+            console.error("Error logging in:", error);
+        }
+    };
+
+    return (
+        <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" height="100vh" bgcolor="#1A1C40">
+            <form onSubmit={handleSubmit}>
+                <TextField
+                    label="Name"
+                    variant="outlined"
+                    fullWidth
+                    margin="normal"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    InputProps={{ style: { color: 'white' } }}
+                    InputLabelProps={{ style: { color: 'white' } }}
+                />
+                <Button type="submit" variant="contained" color="primary">
+                    Login
+                </Button>
+            </form>
+            {userData && (
+                <Box mt={4} p={2} bgcolor="#22264B" color="white" borderRadius="8px">
+                    <Typography variant="h6">User Data</Typography>
+                    <Typography>User ID: {userData.userId}</Typography>
+                    <Typography>Created On: {new Date(userData.createdOn).toLocaleString()}</Typography>
+                    <Typography>Is Public: {userData.isPublic ? "Yes" : "No"}</Typography>
+                    <Typography>Name: {userData.name}</Typography>
+                    <Typography>Username: {userData.username}</Typography>
+                    <Typography>Email: {userData.email}</Typography>
+                </Box>
+            )}
+        </Box>
+    );
+}
diff --git a/logic/frontend/web/src/app/page.tsx b/logic/frontend/web/src/app/page.tsx
@@ -1,101 +1,7 @@
-import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+    <div>
     </div>
   );
 }