Add "Add Interests" button and dialog to User Page
This commit is contained in:
parent
d48ff6a25a
commit
cd2ab7f962
|
|
@ -5,6 +5,7 @@
|
|||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.57",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,54 @@
|
|||
import React from "react";
|
||||
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 {Card, CardContent, CardMedia, Chip, Typography} from "@material-ui/core";
|
||||
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 />
|
||||
|
|
@ -48,17 +84,47 @@ function User() {
|
|||
</Card>
|
||||
<Card style={{ marginTop: "2em" }}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h2">
|
||||
Interests
|
||||
</Typography>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Typography gutterBottom variant="h2">
|
||||
Interests
|
||||
</Typography>
|
||||
<IconButton onClick={handleOpen}>
|
||||
<Add />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Typography variant="body1">
|
||||
{feedCategories.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em", marginBottom: "1em"}}/>)}
|
||||
{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>
|
||||
</>);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
[
|
||||
"Signals & Systems",
|
||||
"Basic Electronics",
|
||||
"Basic Electrical Engineering",
|
||||
"Discrete Mathematics",
|
||||
"Data Structures",
|
||||
"Probability Theory & Statistics",
|
||||
"Software Engineering",
|
||||
"Communication Systems",
|
||||
"Control Systems",
|
||||
"Computer Organization & Architecture",
|
||||
"Design & Analysis of Algorithms",
|
||||
"Microprocessor",
|
||||
"Operating Systems",
|
||||
"Data Base Management Systems",
|
||||
"Data Communication",
|
||||
"Computer Networks",
|
||||
"Theory of Computation",
|
||||
"Computer Graphics",
|
||||
"Java Programming",
|
||||
"Compiler Design",
|
||||
"Network Security",
|
||||
"Compiler Design",
|
||||
"Industrial Organization & Management",
|
||||
"Simulation & Modeling",
|
||||
"Graph Theory",
|
||||
"Digital Signal Processing",
|
||||
"Multimedia Technology",
|
||||
"Logic Programming",
|
||||
"Embedded Systems",
|
||||
"Advanced Java & Android Programming",
|
||||
"System on Chip (SoC)",
|
||||
"Advanced Internet Technologies",
|
||||
"Wireless Communication",
|
||||
"Fault Tolerant Computing",
|
||||
"Image Processing",
|
||||
"System Design using HDL",
|
||||
"Real Time Systems",
|
||||
"Unix & Shell Programming",
|
||||
"High Speed Networks",
|
||||
"Advanced Algorithms",
|
||||
"Reconfigurable Computing",
|
||||
"Computer Vision",
|
||||
"Advanced Computer Networks",
|
||||
"Advanced Computer Graphics",
|
||||
"Advanced DBMS",
|
||||
"Advanced Computer Architecture",
|
||||
"Advanced Compilation Techniques",
|
||||
"Principles of Cryptography",
|
||||
"Neural Network",
|
||||
"Pervasive Computing",
|
||||
"Distributed and Parallel Computing",
|
||||
"Cloud Computing",
|
||||
"Software Project Management",
|
||||
"Big Data",
|
||||
"Cyber laws and Forensics",
|
||||
"Expert Systems",
|
||||
"Mobile Computing",
|
||||
"Green Computing",
|
||||
"Numerical Methods",
|
||||
"Advanced Java"
|
||||
]
|
||||
11
yarn.lock
11
yarn.lock
|
|
@ -1446,6 +1446,17 @@
|
|||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
|
||||
"@material-ui/lab@^4.0.0-alpha.57":
|
||||
version "4.0.0-alpha.57"
|
||||
resolved "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
|
||||
integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@material-ui/utils" "^4.11.2"
|
||||
clsx "^1.0.4"
|
||||
prop-types "^15.7.2"
|
||||
react-is "^16.8.0 || ^17.0.0"
|
||||
|
||||
"@material-ui/styles@^4.11.3":
|
||||
version "4.11.3"
|
||||
resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"
|
||||
|
|
|
|||
Loading…
Reference in New Issue