all merosho

import React from "react";
import Image from "next/image";
import { redirectTo } from "@lib";
import { useCurrentContext } from "src/hooks/useCurrentContext";

const ButtonNavigation: React.FC = () => {
    const { levelId, subjectId } = useCurrentContext();
    // console.log("level id", levelId, "subject id", subjectId);
    return (
        <footer className="bottom-0 mt-0 z-10 inline-flex fixed   items-center justify-between flex-grow w-full p-3 border-t-2 group z-50 fixed bg-white border-b">
            <div
                onClick={() => redirectTo("/dashboard")}
                className="flex flex-col items-center"
            >
                <Image
                    // title='Home'
                    className="flex flex-col flex-initial px-5 cursor-pointer group-hover:text-blue-500"
                    src="/icons/Home.svg"
                    alt="dropdown"
                    width={150}
                    height={40}
                />

                <span className="pt-2 text-xs cursor-pointer hover:text-blue-600">
                    Home
                </span>
            </div>
            <div
                onClick={() => redirectTo(`/study/journey/${subjectId}`)}
                className="flex flex-col items-center justify-center"
            >
                <Image
                    className="flex flex-col flex-initial px-5 cursor-pointer"
                    src="/icons/Video.svg"
                    alt="home"
                    width={150}
                    height={40}
                />

                <span className="pt-2 text-xs cursor-pointer hover:text-blue-600">
                    Study
                </span>
            </div>
            <div
                onClick={() => redirectTo(`/practice/${levelId}/${subjectId}`)}
                className="flex flex-col items-center justify-center"
            >
                <Image
                    className="flex flex-col flex-initial px-5 cursor-pointer"
                    src="/icons/storytelling 1.svg"
                    alt="story"
                    width={150}
                    height={40}
                />

                <span className="pt-2 text-xs cursor-pointer hover:text-blue-600">
                    Practice
                </span>
            </div>
            <div
                onClick={() => redirectTo(`/watch/${subjectId}`)}
                className="flex flex-col items-center justify-center"
            >
                <Image
                    className="flex flex-col flex-initial px-5 cursor-pointer hover:text-blue-600"
                    src="/icons/VideoLib.svg"
                    alt="videoLibrary"
                    width={150}
                    height={40}
                />

                <span className="pt-2 text-xs cursor-pointer hover:text-blue-600">
                    Watch
                </span>
            </div>
            <div
                onClick={() => redirectTo("/expert")}
                className="flex flex-col items-center justify-center"
            >
                <Image
                    className="flex flex-col flex-initial px-5 cursor-pointer"
                    src="/icons/Group.svg"
                    alt="rating"
                    width={150}
                    height={40}
                />

                <span className="pt-2 text-xs cursor-pointer hover:text-blue-500">
                    Expert Q&A
                </span>
            </div>
        </footer>
    );
};

export default ButtonNavigation;


import { MenuOutlined, BellOutlined } from "@ant-design/icons";
import { redirectTo } from "@lib";
import { logout } from "@redux/actions";
import { authRoutes, headerRoutes, IRoute } from "@route";
import { Dropdown, Menu, Badge } from "antd";
import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { cookie } from "src/lib/cookie";

const Button = dynamic(() => import("antd/lib/button"));
const DesktopMenu: any = dynamic(
    () => import("@components/Header/DesktopMenu"),
);
const MobileMenu = dynamic(() => import("@components/Header/MobileMenu"));

