Rumi

client/package.json

@@ -58,5 +58,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://10.100.162.87:8000"
+  "proxy": "http://192.168.31.68:8000"
 }

client/src/components/blog/addPostForm.jsx

@@ -91,7 +91,7 @@ const AddPostForm = (props) => {
   };
 
   return (
-    <Box p={10} bg="white">
+    <Box p={10} bg="white" width="2xl">
       <Heading textAlign="center" size="lg">
         Create a Post
       </Heading>

client/src/components/blog/blogskeleton.jsx

@@ -0,0 +1,19 @@
+import { Box, Flex, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
+
+const BlogSkeleton = () => {
+  return (
+    <Flex direction="column" height="75vh">
+      <Box padding="6" boxShadow="lg" width="3xl" bg="whitesmoke" mt="2">
+        <SkeletonCircle size="10" />
+        <SkeletonText mt="4" noOfLines={4} spacing="4" />
+      </Box>
+
+      <Box padding="6" boxShadow="lg" width="3xl" bg="whitesmoke" mt="5">
+        <SkeletonCircle size="10" />
+        <SkeletonText mt="4" noOfLines={4} spacing="4" />
+      </Box>
+    </Flex>
+  );
+};
+
+export default BlogSkeleton;

client/src/components/blog/showComment.jsx

@@ -5,6 +5,7 @@ import {
   Flex,
   FormControl,
   FormLabel,
+  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -21,14 +22,13 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { AuthContext } from "../../contexts/authContext";
-import { useContext, useState, useEffect } from "react";
-import { ChevronDownIcon, TriangleDownIcon } from "@chakra-ui/icons";
-import { BsThreeDots } from "react-icons/bs";
+import { useContext, useState } from "react";
 import axios from "axios";
 import { useHistory } from "react-router-dom";
 import { HtmlEditor, MenuBar } from "@aeaton/react-prosemirror";
 import { options, menu } from "@aeaton/react-prosemirror-config-default";
 import { Link } from "react-router-dom";
+import { AiOutlineEllipsis } from "react-icons/ai";
 
 const BlogComment = (comment) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -108,7 +108,12 @@ const BlogComment = (comment) => {
       {(comment.user.reg_no === user.reg_no ||
         ["admin", "superadmin"].includes(user.credential.role)) && (
         <Menu>
-          <MenuButton ml={3} as={Button} rightIcon={<ChevronDownIcon />} />
+          <MenuButton
+            ml={3}
+            as={IconButton}
+            isRound="true"
+            rightIcon={<AiOutlineEllipsis size={30} />}
+          />
           <MenuList>
             {comment.user.reg_no === user.reg_no && (
               <MenuItem onClick={onOpen}>Edit</MenuItem>

client/src/components/blog/singleBlog.jsx

@@ -1,9 +1,4 @@
-import {
-  ChatIcon,
-  ChevronDownIcon,
-  DeleteIcon,
-  TriangleDownIcon,
-} from "@chakra-ui/icons";
+import { ChatIcon } from "@chakra-ui/icons";
 import {
   Avatar,
   Box,
@@ -13,7 +8,6 @@ import {
   FormControl,
   FormLabel,
   IconButton,
-  Image,
   Input,
   Menu,
   MenuButton,
@@ -26,17 +20,15 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Select,
   Spacer,
   Text,
-  Textarea,
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
-import Layout from "../generic/layout";
+
 import ShowComment from "./showComment";
 import WriteComment from "./writeComment";
-import { useContext, useState, useEffect } from "react";
+import { useContext, useState } from "react";
 import BlogCarosuel from "./blogCarosuel";
 import React from "react";
 import { useHistory } from "react-router-dom";
@@ -45,16 +37,16 @@ import axios from "axios";
 import { HtmlEditor, MenuBar } from "@aeaton/react-prosemirror";
 import { options, menu } from "@aeaton/react-prosemirror-config-default";
 import { Link } from "react-router-dom";
+import { AiOutlineEllipsis } from "react-icons/ai";
 
 const SingleBlog = (blog) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const initialRef = React.useRef();
   const [editedBlog, setEditedBlog] = useState(blog);
   const [comments, setComments] = useState([]);
-  const [loadPromise, setLoadPromise] = useState(false);
   const [requestState, setRequestState] = useState("none");
   const [deleteRequestState, setDeleteRequestState] = useState("none");
-  const firstField = React.useRef();
+
   const toast = useToast();
   const history = useHistory();
   const { unauthorizedHandler, user } = useContext(AuthContext);
@@ -143,9 +135,15 @@ const SingleBlog = (blog) => {
         {(blog.reg_no === user.reg_no ||
           ["admin", "superadmin"].includes(user.credential.role)) && (
           <Menu>
-            <MenuButton as={Button} rightIcon={<TriangleDownIcon />} />
+            <MenuButton
+              as={IconButton}
+              isRound
+              rightIcon={<AiOutlineEllipsis size={40} />}
+            />
             <MenuList>
-              {blog.reg_no === user.reg_no && <MenuItem onClick={onOpen}>Edit</MenuItem>}
+              {blog.reg_no === user.reg_no && (
+                <MenuItem onClick={onOpen}>Edit</MenuItem>
+              )}
               <MenuItem onClick={handleDelete}>Delete</MenuItem>
             </MenuList>
           </Menu>

client/src/pages/approveBlog.jsx

@@ -1,13 +1,10 @@
 import Layout from "../components/generic/layout";
-import { useContext, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import axios from "axios";
-import { AuthContext } from "../contexts/authContext";
 import ApproveBlogCard from "../components/blog/approveBlogCard";
 import { Flex } from "@chakra-ui/react";
 const ApproveBlog = () => {
   const [unApprovedBlogs, setunApprovedBlogs] = useState([]);
-  const { unauthorizedHandler } = useContext(AuthContext);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     axios

client/src/pages/myBlog.jsx

@@ -4,10 +4,12 @@ import Layout from "../components/generic/layout";
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { useHistory } from "react-router-dom";
+import BlogSkeleton from "../components/blog/blogskeleton";
 
 const MyBlog = () => {
   const [blogs, setBlogs] = useState([]);
   const history = useHistory();
+  const [requestState, setRequestState] = useState("loading");
 
   const addPost = () => {
     history.push("/addpost");
@@ -17,12 +19,15 @@ const MyBlog = () => {
     axios
       .get("/api/blogs/true")
       .then((res) => {
+        console.log(res.data);
         setBlogs(res.data);
+        setRequestState("loaded");
       })
       .catch((err) => {
         console.log(err);
       });
   }, []);
+
   return (
     <Layout>
       <Flex align="center" direction="column" overflowY="scroll">
@@ -33,12 +38,11 @@ const MyBlog = () => {
             placeholder="Create a blog"
           />
         </Box>
+        {requestState === "loading" && <BlogSkeleton />}
 
-        {blogs
-          .sort((a, b) => b.id - a.id)
-          .map((blog) => (
-            <SingleBlog {...blog} key={blog.id} />
-          ))}
+        {blogs.map((blog) => (
+          <SingleBlog {...blog} key={blog.id} />
+        ))}
       </Flex>
     </Layout>
   );

client/src/pages/notice.jsx

@@ -1,17 +1,19 @@
-import { Box, Center, Heading } from "@chakra-ui/react";
+import { Box, Center, Heading, Skeleton, Stack } from "@chakra-ui/react";
 import SingleNotice from "../components/notice/singleNotice";
 import Layout from "../components/generic/layout";
 import { useState, useEffect } from "react";
 import axios from "axios";
 
 const Notice = () => {
   const [notices, setNotices] = useState([]);
+  const [requestState, setRequestState] = useState("loading");
 
   useEffect(() => {
     axios
       .get("/api/notice")
       .then((res) => {
         setNotices(res.data);
+        setRequestState("loaded");
       })
       .catch((err) => {});
   }, []);
@@ -22,7 +24,17 @@ const Notice = () => {
         <Box align="center" justifyContent="center">
           <Heading margin="3">Notice Board</Heading>
         </Box>
+
         <Center>
+          {requestState === "loading" && (
+            <Stack>
+              <Skeleton width="4xl">
+                <div>contents wrapped</div>
+                <div>won't be visible</div>
+              </Skeleton>
+            </Stack>
+          )}
+
           <Box bg="white" p={2} borderRadius="md" shadow="xl">
             {notices.map((notice) => (
               <SingleNotice {...notice} key={notice.id} />

client/src/pages/noticeFullView.jsx

@@ -45,6 +45,12 @@ const NoticeFullView = () => {
   const [loadPromise, setLoadPromise] = useState(false);
   const key = useParams().id;
 
+  const goExternal = (e) => {
+    window.location.replace(
+      `/192.168.31.68:8000/${editedNotice.attachment[0]}`
+    );
+  };
+
   useEffect(() => {
     setLoading(true);
     const loadFirst = async () => {
@@ -113,6 +119,18 @@ const NoticeFullView = () => {
               {editedNotice.description}
             </Text>
 
+            {editedNotice.attachment.length > 0 && (
+              <Flex
+                _hover={{ shadow: "dark-lg" }}
+                textAlign="center"
+                width="min"
+              >
+                <Button bg="Highlight" onClick={goExternal}>
+                  Attachment
+                </Button>
+              </Flex>
+            )}
+
             <Modal
               initialFocusRef={initialRef}
               isOpen={isOpen}