2021-04-10 07:40:04 +02:00
import React , { useState } from "react" ;
2021-04-10 06:14:15 +02:00
import { useParams } from "react-router-dom" ;
import NavBar from "./shared/NavBar" ;
import NavBarUser from "./shared/NavBarUser" ;
import config from "../config" ;
2021-04-10 07:40:04 +02:00
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" ;
2021-04-10 06:14:15 +02:00
import feeds from "./dummyData/feeds.json" ;
2021-04-10 07:40:04 +02:00
import allCategories from "./dummyData/categories.json" ;
2021-04-10 06:14:15 +02:00
const feedCategories = Array . from ( new Set ( feeds . map ( i => i . tags ) . flat ( ) ) ) ;
function User ( ) {
const { username } = useParams ( ) ;
2021-04-10 07:40:04 +02:00
const [ interests , setInterests ] = useState ( feedCategories ) ;
const [ newInterests , setNewInterests ] = useState ( [ ] ) ;
const [ openDialog , setOpenDialog ] = useState ( false ) ;
2021-04-10 06:14:15 +02:00
// 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." ;
2021-04-10 07:40:04 +02:00
function handleOpen ( ) {
setOpenDialog ( true ) ;
}
function handleClose ( ) {
setNewInterests ( [ ] ) ;
setOpenDialog ( false ) ;
}
function handleAdd ( ) {
setInterests ( [ ... interests , ... newInterests ] ) ;
handleClose ( ) ;
}
2021-04-10 06:14:15 +02:00
return ( < >
< NavBar >
< NavBarUser / >
< / N a v B a r >
< 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 }
< / T y p o g r a p h y >
< Typography variant = "body2" component = "h2" >
@ { username }
< / T y p o g r a p h y >
< / C a r d C o n t e n t >
< / C a r d >
< / d i v >
< div className = "user-profile" >
< Card >
< CardContent >
< Typography gutterBottom variant = "h2" >
About Me
< / T y p o g r a p h y >
< Typography variant = "body1" >
{ about }
< / T y p o g r a p h y >
< / C a r d C o n t e n t >
< / C a r d >
< Card style = { { marginTop : "2em" } } >
< CardContent >
2021-04-10 07:40:04 +02:00
< div style = { { display : "flex" , justifyContent : "space-between" , alignItems : "center" } } >
< Typography gutterBottom variant = "h2" >
Interests
< / T y p o g r a p h y >
< IconButton onClick = { handleOpen } >
< Add / >
< / I c o n B u t t o n >
< / d i v >
2021-04-10 06:14:15 +02:00
< Typography variant = "body1" >
2021-04-10 07:40:04 +02:00
{ interests . map ( ( tag , idx ) => < Chip label = { tag } key = { idx } style = { { marginRight : "1em" , marginBottom : "1em" } } / > ) }
2021-04-10 06:14:15 +02:00
< / T y p o g r a p h y >
< / C a r d C o n t e n t >
< / C a r d >
< / d i v >
< / d i v >
2021-04-10 07:40:04 +02:00
< Dialog open = { openDialog } onClose = { handleClose } fullWidth = { true } maxWidth = "sm" >
< DialogTitle > Add Interests < / D i a l o g T i t l e >
< DialogContent >
< DialogContentText >
Add interests to follow here .
< / D i a l o g C o n t e n t T e x t >
< Autocomplete
multiple
limitTags = { 2 }
options = { allCategories }
renderInput = { ( params ) => (
< TextField { ... params } variant = "outlined" label = "Interests" placeholder = "Interests" / >
) }
value = { newInterests }
onChange = { ( _ , e ) => setNewInterests ( e ) }
/ >
< / D i a l o g C o n t e n t >
< DialogActions >
< Button onClick = { handleClose } color = "primary" >
Cancel
< / B u t t o n >
< Button disabled = { newInterests . length === 0 } onClick = { handleAdd } color = "primary" >
OK
< / B u t t o n >
< / D i a l o g A c t i o n s >
< / D i a l o g >
2021-04-10 06:14:15 +02:00
< / > ) ;
}
export default User ;