Subscriber dashboard

All users who signin will get a role of Subscriber by default. We will allow subscribers to update their profile and also leave comments. Let's create a dashboard for subscribers.

// server
router.get("/current-subscriber", requireSignin, currentUser);

Create SubscriberNav, SubscriberLayout and add few pages (comments, profile) for subscriber.

// redirect to /subsscriber on login
if (data.user?.role === "Admin") {
    router.push("/admin");
  } else if (data.user?.role === "Author") {
    router.push("/author");
  } else {
    router.push("/subscriber");
}

// components/nav/SubscriberNav
import React, { useState, useContext, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  CommentOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Layout } from "antd";
import Link from "next/link";
import { useWindowWidth } from "@react-hook/window-size";

const { Sider } = Layout;

const { SubMenu } = Menu;

const SubscriberNav = () => {
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [current, setCurrent] = useState("");

  useEffect(() => {
    process.browser && setCurrent(window.location.pathname);
  }, [process.browser && window.location.pathname]);

  // console.log("##### NAV ##### ", current);

  // detect window size and collapse sidebar
  const onlyWidth = useWindowWidth();
  useEffect(() => {
    console.log("onlyWidth", onlyWidth);
    if (onlyWidth < 800) {
      setCollapsed(true);
    } else if (onlyWidth > 800) {
      setCollapsed(false);
    }
  }, [onlyWidth < 800]);

  const activeName = (name) => `nav-link ${current === name && "active"}`;

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      style={{
        marginTop: 50,
      }}
    >
      <Menu
        // defaultSelectedKeys={["1"]}
        mode="inline"
        inlineCollapsed={collapsed}
      >
        <Menu.Item key="19" icon={<SettingOutlined />}>
          <Link href="/subscriber">
            <a className={activeName("/subscriber")}>Dashboard</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="12" icon={<CommentOutlined />}>
          <Link href="/subscriber/comments">
            <a className={activeName("/subscriber/comments")}>Comments</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="17" icon={<UserOutlined />}>
          <Link href="/subscriber/profile">
            <a className={activeName("/subscriber/profile")}>Profile</a>
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default SubscriberNav;

// components/layout/SubscriberLayout
import { Layout } from "antd";
import SubscriberNav from "../../components/nav/SubscriberNav";
import { useState, useEffect, useContext } from "react";
import { SyncOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import { AuthContext } from "../../context/auth";
import axios from "axios";
import LoadingToRedirect from "./LoadingToRedirect";

const { Content } = Layout;

const SubscriberLayout = ({ children }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();

  // state
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (auth?.token) {
      getCurrentSubscriber();
    }
  }, [auth?.token]);

  const getCurrentSubscriber = async () => {
    try {
      const { data } = await axios.get(`/current-subscriber`);
      if (data.ok) {
        setLoading(false);
      }
    } catch (err) {
      router.push("/");
    }
  };

  return loading ? (
    <LoadingToRedirect />
  ) : (
    <Layout>
      <SubscriberNav />

      <Layout>
        <Content
          style={{
            margin: "16px 16px",
            overflow: "auto",
            height: "100vh",
            // position: "fixed",
            marginTop: 54,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default SubscriberLayout;

// pages/subscriber/index
import SubscriberLayout from "../../components/layout/SubscriberLayout";

const Subscriber = () => {
  return (
    <SubscriberLayout>
      <h1>Subscriber Dashboard</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti in
        delectus dicta maxime debitis ipsum, obcaecati vitae alias numquam culpa
        itaque possimus, dolorum corporis tempore assumenda nobis doloremque,
        sapiente saepe!
      </p>
    </SubscriberLayout>
  );
};

export default Subscriber;

// pages/subscriber/comments
import SubscriberLayout from "../../components/layout/SubscriberLayout";

const Comments = () => {
  return (
    <SubscriberLayout>
      <h1>Subscriber Dashboard</h1>
      <p>Comments...</p>
    </SubscriberLayout>
  );
};

export default Comments;

// pages/subscriber/profile
import SubscriberLayout from "../../components/layout/SubscriberLayout";

const Comments = () => {
  return (
    <SubscriberLayout>
      <h1>Subscriber Dashboard</h1>
      <p>Profile...</p>
    </SubscriberLayout>
  );
};

export default Comments;