css added

frontend/package.json

@@ -3,11 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.css

@@ -1,38 +1 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

frontend/src/App.js

@@ -1,24 +1,19 @@
 import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import CommunityFeed from './CommunityFeed.js';
+
+
 
 function App() {
   return (
-
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+
+    <div>
+     <BrowserRouter>
+      <Routes>
+        <Route path="/communityfeed" element={<CommunityFeed />}></Route>
+      </Routes >
+      </BrowserRouter>
     </div>
   );
 }

frontend/src/CommunityFeed.js

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from "react";
+import AppBar from '@mui/material/AppBar';
+import { DialogContentText, DialogTitle, TextField, Toolbar, Typography, Dialog, DialogContent, DialogActions } from "@mui/material";
+import Button from '@mui/material/Button';
+import Posts from './components/Posts.js';
+import { Link } from 'react-router-dom';
+import { FormDialog } from "./components/FormDialog.js";
+import Avatar from '@mui/material/Avatar';
+import { deepOrange, deepPurple } from '@mui/material/colors';
+//import HomeIcon from "./components/HomeIcon.js";  
+
+
+function CommunityFeed(props) { 
+    const name = "Guitar";
+    // let streak = 0;
+    let posts = [
+        {
+            author: 'Henry',
+            avatar: 'H',
+            text: 'Today is a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        },
+
+        {
+            author: 'Tom',
+            avatar: 'T',
+            text: 'Today is not a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        },
+        {
+            author: 'Tom',
+            avatar: 'T',
+            text: 'Today is not a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        },
+        {
+            author: 'Tom',
+            avatar: 'T',
+            text: 'Today is not a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        },
+        {
+            author: 'Tom',
+            avatar: 'T',
+            text: 'Today is not a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        },
+        {
+            author: 'Tom',
+            avatar: 'T',
+            text: 'Today is not a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        },
+        {
+            author: 'Tom',
+            avatar: 'T',
+            text: 'Today is not a nice day',
+            photos: [],
+            videos: "",
+            timestamp: "Sat 21/1/2023"
+        }
+
+    ]
+    console.log("Reach the community feed");
+
+    return (
+        <div>
+            <AppBar position="static">
+                <Toolbar>
+                    <Link to="/"><Button color="secondary" variant="contained" 
+                    style={{textDecoration: 'none'}}> Community </Button></Link>
+                    <h1>
+                        {name}
+                    </h1>
+                    {/* <Typography component="div" sx={{ flexGrow: 1}}>
+                        {streak}
+                    </Typography> */}
+                    <FormDialog posts ={posts} />            
+                    </Toolbar>
+            </AppBar>
+
+            <Posts posts={posts} />
+        </div>
+    )
+}
+
+export default CommunityFeed;

frontend/src/components/FormDialog.js

@@ -0,0 +1,53 @@
+import { DialogContentText, DialogTitle, TextField, Toolbar, Typography, Dialog, DialogContent, DialogActions } from "@mui/material";
+import Button from '@mui/material/Button';
+import React, { useState, useEffect } from "react";
+import Posts from "./Posts";
+
+export function FormDialog(props) {
+
+    const [open, setOpen] = useState(false);
+    const [postText, setPostText] = useState("");
+    const [video, setVideo] = useState("");
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    }
+
+    const handleClose = () => {
+        setOpen(false);
+    }
+
+    const postCheckin = () => {
+        let post = {
+            author: "current user",
+            text: { postText },
+            photos: [],
+            videos: video,
+            timestamp: "Sat 21/1/2023"
+        }
+
+        props.posts.push(post);
+        handleClose();
+    }
+
+    return (
+        <React.Fragment>
+
+            <Button color="secondary" variant="contained" onClick={handleClickOpen}>Daily Checkin</Button>
+            <Dialog open={open} onClose={handleClose}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <DialogTitle>Daily Checkin!</DialogTitle>
+                    <DialogContent>
+                        <DialogContentText>What do you want to update today?</DialogContentText>
+                        <TextField autoFocus multiline varian="standard" fullWidth onChange={(e) => setPostText(e.target.value)}></TextField>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button variant="contained" onClick={postCheckin}
+                            style={{ width: '100px', marginBottom:'5px' }}>Post</Button>
+                    </DialogActions> </div>
+            </Dialog>
+        </React.Fragment>
+
+    )
+}
+

frontend/src/components/HomeIcon.js

@@ -0,0 +1,9 @@
+function HomeIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+export default HomeIcon;

frontend/src/components/Posts.css

@@ -0,0 +1,6 @@
+#each-post {
+    border-style: groove;
+    border-radius: 3px;
+    width: 70%;
+    margin: 20px auto;
+}

frontend/src/components/Posts.js

@@ -0,0 +1,50 @@
+import { Button } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import './Posts.css';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Avatar from '@mui/material/Avatar';
+import { deepOrange, deepPurple } from '@mui/material/colors';
+
+
+const Post = (props) => {
+    return (
+        <Paper
+            sx={{
+                width: '70%',
+                margin: '30px auto',
+                display: 'flex',
+                flexDirection: 'column'
+            }}>
+            <div style={{ margin: '15px 20px' }}>
+                <div style={{
+                    display: 'flex',
+                    gap: '15px',
+                    alignItems: 'center'
+                }}>
+                    <Avatar style={{ display: 'inline-block' }} sx={{ bgcolor: 'primary' }}>
+                        {props.post.avatar}</Avatar>
+                    {props.post.author}
+                    <p style={{marginLeft:'auto', fontSize:'12px', color:'grey'}}>
+                        {props.post.timestamp}</p>
+                </div>
+                <p style={{marginBottom:'10px'}}>{props.post.text}</p>
+                {/* <Button variant="text"
+                    sx={{ padding: '2px' }}>Comment</Button> */}
+            </div>
+        </Paper>
+    )
+}
+
+const Posts = (props) => {
+    return (
+        <React.Fragment>
+            <ul>
+                {props.posts.map(post =>
+                    <Post key={props.posts.indexOf(post)} post={post} />)}
+            </ul>
+        </React.Fragment>
+    )
+}
+
+export default Posts;