-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'hana.demo-ui' of https://github.com/RealEskalate/Practice…
… into hana.demo-ui
- Loading branch information
Showing
72 changed files
with
2,629 additions
and
22,593 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React from 'react' | ||
import NavBar from './NavBar' | ||
|
||
const Layout = ({children}) => { | ||
return ( | ||
<main> | ||
<NavBar /> | ||
{children} | ||
</main> | ||
) | ||
} | ||
|
||
export default Layout |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import AppBar from '@mui/material/AppBar' | ||
import Box from '@mui/material/Box' | ||
import Toolbar from '@mui/material/Toolbar' | ||
import Typography from '@mui/material/Typography' | ||
import Avatar from '@mui/material/Avatar' | ||
import LogoutIcon from '@mui/icons-material/Logout' | ||
import Button from '@mui/material/Button' | ||
import { useSession, signOut } from 'next-auth/react' | ||
import { useEffect, useState } from 'react' | ||
import { useRouter } from 'next/router' | ||
|
||
export default function ButtonAppBar() { | ||
const pages = ['Products', 'Pricing', 'Blog'] | ||
const { data: session } = useSession() | ||
const [user, setUser] = useState({ email: '', fullname: '', image: '' }) | ||
const router = useRouter() | ||
|
||
const logoutHandler = () => { | ||
signOut({ callbackUrl: `${window.location.origin}/auth/login` }) | ||
} | ||
|
||
useEffect(() => { | ||
if (session) { | ||
setUser({ | ||
...user, | ||
fullname: session.user.name, | ||
email: session.user.email, | ||
}) | ||
} | ||
}, [session, user]) | ||
|
||
const openProfile = () => { | ||
router.push('/mintesnot/profile') | ||
} | ||
const backToHome = () => { | ||
router.push('/') | ||
} | ||
return ( | ||
<Box sx={{ flexGrow: 1 }}> | ||
<AppBar position="static"> | ||
<Toolbar> | ||
<Typography | ||
variant="h6" | ||
component="div" | ||
sx={{ flexGrow: 1 }} | ||
onClick={backToHome} | ||
> | ||
Blog App (React Demo) | ||
</Typography> | ||
{session ? ( | ||
<> | ||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}> | ||
{pages.map((page) => ( | ||
<Button | ||
key={page} | ||
sx={{ my: 2, color: 'white', display: 'block' }} | ||
> | ||
{page} | ||
</Button> | ||
))} | ||
</Box> | ||
|
||
<Typography variant="h6" sx={{ margin: '5px' }}> | ||
{user.fullname} | ||
</Typography> | ||
<Avatar | ||
name="profile" | ||
alt="Remy Sharp" | ||
src={user.image} | ||
onClick={openProfile} | ||
/> | ||
<LogoutIcon | ||
sx={{ mx: '10px' }} | ||
onClick={logoutHandler} | ||
></LogoutIcon> | ||
</> | ||
) : ( | ||
'' | ||
)} | ||
</Toolbar> | ||
</AppBar> | ||
</Box> | ||
) | ||
} |
38 changes: 38 additions & 0 deletions
38
starter-project-web-react/components/mintesnot/blog/Comments.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import * as React from 'react' | ||
import { | ||
Box, | ||
Card, | ||
CardContent, | ||
TextField, | ||
List, | ||
InputAdornment, | ||
} from '@mui/material/Box' | ||
import AddCommentOutlined from '@mui/icons-material/AddCommentOutlined' | ||
|
||
export default function Comments({ blog }) { | ||
return ( | ||
<Card sx={{ minWidth: 275 }} variant="outlined"> | ||
<CardContent> | ||
<Box px={2}> | ||
<TextField | ||
fullWidth | ||
label="Leave a comment!" | ||
id="commentForm" | ||
variant="standard" | ||
InputProps={{ | ||
endAdornment: ( | ||
<InputAdornment position="end"> | ||
<AddCommentOutlined /> | ||
</InputAdornment> | ||
), | ||
}} | ||
/> | ||
</Box> | ||
<List | ||
className="comment-list" | ||
sx={{ width: '100%', maxHeight: 500, overflow: 'auto' }} | ||
></List> | ||
</CardContent> | ||
</Card> | ||
) | ||
} |
41 changes: 41 additions & 0 deletions
41
starter-project-web-react/components/mintesnot/blog/Details.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import React from 'react' | ||
import Moment from 'moment' | ||
import Typography from '@mui/material/Typography' | ||
import Image from 'next/image' | ||
|
||
const Details = ({ blog }) => { | ||
const formattedDate = Moment(blog.createdAt).format('MMMM DD, YYYY') | ||
return ( | ||
<div> | ||
<Typography variant="h2" component="div"> | ||
{blog.title} | ||
</Typography> | ||
<Typography variant="subtitle1" gutterBottom component="div" mb={2}> | ||
Posted on <em>`{formattedDate}`</em> by{' '} | ||
<b>{blog.authorUserId.fullName}</b> | ||
</Typography> | ||
|
||
<Typography variant="body1" gutterBottom mt={4}> | ||
{blog.content} | ||
</Typography> | ||
|
||
{blog.imageUrls ? ( | ||
blog.imageUrls.map((url, index) => ( | ||
<Image | ||
key={index} | ||
src={url} | ||
layout="responsive" | ||
width={'100%'} | ||
height={'50%'} | ||
objectFit="cover" | ||
alt="alternative" | ||
/> | ||
)) | ||
) : ( | ||
<></> | ||
)} | ||
</div> | ||
) | ||
} | ||
|
||
export default Details |
42 changes: 42 additions & 0 deletions
42
starter-project-web-react/components/mintesnot/blog/SingleComment.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import * as React from 'react'; | ||
import Box from '@mui/material/Box'; | ||
import Typography from '@mui/material/Typography'; | ||
import ListItem from '@mui/material/ListItem'; | ||
import Divider from '@mui/material/Divider'; | ||
import ListItemText from '@mui/material/ListItemText'; | ||
import ListItemAvatar from '@mui/material/ListItemAvatar'; | ||
import Avatar from '@mui/material/Avatar'; | ||
import Moment from 'moment'; | ||
|
||
|
||
export default function SingleComment({comment, divider}) { | ||
const formattedDate = Moment(comment.created_at).fromNow() | ||
return ( | ||
<Box> | ||
<ListItem alignItems="flex-start"> | ||
<ListItemAvatar> | ||
<Avatar alt={comment.user.fullName} src={comment.img} /> | ||
</ListItemAvatar> | ||
<ListItemText | ||
primary={comment.user.fullName} | ||
secondary={ | ||
<React.Fragment> | ||
<Typography | ||
sx={{ display: 'inline' }} | ||
component="span" | ||
variant="body2" | ||
color="text.primary" | ||
> | ||
{formattedDate} | ||
</Typography> | ||
{' — ' + comment.text} | ||
</React.Fragment> | ||
} | ||
/> | ||
</ListItem> | ||
{ | ||
divider && <Divider variant="inset" component="li" /> | ||
} | ||
</Box> | ||
); | ||
} |
58 changes: 58 additions & 0 deletions
58
starter-project-web-react/components/mintesnot/blog/blogCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import * as React from 'react' | ||
import Card from '@mui/material/Card' | ||
import Box from '@mui/material/Box' | ||
import CardHeader from '@mui/material/CardHeader' | ||
import CardContent from '@mui/material/CardContent' | ||
import Avatar from '@mui/material/Avatar' | ||
import Typography from '@mui/material/Typography' | ||
import { red } from '@mui/material/colors' | ||
import Link from 'next/link' | ||
import CardActions from '@mui/material/CardActions' | ||
import Button from '@mui/material/Button' | ||
|
||
export default function BlogCard({ blog }: any) { | ||
const { _id, title, content, authorUserId } = blog | ||
const author = authorUserId.fullName | ||
return ( | ||
<Link | ||
href={{ | ||
pathname: 'mintesnot/blog/[id]', | ||
query: { id: _id }, | ||
}} | ||
passHref | ||
as={`mintesnot/blog/${_id}`} | ||
> | ||
<Card sx={{ bgcolor: '#cfe8fc', maxWidth: '345', my: 4, mx: 0 }}> | ||
<Box display="inline-block" sx={{ m: 3 }}> | ||
<CardHeader | ||
avatar={ | ||
<Avatar sx={{ bgcolor: red[500] }} aria-label="recipe"> | ||
{author.charAt(0).toUpperCase()} | ||
</Avatar> | ||
} | ||
title={author.charAt(0).toUpperCase() + author.slice(1)} | ||
subheader="September 14, 2016" | ||
/> | ||
<CardContent> | ||
<Typography | ||
fontWeight="fontWeightBold" | ||
gutterBottom | ||
variant="h5" | ||
component="div" | ||
> | ||
{title} | ||
</Typography> | ||
<Typography variant="body2" color="text.secondary"> | ||
{content} | ||
</Typography> | ||
</CardContent> | ||
<CardActions> | ||
<a> | ||
<Button size="small">Read More</Button> | ||
</a> | ||
</CardActions> | ||
</Box> | ||
</Card> | ||
</Link> | ||
) | ||
} |
36 changes: 36 additions & 0 deletions
36
starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react' | ||
import { | ||
Box, | ||
DialogActions, | ||
Dialog, | ||
DialogContent, | ||
DialogTitle, | ||
useMediaQuery, | ||
} from '@mui/material' | ||
import { useTheme } from '@mui/material/styles' | ||
import BlogPostForm from './blogPostForm' | ||
|
||
export default function BlogPostDialog({ open, handleClose }: any) { | ||
const theme = useTheme() | ||
const fullScreen = useMediaQuery(theme.breakpoints.down('md')) | ||
|
||
return ( | ||
<Dialog | ||
fullScreen={fullScreen} | ||
open={open} | ||
onClose={handleClose} | ||
aria-labelledby="responsive-dialog-title" | ||
fullWidth | ||
> | ||
<DialogTitle id="responsive-dialog-title"> | ||
<Box ml={3}> | ||
<h3>Blog Post</h3> | ||
</Box> | ||
</DialogTitle> | ||
<DialogContent> | ||
<BlogPostForm handleClose={handleClose} /> | ||
</DialogContent> | ||
<DialogActions></DialogActions> | ||
</Dialog> | ||
) | ||
} |
54 changes: 54 additions & 0 deletions
54
starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React from 'react' | ||
import { Box, Button } from '@mui/material' | ||
import { Formik, Form } from 'formik' | ||
import * as Yup from 'yup' | ||
import BlogPostTextField from './blogPostTextField' | ||
|
||
type handle = () => void | ||
interface props { | ||
handleClose: handle | ||
} | ||
export default function BlogPostForm({ handleClose }: props) { | ||
const INITIAL_FORM_STATE = { | ||
title: '', | ||
content: '', | ||
} | ||
const FORM_VALIDATION = Yup.object().shape({ | ||
title: Yup.string().min(1).required(), | ||
content: Yup.string().required(), | ||
}) | ||
return ( | ||
<Box mb={5} mx={3}> | ||
<Formik | ||
initialValues={{ | ||
...INITIAL_FORM_STATE, | ||
}} | ||
validationSchema={FORM_VALIDATION} | ||
onSubmit={() => { | ||
handleClose() | ||
}} | ||
> | ||
<Form> | ||
<Box py={4}> | ||
<BlogPostTextField name="title" otherProps={{ label: 'Title' }} /> | ||
</Box> | ||
<Box pb={4}> | ||
<BlogPostTextField | ||
name="content" | ||
otherProps={{ | ||
fullWidth: true, | ||
id: 'outlined-multiline-static', | ||
label: 'Content', | ||
multiline: true, | ||
rows: 4, | ||
}} | ||
/> | ||
</Box> | ||
<Button type="submit" size="large" fullWidth variant="outlined"> | ||
POST | ||
</Button> | ||
</Form> | ||
</Formik> | ||
</Box> | ||
) | ||
} |
Oops, something went wrong.