Skip to content

Commit

Permalink
Merge branch 'hana.demo-ui' of https://github.com/RealEskalate/Practice
Browse files Browse the repository at this point in the history
… into hana.demo-ui
  • Loading branch information
Hana-Workneh committed Aug 10, 2022
2 parents e8b76b5 + ff6816c commit 8087b48
Show file tree
Hide file tree
Showing 72 changed files with 2,629 additions and 22,593 deletions.
2 changes: 1 addition & 1 deletion starter-project-web-react/components/NavBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function ButtonAppBar() {
email: session.user.email,
})
}
}, [])
}, [session, user])

const openProfile = () => {
router.push('/profile')
Expand Down
13 changes: 13 additions & 0 deletions starter-project-web-react/components/mintesnot/Layout.jsx
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
84 changes: 84 additions & 0 deletions starter-project-web-react/components/mintesnot/NavBar.jsx
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 starter-project-web-react/components/mintesnot/blog/Comments.jsx
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 starter-project-web-react/components/mintesnot/blog/Details.jsx
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
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 starter-project-web-react/components/mintesnot/blog/blogCard.tsx
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>
)
}
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>
)
}
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>
)
}
Loading

0 comments on commit 8087b48

Please sign in to comment.