export const PageHeader = () => {
    const dispatch = useDispatch();
    const breakpoints = useBreakpoint();
    const { asPath } = useRouter();
    const { isLoggedIn, progress, user } = useSelector(
        (state: any) => state.auth,
    );

    const [active, setActive] = useState(0);
    useEffect(() => {
        setActive(
            headerRoutes.findIndex(
                (route) =>
                    asPath === route.path || asPath.indexOf(route.path) !== -1,
            ),
        );
    }, [asPath]);

    const handleSignOut = () => {
        cookie.remove();
        dispatch(logout());
        redirectTo("/");
    };

    return (
        <div className="header h-16 w-full px-2 sm:px-5 flex justify-between items-center z-50 fixed bg-white border-b">
            <img
                src="/logo.svg"
                alt="logo"
                width={140}
                height={48}
                onClick={() => {
                    if (isLoggedIn) {
                        if (user.is_staff) {
                            redirectTo("/admin");
                        } else {
                            redirectTo("/dashboard");
                        }
                    } else {
                        redirectTo("/");
                    }
                }}
                className="p-2 cursor-pointer"
            />
            {isLoggedIn && !progress ? (
                breakpoints.lg ? (
                    <DesktopMenu active={active} />
                ) : (
                    <div className="flex justify-content items-center">
                        <MobileMenu active={active} />
                    </div>
                )
            ) : breakpoints.lg ? (
                // Login / Register Menu
                <div className="flex items-center">
                    {progress ? (
                        <Button
                            className="px-5 py-5 flex items-center border-0 text-primary"
                            onClick={handleSignOut}
                        >
                            Sign Out
                        </Button>
                    ) : (
                        authRoutes.slice(0, 2).map((p: IRoute) => {
                            return (
                                <div
                                    className="mx-3 border-0"
                                    key={p.id}
                                    onClick={() => redirectTo(p.path)}
                                >
                                    {p.path === "/signup" ? (
                                        <Button
                                            className="px-5 py-5 flex items-center"
                                            type="primary"
                                        >
                                            {p.name}
                                        </Button>
                                    ) : (
                                        // <Link href="/login">{p.name}</Link>
                                        <Button type="link">{p.name}</Button>
                                    )}
                                </div>
                            );
                        })
                    )}
                </div>
            ) : (
                // For mobile screens
                <div className="flex items-center">
                    {progress ? (
                        <Button
                            className="px-5 py-5 flex items-center border-0 text-primary"
                            onClick={handleSignOut}
                        >
                            Sign Out
                        </Button>
                    ) : (
                        <>
                            <Button
                                className="mr-5"
                                shape="round"
                                type="primary"
                                target="_blank"
                                href="https://play.google.com/store/apps/details?id=com.merosiksha.app"
                            >
                                Use App 2
                            </Button>
                            <Dropdown
                                overlayClassName="top-16 fixed w-1/2 right-5"
                                trigger={["click"]}
                                overlay={
                                    <Menu mode="vertical" className="w-full">
                                        {authRoutes
                                            .slice(0, 2)
                                            .map((p: IRoute) => {
                                                return (
                                                    <Menu.Item
                                                        className="mx-3 my-4"
                                                        key={p.id}
                                                        onClick={() =>
                                                            redirectTo(p.path)
                                                        }
                                                    >
                                                        {p.name}
                                                    </Menu.Item>
                                                );
                                            })}
                                    </Menu>
                                }
                            >
                                <MenuOutlined className="mr-2" />
                            </Dropdown>
                        </>
                    )}
                </div>
            )}
        </div>
    );
};

import { MenuOutlined, BellOutlined } from "@ant-design/icons";
import { redirectTo } from "@lib";
import { IRoute } from "@route";
import { Menu, Badge, Button } from "antd";
import dynamic from "next/dynamic";
import React, { useEffect, useState } from "react";
import { headerRoutes } from "route";
import useAuth from "src/hooks/useAuth";
import { useRouter } from "next/router";
import { $axios } from "src/lib/axios";
import { useCurrentContext } from "src/hooks/useCurrentContext";
import "./header.css";

const Dropdown = dynamic(() => import("antd/lib/dropdown"));

