132 lines
3.4 KiB
JavaScript
132 lines
3.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import NavBar from "./shared/NavBar";
|
|
import NavBarUser from "./shared/NavBarUser";
|
|
import config from "../config";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
Chip,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
IconButton,
|
|
TextField,
|
|
Typography
|
|
} from "@material-ui/core";
|
|
import {
|
|
Autocomplete
|
|
} from "@material-ui/lab";
|
|
import { Add } from "@material-ui/icons";
|
|
|
|
import feeds from "./dummyData/feeds.json";
|
|
import allCategories from "./dummyData/categories.json";
|
|
const feedCategories = Array.from(new Set(feeds.map(i => i.tags).flat()));
|
|
|
|
function User() {
|
|
const { username } = useParams();
|
|
const [ interests, setInterests ] = useState(feedCategories);
|
|
const [ newInterests, setNewInterests ] = useState([]);
|
|
const [ openDialog, setOpenDialog ] = useState(false);
|
|
// 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.";
|
|
|
|
function handleOpen() {
|
|
setOpenDialog(true);
|
|
}
|
|
|
|
function handleClose() {
|
|
setNewInterests([]);
|
|
setOpenDialog(false);
|
|
}
|
|
|
|
function handleAdd() {
|
|
setInterests([...interests, ...newInterests]);
|
|
handleClose();
|
|
}
|
|
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>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<Typography gutterBottom variant="h2">
|
|
Interests
|
|
</Typography>
|
|
<IconButton onClick={handleOpen}>
|
|
<Add />
|
|
</IconButton>
|
|
</div>
|
|
<Typography variant="body1">
|
|
{interests.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em", marginBottom: "1em"}}/>)}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
<Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth="sm">
|
|
<DialogTitle>Add Interests</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
Add interests to follow here.
|
|
</DialogContentText>
|
|
<Autocomplete
|
|
multiple
|
|
limitTags={2}
|
|
options={allCategories}
|
|
renderInput={(params) => (
|
|
<TextField {...params} variant="outlined" label="Interests" placeholder="Interests" />
|
|
)}
|
|
value={newInterests}
|
|
onChange={(_, e) => setNewInterests(e)}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleClose} color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button disabled={newInterests.length === 0} onClick={handleAdd} color="primary">
|
|
OK
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>);
|
|
}
|
|
|
|
export default User;
|