Add user page

src/App.css

@@ -22,3 +22,18 @@
   justify-content: space-evenly;
   width: 60%;
 }
+
+.user {
+  margin: 2em 10%;
+  width: 80%;
+}
+
+.user-card {
+  width: 20%;
+  margin-right: 5%;
+  text-align: center;
+}
+
+.user-profile {
+  width: 75%;
+}

src/App.js

@@ -1,4 +1,4 @@
-import { React } from "react";
+import React from "react";
 import "./App.css";
 import {
 	BrowserRouter as Router,
@@ -7,8 +7,7 @@ import {
 	Redirect
 } from "react-router-dom";
 
-import Home from "./pages/Home";
-import Login from "./pages/Login";
+import { Home, Login, User } from "./pages";
 
 function App() {
 	return (
@@ -23,6 +22,9 @@ function App() {
 				<Route path="/home">
 					<Home />
 				</Route>
+				<Route path="/user/:username">
+					<User />
+				</Route>
 			</Switch>
 		</Router>
 	);

src/pages/Home.js

@@ -105,7 +105,7 @@ function App() {
 				{visibleFeeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
 			</div>
 			<div className="filters">
-				<div style={{display: "flex", justifyContent: "space-between"}}>
+				<div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
 					<Typography variant="h5" component="p">Filters</Typography>
 					<IconButton style={{color: red.A200}} onClick={() => setCategories([])}>
 						<Delete />

src/pages/User.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import NavBar from "./shared/NavBar";
+import NavBarUser from "./shared/NavBarUser";
+import config from "../config";
+import {Card, CardContent, CardMedia, Chip, Typography} from "@material-ui/core";
+
+import feeds from "./dummyData/feeds.json";
+const feedCategories = Array.from(new Set(feeds.map(i => i.tags).flat()));
+
+function User() {
+	const { username } = useParams();
+	// TODO: Grab these values from the API
+	const name = "Ceda EI";
+	const about = "I am a 20-year old student from India who has an interest in system administration and programming. I am a Linux user who likes to rice his desktop and have some experience managing servers.";
+	return (<>
+		<NavBar>
+			<NavBarUser />
+		</NavBar>
+		<div className="user base">
+			<div className="user-card">
+				<Card>
+					<CardMedia
+						image={`${config.profileServer}/${username}.jpg`}
+						title={username}
+						component="img"
+					/>
+					<CardContent>
+						<Typography gutterBottom variant="h2" component="h1">
+							{name}
+						</Typography>
+						<Typography variant="body2" component="h2">
+							@{username}
+						</Typography>
+					</CardContent>
+				</Card>
+			</div>
+			<div className="user-profile">
+				<Card>
+					<CardContent>
+						<Typography gutterBottom variant="h2">
+							About Me
+						</Typography>
+						<Typography variant="body1">
+							{about}
+						</Typography>
+					</CardContent>
+				</Card>
+				<Card style={{ marginTop: "2em" }}>
+					<CardContent>
+						<Typography gutterBottom variant="h2">
+							Interests
+						</Typography>
+						<Typography variant="body1">
+							{feedCategories.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em", marginBottom: "1em"}}/>)}
+						</Typography>
+					</CardContent>
+				</Card>
+			</div>
+
+		</div>
+	</>);
+}
+
+export default User;

src/pages/index.js

@@ -0,0 +1,3 @@
+export { default as Home } from "./Home";
+export { default as Login } from "./Login";
+export { default as User } from "./User";

src/pages/shared/NavBarUser.js

@@ -26,6 +26,11 @@ function NavBarUser() {
 		history.push("/");
 	}
 
+	function profile() {
+		handleClose();
+		history.push("/user/ceda_ei");
+	}
+
 	return (
 		<div>
 			<IconButton
@@ -52,8 +57,8 @@ function NavBarUser() {
 				open={open}
 				onClose={handleClose}
 			>
-				<MenuItem onClick={handleClose}>Profile</MenuItem>
-				<MenuItem onClick={handleClose}>My account</MenuItem>
+				<MenuItem onClick={profile}>Profile</MenuItem>
+				<MenuItem onClick={profile}>My account</MenuItem>
 				<MenuItem onClick={logout}>Logout</MenuItem>
 			</Menu>
 		</div>

src/sample.config.js

@@ -1,4 +1,5 @@
 const config = {
-	thumbnailServer: "http://localhost:8000"
+	thumbnailServer: "http://localhost:8000",
+	profileServer: "http://localhost:8001",
 };
 export default config;