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;