Editor mode

components/AdminProvider.tsx

@@ -0,0 +1,28 @@
+import { setAdmin } from "redux/slices/admin";
+import { useAppDispatch } from "redux/typesHooks";
+
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
+
+interface Props {
+  children: JSX.Element;
+}
+
+const getAdmin = (): boolean | undefined => {
+  return localStorage.admin === "true";
+};
+
+const getInitialAdmin = (): boolean => getAdmin() || false;
+
+const AdminProvider = ({ children }: Props) => {
+  const dispatch = useAppDispatch();
+
+  useIsomorphicLayoutEffect(() => {
+    const admin = getInitialAdmin();
+
+    dispatch(setAdmin(admin));
+  }, [dispatch]);
+
+  return children;
+};
+
+export default AdminProvider;

components/Intro.tsx

@@ -1,30 +1,84 @@
 import config from "config";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { setAdmin } from "redux/slices/admin";
+import { useAppSelector } from "redux/typesHooks";
 
-const Intro = () => (
-  <section className="intro-section">
-    <div className="container">
-      <div className="intro-content">
-        <div className="intro-avatar">
-          <div className="image">
-            <img
-              src="/images/author-avatar.jpg"
-              alt="author-avatar"
-              width={90}
-              height={90}
-            />
+const Intro = () => {
+  const dispatch = useDispatch();
+  const admin = useAppSelector((state) => state.admin);
+
+  const [isFirstRender, setIsFirstRender] = useState(true);
+
+  const handleClick = () => {
+    if (admin === true) {
+      dispatch(setAdmin(false));
+    } else {
+      dispatch(setAdmin(true));
+    }
+  };
+
+  useEffect(() => {
+    const imageWrapper = document.querySelector("div.image-avatar");
+    const editIcon = document.querySelector("img.editor-icon");
+
+    if (admin) {
+      imageWrapper?.setAttribute("admin", "");
+      editIcon?.setAttribute("admin", "");
+      setIsFirstRender(false);
+    }
+    if (!admin && isFirstRender === false) {
+      imageWrapper?.setAttribute("closing", "");
+      editIcon?.setAttribute("closing", "");
+      imageWrapper?.addEventListener(
+        "animationend",
+        () => {
+          editIcon?.removeAttribute("closing");
+          imageWrapper?.removeAttribute("closing");
+        },
+        { once: true }
+      );
+      imageWrapper?.removeAttribute("admin");
+      editIcon?.removeAttribute("admin");
+    }
+  }, [admin, isFirstRender]);
+
+  return (
+    <section className="intro-section">
+      <div className="container">
+        <div className="intro-content">
+          <div className="intro-avatar">
+            <div className="image-avatar">
+              <img
+                onDoubleClick={handleClick}
+                src="/images/author-avatar.jpg"
+                alt="author-avatar"
+                width="90"
+                height="90"
+              />
+            </div>
+            <div className="image-editor">
+              <img
+                className="editor-icon"
+                src="/images/editor-icon.svg"
+                alt="edit"
+                width="19"
+                height="19"
+              />
+            </div>
+            <div className="name">{config.author_name}</div>
+            <div className="job">{config.author_position}</div>
+          </div>
+          <div className="intro-text">
+            <h1>Hello, I am {config.author_name}</h1>
+            <p style={{ whiteSpace: "break-spaces" }}>
+              {config.site_description}
+            </p>
           </div>
-          <div className="name">{config.author_name}</div>
-          <div className="job">{config.author_position}</div>
-        </div>
-        <div className="intro-text">
-          <h1>Hello, I am {config.author_name}</h1>
-          <p style={{ whiteSpace: "break-spaces" }}>
-            {config.site_description}
-          </p>
         </div>
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 export default Intro;

components/Post/LatestPosts.tsx

@@ -1,7 +1,4 @@
-import {
-  isPostADraft,
-  isPostInTheFuture,
-} from "helpers/checkOfDraftOrFuturePost";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import { PostDocumentWithoutContent } from "interfaces";
 import Image from "next/image";
 import Link from "next/link";
@@ -28,11 +25,8 @@ const LatestPosts = ({ latestPosts }: Props) => {
               height="102"
               sizes="100vw"
               style={{
-                filter:
-                  isPostADraft(post) || isPostInTheFuture(post)
-                    ? "grayscale(50%)"
-                    : "none",
-
+                filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
+
                 objectFit: "cover",
               }}
             />

components/Post/PostContent.tsx

@@ -3,6 +3,7 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import toHumanReadableDate from "helpers/toHumanReadableDate";
 import { PostDocument } from "interfaces";
 import Head from "next/head";
@@ -53,10 +54,7 @@ const PostContent = ({ post }: Props) => {
           width={790}
           height={394}
           style={{
-            filter:
-              isPostADraft(post) || isPostInTheFuture(post)
-                ? "grayscale(50%)"
-                : "none",
+            filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
             borderRadius: "3px",
           }}
         />

components/PostCard.tsx

@@ -2,6 +2,7 @@ import {
   isPostADraft,
   isPostInTheFuture,
 } from "helpers/checkOfDraftOrFuturePost";
+import isUpcomingPost from "helpers/isUpcomingPost";
 import { PostDocumentWithoutContent } from "interfaces";
 import Image from "next/image";
 import Link from "next/link";
@@ -57,9 +58,7 @@ const PostCard = ({ post }: Props) => {
 
       <div
         className={`posts-list-block ${
-          isPostADraft(post) || isPostInTheFuture(post)
-            ? "posts-list-block-draft-or-future"
-            : ""
+          isUpcomingPost(post) ? "upcoming-posts-list-block" : ""
         }`}
       >
         <div className="content">
@@ -75,10 +74,7 @@ const PostCard = ({ post }: Props) => {
               height="378"
               sizes="100vw"
               style={{
-                filter:
-                  isPostADraft(post) || isPostInTheFuture(post)
-                    ? "grayscale(50%)"
-                    : "none",
+                filter: isUpcomingPost(post) ? "grayscale(50%)" : "none",
 
                 objectFit: "cover",
               }}

components/Tags.tsx

@@ -5,10 +5,12 @@ import { useAppDispatch, useAppSelector } from "redux/typesHooks";
 
 interface Props {
   uniqueTags: string[];
+  countOfPostsInTags: number[];
 }
 
-const Tags = ({ uniqueTags }: Props) => {
+const Tags = ({ uniqueTags, countOfPostsInTags }: Props) => {
   const selectedTags = useAppSelector((state) => state.selectedTags);
+  const admin = useAppSelector((state) => state.admin);
 
   const dispatch = useAppDispatch();
 
@@ -27,7 +29,7 @@ const Tags = ({ uniqueTags }: Props) => {
       >
         ALL
       </li>
-      {uniqueTags.map((uniqueTag) => (
+      {uniqueTags.map((uniqueTag, index) => (
         <li
           key={uniqueTag}
           className={selectedTags.includes(uniqueTag) ? "active" : ""}
@@ -44,6 +46,7 @@ const Tags = ({ uniqueTags }: Props) => {
           }}
         >
           {uniqueTag}
+          {admin && ` [${countOfPostsInTags[index]}]`}
         </li>
       ))}
     </ul>

components/UpcomingPosts.tsx

@@ -0,0 +1,37 @@
+import { Box, Divider, Typography } from "@mui/material";
+import { PostDocumentWithoutContent } from "interfaces";
+
+import PostCard from "./PostCard";
+
+interface Props {
+  posts: PostDocumentWithoutContent[];
+}
+
+const UpcomingPosts = ({ posts }: Props) => (
+  <Box sx={{ mb: 17.5 }}>
+    <Box>
+      <Typography
+        sx={(theme) => ({
+          color: theme.palette.mode === "light" ? "#3a3a3a" : "#fff",
+          lineHeight: 1.28,
+          fontWeight: 700,
+          fontSize: "43px",
+          mb: 9,
+          ["@media (max-width: 480px)"]: {
+            fontSize: "28px",
+          },
+        })}
+      >
+        Upcoming Posts
+      </Typography>
+    </Box>
+    <ul className="posts-list">
+      {posts.map((post, index) => (
+        <PostCard key={index} post={post} />
+      ))}
+    </ul>
+    <Divider sx={{ position: "absolute", width: "100%", left: 0 }} />
+  </Box>
+);
+
+export default UpcomingPosts;

helpers/isUpcomingPost.ts

@@ -0,0 +1,7 @@
+import { PostDocumentWithoutContent } from "interfaces";
+
+import { isPostADraft, isPostInTheFuture } from "./checkOfDraftOrFuturePost";
+
+export default function isUpcomingPost(post: PostDocumentWithoutContent) {
+  return isPostADraft(post) || isPostInTheFuture(post);
+}

helpers/markdownDocumentsReader.ts

@@ -3,7 +3,7 @@ import matter from "gray-matter";
 import { PostDocument, PostDocumentWithoutContent } from "interfaces";
 import { join } from "path";
 
-import { isPostADraft, isPostInTheFuture } from "./checkOfDraftOrFuturePost";
+import isUpcomingPost from "./isUpcomingPost";
 
 const documentsDirectory = join(process.cwd(), "content/posts");
 
@@ -31,7 +31,7 @@ export function getAllPostDocuments(): PostDocumentWithoutContent[] {
         return true;
       }
 
-      if (isPostADraft(post) || isPostInTheFuture(post)) {
+      if (isUpcomingPost(post)) {
         return false;
       }
 
@@ -45,3 +45,17 @@ export function getAllPostDocuments(): PostDocumentWithoutContent[] {
 
   return JSONSerialize(docs);
 }
+
+export function getUpcomingPosts(): PostDocumentWithoutContent[] {
+  const slugs = fs.readdirSync(documentsDirectory);
+  const docs = slugs
+    .map((slug) => getPostDocumentBySlug(slug))
+    .filter((post: PostDocument) => isUpcomingPost(post))
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
+    .map((post) => {
+      const { content, ...postWithoutContent } = post;
+      return postWithoutContent;
+    });
+
+  return JSONSerialize(docs);
+}

pages/_app.tsx

@@ -4,16 +4,19 @@ import type { AppProps } from "next/app";
 import { Provider } from "react-redux";
 import store from "redux/store";
 
+import AdminProvider from "@/components/AdminProvider";
 import GoogleAnalytics from "@/components/GoogleAnalytics";
 import ThemeProvider from "@/components/MUI/ThemeProvider";
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
   <Provider store={store}>
     <GoogleAnalytics />
 
-    <ThemeProvider>
-      <Component {...pageProps} />
-    </ThemeProvider>
+    <AdminProvider>
+      <ThemeProvider>
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </AdminProvider>
   </Provider>
 );
 

pages/api/getUpcomingPosts.ts

@@ -0,0 +1,8 @@
+import { getUpcomingPosts } from "helpers/markdownDocumentsReader";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const posts = getUpcomingPosts();
+
+  res.status(200).json(posts);
+}