Natnael.demo practice

starter-project-web-react/components/NavBar.jsx

@@ -27,7 +27,7 @@ export default function ButtonAppBar() {
         email: session.user.email,
       })
     }
-  }, [])
+  }, [session, user])
 
   const openProfile = () => {
     router.push('/profile')

starter-project-web-react/components/mintesnot/Layout.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import NavBar from './NavBar'
+
+const Layout = ({children}) => {
+  return (
+    <main>
+        <NavBar />
+        {children}
+    </main>
+  )
+}
+
+export default Layout

starter-project-web-react/components/mintesnot/NavBar.jsx

@@ -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>
+  )
+}

starter-project-web-react/components/mintesnot/blog/Comments.jsx

@@ -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>
+  )
+}

starter-project-web-react/components/mintesnot/blog/Details.jsx

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

starter-project-web-react/components/mintesnot/blog/SingleComment.jsx

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

starter-project-web-react/components/mintesnot/blog/blogCard.tsx

@@ -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>
+  )
+}

starter-project-web-react/components/mintesnot/blog/blogPostDialog.tsx

@@ -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>
+  )
+}

starter-project-web-react/components/mintesnot/blog/blogPostForm.tsx

@@ -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>
+  )
+}