const MobileMenu = ({ active }) => {
    const { levelId, subjectId } = useCurrentContext();
    const { logout, user } = useAuth();
    const { asPath } = useRouter();
    const [notifications, setNotification] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [errorNotifcation, setNotificationError] = useState("");
    const [notifcationSound, setNotificationSound] = useState(false);

    useEffect(() => {
        if (!user.is_staff) fetchNotifications();
    }, [asPath]);

    const fetchNotifications = async () => {
        setIsLoading(true);
        try {
            const response = await $axios.get("users/notification");

            setNotification(response.results);
            const filteredNotification =
                response?.results?.filter((res) => !res.is_read).length || 0;
            const previousCount =
                localStorage.getItem("notificationCount") || 0;
            if (Number(previousCount) < filteredNotification)
                setNotificationSound(true);
            localStorage.setItem("notificationCount", filteredNotification);
        } catch (e) {
            setNotificationError("Something error");
        } finally {
            setIsLoading(false);
        }
    };

    const userMenu = (
        <Menu>
            {!user.is_staff && (
                <Menu.Item
                    key="53"
                    onClick={() => redirectTo("/profile")}
                    className="px-8 py-2 my-2"
                >
                    Profile
                </Menu.Item>
            )}
            <Menu.Item key="54" onClick={logout} className="px-8 py-2 my-2">
                Logout
            </Menu.Item>
        </Menu>
    );

    const onClickMenuItem = async (id) => {
        try {
            await $axios.get(`users/notification/${id}`);
            redirectTo(`/expert/${subjectId}/my-questions`);
        } catch (e) {
            console.log("error", e);
        }
    };

    const getNotifcationMenu = () => {
        return isLoading ? (
            <Menu>
                <Menu.Item key="90" className="px-8 py-2 my-2">
                    Loading...
                </Menu.Item>
            </Menu>
        ) : errorNotifcation ? (
            <Menu.Item key="66" className="px-8 py-2 my-2">
                <p className="bg-red">{errorNotifcation}</p>
            </Menu.Item>
        ) : notifications.length ? (
            <Menu>
                {notifications.map((notification) => {
                    return (
                        <Menu.Item
                            key={notification.id}
                            className={"px-4 py-2 my-2"}
                            onClick={() => onClickMenuItem(notification.id)}
                        >
                            <div
                                className={
                                    notification.is_read ? "" : "bg-yellow-100"
                                }
                            >
                                {notification.message}
                            </div>
                        </Menu.Item>
                    );
                })}
            </Menu>
        ) : (
            <Menu>
                <Menu.Item key="90" className="px-8 py-2 my-2">
                    <p>No New Notifications!!</p>
                </Menu.Item>
            </Menu>
        );
    };

    const unreadNotifcation = notifications.filter(
        (notification) => !notification.is_read,
    ).length;

    const getNotifcationSoundElement = () => {
        return Boolean(unreadNotifcation) && notifcationSound ? (
            <audio src="/notification.mp3" autoPlay={true}>
                {" "}
                <source src="/notification.mp3" type="audio/mpeg" />
            </audio>
        ) : null;
    };

    return (
        <>
            {/* Notifictaion */}
            {!user.is_staff && (
                <>
                    <Dropdown
                        overlay={getNotifcationMenu()}
                        placement="bottomCenter"
                        trigger={["click"]}
                        arrow
                    >
                        <Badge className="mr-4" count={unreadNotifcation}>
                            <BellOutlined className="text-xl" />
                        </Badge>
                    </Dropdown>
                    {getNotifcationSoundElement()}
                </>
            )}
            {/* userprofile options */}
            <Dropdown
                overlay={userMenu}
                placement="bottomLeft"
                trigger={["click"]}
                arrow
            >
                <div className="button-container">
                    <Button
                        size="small"
                        className="mr-4 profile-btn"
                        type="primary"
                        shape="circle"
                    >
                        <p className="profile-name">
                            {user ? user.name.slice(0, 2) : ""}
                        </p>
                    </Button>
                </div>
            </Dropdown>

            {/* menuoptions */}
            <Dropdown
                overlayClassName="top-16 fixed w-1/2 right-5"
                trigger={["click"]}
                overlay={
                    <Menu mode="vertical" className="w-full">
                        {!user.is_staff &&
                            headerRoutes
                                .filter((r) => r.mobile)
                                .map((p: IRoute, index) => {
                                    return (
                                        <Menu.Item
                                            className={`mx-3 my-4 ${
                                                active === index
                                                    ? "text-primary font-bold"
                                                    : ""
                                            }`}
                                            key={p.id}
                                            onClick={() => {
                                                let path = p.path;
                                                if (p.path === "/watch") {
                                                    path = `/watch/${subjectId}`;
                                                }
                                                if (p.path === "/study") {
                                                    path = `/study/journey/${subjectId}`;
                                                }
                                                if (p.path === "/practice") {
                                                    path = `/practice/${levelId}/${subjectId}`;
                                                }
                                                if (p.path === "/expert") {
                                                    path = `/expert`;
                                                }
                                                redirectTo(path);
                                            }}
                                        >
                                            {p.name}
                                        </Menu.Item>
                                    );
                                })}

                        <Menu.Item
                            key="99"
                            onClick={logout}
                            className="px-6 py-2 my-2"
                        >
                            Logout
                        </Menu.Item>
                    </Menu>
                }
            >
                <MenuOutlined className="mr-2" />
            </Dropdown>
        </>
    );
};

export default MobileMenu;