From cd2ab7f96272ee531402fe051e5cfcf896e5a4d5 Mon Sep 17 00:00:00 2001 From: Ceda EI Date: Sat, 10 Apr 2021 11:10:04 +0530 Subject: [PATCH] Add "Add Interests" button and dialog to User Page --- package.json | 1 + src/pages/User.js | 80 ++++++++++++++++++++++++++--- src/pages/dummyData/categories.json | 62 ++++++++++++++++++++++ yarn.lock | 11 ++++ 4 files changed, 147 insertions(+), 7 deletions(-) create mode 100644 src/pages/dummyData/categories.json diff --git a/package.json b/package.json index 83fffc7..c8389cb 100644 --- a/package.json +++ b/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", diff --git a/src/pages/User.js b/src/pages/User.js index f7a75e6..5766970 100644 --- a/src/pages/User.js +++ b/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 (<> @@ -48,17 +84,47 @@ function User() { - - Interests - +
+ + Interests + + + + +
- {feedCategories.map((tag, idx) => )} + {interests.map((tag, idx) => )} - + + Add Interests + + + Add interests to follow here. + + ( + + )} + value={newInterests} + onChange={(_, e) => setNewInterests(e)} + /> + + + + + + ); } diff --git a/src/pages/dummyData/categories.json b/src/pages/dummyData/categories.json new file mode 100644 index 0000000..3f37a33 --- /dev/null +++ b/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" +] diff --git a/yarn.lock b/yarn.lock index 96cabd1..0f7dafc 100644 --- a/yarn.lock +++ b/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"