Hack-To-Enable/outreaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add "Add Interests" button and dialog to User Page

Browse Source
This commit is contained in:
Ceda EI 2021-04-10 11:10:04 +05:30
parent d48ff6a25a
commit cd2ab7f962
4 changed files with 147 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

80
src/pages/User.js
View File

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

62
src/pages/dummyData/categories.json Normal file
View File

@ -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
View File

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