Add user page

This commit is contained in:
Ceda EI 2021-04-10 09:44:15 +05:30
parent d7c3aa61a5
commit b7349b3f93
7 changed files with 98 additions and 7 deletions

View File

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

View File

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

View File

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

65
src/pages/User.js Normal file
View File

@ -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;

View File

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

View File

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

View File

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