Add "Add Interests" button and dialog to User Page

package.json

@@ -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",

src/pages/User.js

@@ -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>
+						<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>
 	</>);
 }
 

src/pages/dummyData/categories.json

@@ -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"
+]

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"