@ebubekirylmaz/link-test 1.0.0

package/src/http/index.js

@@ -0,0 +1,155 @@
+import axios from "axios";
+import config from "../config/config";
+import createAuthRefreshInterceptor from "axios-auth-refresh";
+import { jwtDecode } from "jwt-decode";
+import oauth from "./oauth";
+import { publish } from "@nucleoidai/react-event";
+import { storage } from "@nucleoidjs/webstorage";
+
+const instance = axios.create({
+  headers: {
+    common: {
+      "Content-Type": "application/json",
+    },
+  },
+});
+
+instance.interceptors.request.use((request) => {
+  const { base } = config();
+  const accessToken = storage.get("link", "accessToken");
+
+  if (!accessToken) {
+    window.location.href = base === "/" ? "/login" : `${base}/login`;
+  }
+
+  request.headers["Authorization"] = `Bearer ${accessToken}`;
+
+  publish("LOADED", { loading: true });
+
+  return request;
+});
+
+instance.interceptors.response.use(
+  (response) => {
+    if (response.headers["content-type"] === "application/json") {
+      response.data = JSON.parse(response.data);
+    }
+    publish("LOADED", { loading: false });
+    return response;
+  },
+  async (error) => {
+    publish("LOADED", { loading: false });
+    const statusCode = error.response?.status;
+    switch (statusCode) {
+      case 400:
+        publish("GLOBAL_MESSAGE_POSTED", {
+          status: true,
+          message: "BAD REQUEST",
+          severity: "warning",
+        });
+        break;
+      case 403:
+        publish("GLOBAL_MESSAGE_POSTED", {
+          status: true,
+          message: "ERROR",
+          severity: "warning",
+        });
+        break;
+      case 404:
+        publish("GLOBAL_MESSAGE_POSTED", {
+          status: true,
+          message: "NOT FOUND",
+          severity: "warning",
+        });
+        break;
+      case 500:
+        publish("GLOBAL_MESSAGE_POSTED", {
+          status: true,
+          message: "INTERNAL SERVER ERROR",
+          severity: "warning",
+        });
+        break;
+      case 502:
+        publish("GLOBAL_MESSAGE_POSTED", {
+          status: true,
+          message: "BAD GATEWAY",
+          severity: "warning",
+        });
+        break;
+    }
+    return Promise.reject(error);
+  }
+);
+
+export const fetcher = (url) => instance.get(url).then((res) => res.data);
+
+const refreshAuthLogic = async (failedRequest) => {
+  try {
+    const { appId } = config();
+
+    const projectId = storage.get("projectId");
+
+    const identityProvider = storage.get("link", "identityProvider");
+
+    const { data } = await oauth.post("/oauth", {
+      refreshToken: storage.get("link", "refreshToken"),
+      appId,
+      projectId,
+      identityProvider,
+    });
+
+    const accessToken = data.accessToken;
+
+    failedRequest.response.config.headers["Authorization"] =
+      "Bearer " + accessToken;
+
+    storage.set("link", "accessToken", accessToken);
+    return Promise.resolve();
+  } catch (error) {
+    const { name, base } = config();
+
+    storage.remove("link", "accessToken");
+    storage.remove("link", "refreshToken");
+
+    window.location.href = `${window.location.origin}${base}/login`;
+    return Promise.reject(error);
+  }
+};
+
+const refreshInterceptor =
+  typeof createAuthRefreshInterceptor === "function"
+    ? createAuthRefreshInterceptor
+    : createAuthRefreshInterceptor.default;
+
+refreshInterceptor(instance, refreshAuthLogic, {
+  statusCodes: [401, 403],
+  shouldRefresh: () => {
+    const { name, base } = config();
+    const token = storage.get("link", "accessToken");
+
+    if (!token) {
+      window.location.href = `${window.location.origin}${base}/login`;
+      return false;
+    }
+
+    try {
+      const decodedToken = jwtDecode(token);
+      if (decodedToken.exp * 1000 < Date.now()) {
+        return true;
+      } else {
+        publish("GLOBAL_MESSAGE_POSTED", {
+          status: true,
+          message: "UNAUTHORIZED",
+          severity: "warning",
+        });
+      }
+    } catch (err) {
+      window.location.href = `${window.location.origin}${base}/login`;
+      return false;
+    }
+
+    return false;
+  },
+});
+
+export default instance;

package/src/http/oauth.js

@@ -0,0 +1,27 @@
+import axios from "axios";
+import axiosRetry from "axios-retry";
+import config from "../config/config.js";
+import qs from "qs";
+
+const instance = axios.create({
+  baseURL: config().api,
+  headers: {
+    common: {
+      "Content-Type": "application/json",
+    },
+  },
+});
+
+axiosRetry(instance, { retries: 3 });
+
+instance.interceptors.response.use(
+  (response) => {
+    response.data = qs.parse(response.data);
+    return response;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default instance;

package/src/http/user.js

@@ -0,0 +1,110 @@
+import axios from "axios";
+import config from "../config/config.js";
+import http from "./index";
+import { jwtDecode } from "jwt-decode";
+import oauth from "./oauth";
+import { storage } from "@nucleoidjs/webstorage";
+
+const instance = axios.create({
+  headers: {
+    common: {
+      "Content-Type": "application/json",
+    },
+  },
+});
+
+instance.interceptors.request.use(async (request) => {
+  const refreshToken = await storage.get("link", "refreshToken");
+  if (refreshToken) {
+    request.headers["Authorization"] = `Bearer ${refreshToken}`;
+  }
+  return request;
+});
+
+instance.getUserDetails = async () => {
+  try {
+    const refreshToken = await storage.get("link", "refreshToken");
+
+    if (!refreshToken) {
+      console.log("No refresh token found");
+      return null;
+    }
+
+    let accessToken = await storage.get("link", "accessToken");
+
+    if (!accessToken) {
+      console.log("No access token found");
+      return null;
+    }
+
+    try {
+      const decodedToken = jwtDecode(accessToken);
+      const isExpired = decodedToken.exp * 1000 < Date.now();
+
+      if (isExpired) {
+        console.log(
+          "Access token expired, refreshing before fetching user details..."
+        );
+        const { appId } = config();
+        const projectId = storage.get("projectId");
+        const identityProvider = storage.get("link", "identityProvider");
+
+        const { data } = await oauth.post("/oauth", {
+          refreshToken,
+          appId,
+          projectId,
+          identityProvider,
+        });
+
+        accessToken = data.accessToken;
+        storage.set("link", "accessToken", accessToken);
+        console.log(
+          "Access token refreshed successfully, now fetching user details"
+        );
+      }
+    } catch (error) {
+      console.error("Error checking or refreshing token:", error);
+      return null;
+    }
+
+    const response = await http.get("/oauth/user", {
+      headers: {
+        "X-Refresh-Token": refreshToken,
+      },
+    });
+
+    if (response.data && response.data.user) {
+      return response.data.user;
+    }
+
+    console.log("No user data received from server");
+    return null;
+  } catch (error) {
+    console.error("Error fetching user details from server:", error);
+    return null;
+  }
+};
+
+instance.getPermittedUsers = async () => {
+  const userIds = [];
+  const refreshToken = await storage.get("link", "refreshToken");
+  const response = await http.get("/permissions");
+
+  response.data.forEach((permission) => {
+    userIds.push(permission.userId);
+  });
+
+  const users = await Promise.all(
+    userIds.map(async (userId) => {
+      const response = await axios.get(
+        `https://api.github.com/user/${userId}`,
+        { headers: { Authorization: `Bearer ${refreshToken}` } }
+      );
+      return response.data;
+    })
+  );
+
+  return users;
+};
+
+export default instance;

package/src/layouts/AppLayout.jsx

@@ -0,0 +1,113 @@
+import { Box } from "@mui/material";
+import MiniTopBar from "../components/MiniTopBar";
+import Sidebar from "../components/Sidebar";
+import TopNavBar from "../components/TopNavBar";
+import config from "../config/config";
+import { useContext } from "../ContextProvider/ContextProvider";
+import user from "../http/user";
+
+import { Outlet, useLocation } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+
+function AppLayout() {
+  const [anchorElUser, setAnchorElUser] = useState(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isSubmenuOpen, setSubmenuOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState();
+  const [state, dispatch] = useContext();
+  const [miniTopMenu, setMiniTopMenu] = useState(false);
+  const [userData, setUserData] = useState(null);
+  const location = useLocation();
+  const globalConfig = useConfig();
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+    if (isSubmenuOpen) {
+      setSubmenuOpen(false);
+    }
+  };
+
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  const handleItemSelect = (item) => {
+    dispatch({ type: "ITEM_SELECT", payload: item.id });
+  };
+
+  useEffect(() => {
+    const foundItem = globalConfig.itemsData.find(
+      (item) => item.id === state.itemId
+    );
+
+    if (foundItem) {
+      setSelectedItem(foundItem);
+    }
+    selectedItem && setSubmenuOpen(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    user.get("https://api.github.com/user").then((response) => {
+      setUserData(response.data);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.login]);
+
+  useEffect(() => {
+    const targetPage = globalConfig.topMenu.find(
+      (target) => target.url === location.pathname
+    );
+
+    targetPage?.hideTopBar
+      ? (setMiniTopMenu(true), setIsCollapsed(true))
+      : (setMiniTopMenu(false), setIsCollapsed(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
+  return (
+    <Box>
+      {state.login &&
+        (miniTopMenu ? (
+          <MiniTopBar />
+        ) : (
+          <TopNavBar
+            sx={{ flexShrink: 0 }}
+            anchorElUser={anchorElUser}
+            handleOpenUserMenu={handleOpenUserMenu}
+            handleCloseUserMenu={handleCloseUserMenu}
+            routes={globalConfig.topMenu}
+            itemsData={globalConfig.itemsData}
+            onItemSelect={handleItemSelect}
+            sideBarToggle={toggleCollapse}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+            itemUrl="/"
+            itemName="ITEEEEEM"
+            userData={userData}
+          />
+        ))}
+
+      <Box sx={{ display: "flex", flexGrow: 1 }}>
+        {state.itemId ? (
+          <Sidebar
+            sx={{ flexShrink: 0 }}
+            routes={globalConfig.sideMenu}
+            isCollapsed={isCollapsed}
+            currentPage={location.pathname}
+          />
+        ) : null}
+        <Box sx={{ flexGrow: 1, overflow: "auto" }}>
+          <Outlet />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default AppLayout;

package/src/layouts/CompactLayout/CompactLayout.jsx

@@ -0,0 +1,32 @@
+import Container from "@mui/material/Container";
+import Header from "../common/header-simple";
+import { Outlet } from "react-router";
+import React from "react";
+import Stack from "@mui/material/Stack";
+
+// ----------------------------------------------------------------------
+
+const CompactLayout = () => {
+  return (
+    <>
+      <Header />
+
+      <Container component="main">
+        <Stack
+          sx={{
+            py: 12,
+            m: "auto",
+            maxWidth: 400,
+            minHeight: "100vh",
+            textAlign: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Outlet />
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default CompactLayout;

package/src/layouts/CompactLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./CompactLayout";

package/src/layouts/DashboardLayout/DashboardLayout.jsx

@@ -0,0 +1,87 @@
+import Box from "@mui/material/Box";
+import Header from "./header";
+import Main from "./main";
+import NavHorizontal from "./nav-horizontal";
+import NavMini from "./nav-mini";
+import NavVertical from "./nav-vertical";
+import { Outlet } from "react-router";
+import React from "react";
+import { useBoolean } from "../../hooks/use-boolean";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useSettingsContext } from "../../components/settings";
+
+// ----------------------------------------------------------------------
+
+export default function DashboardLayout() {
+  const settings = useSettingsContext();
+
+  const lgUp = useResponsive("up", "lg");
+
+  const nav = useBoolean();
+  const isHorizontal = settings.themeLayout === "horizontal";
+
+  const isMini = settings.themeLayout === "mini";
+
+  const renderNavMini = <NavMini />;
+
+  const renderHorizontal = <NavHorizontal />;
+
+  const renderNavVertical = (
+    <>
+      <NavVertical openNav={nav.value} onCloseNav={nav.onFalse} />
+    </>
+  );
+  if (isHorizontal) {
+    return (
+      <>
+        <Header onOpenNav={nav.onTrue} />
+
+        {lgUp ? renderHorizontal : renderNavVertical}
+
+        <Main>
+          <Outlet />
+        </Main>
+      </>
+    );
+  }
+
+  if (isMini) {
+    return (
+      <>
+        <Header onOpenNav={nav.onTrue} />
+
+        <Box
+          sx={{
+            minHeight: 1,
+            display: "flex",
+            flexDirection: { xs: "column", lg: "row" },
+          }}
+        >
+          {lgUp ? renderNavMini : renderNavVertical}
+
+          <Main>
+            <Outlet />
+          </Main>
+        </Box>
+      </>
+    );
+  }
+  return (
+    <>
+      <Header onOpenNav={nav.onTrue} />
+
+      <Box
+        sx={{
+          minHeight: 1,
+          display: "flex",
+          flexDirection: { xs: "column", lg: "row" },
+        }}
+      >
+        {renderNavVertical}
+        <Main>
+          <Outlet />
+        </Main>
+      </Box>
+    </>
+  );
+}

package/src/layouts/DashboardLayout/header.jsx

@@ -0,0 +1,104 @@
+import { HEADER, NAV } from "../config-layout";
+
+import AccountPopover from "../common/account-popover";
+import AppBar from "@mui/material/AppBar";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../components/Iconify";
+import Logo from "../../components/logo";
+import NotificationsPopover from "../common/notifications-popover";
+import ProjectBar from "../common/ProjectBar";
+import React from "react";
+import SettingsButton from "../common/settings-button";
+import Stack from "@mui/material/Stack";
+import Toolbar from "@mui/material/Toolbar";
+import { bgBlur } from "../../theme/css";
+import config from "../../config/config";
+import { useOffSetTop } from "../../hooks/use-off-set-top";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useSettingsContext } from "../../components/settings";
+import { useTheme } from "@mui/material/styles";
+
+export default function Header({ onOpenNav }) {
+  const theme = useTheme();
+  const settings = useSettingsContext();
+
+  const projectBar = config().template?.projectBar;
+
+  const isNavHorizontal = settings.themeLayout === "horizontal";
+
+  const isNavMini = settings.themeLayout === "mini";
+
+  const lgUp = useResponsive("up", "lg");
+
+  const offset = useOffSetTop(HEADER.H_DESKTOP);
+
+  const offsetTop = offset && !isNavHorizontal;
+
+  const renderContent = (
+    <>
+      {lgUp && isNavHorizontal && <Logo sx={{ mr: 2.5 }} />}
+
+      {!lgUp && (
+        <IconButton data-cy="open-nav-button" onClick={onOpenNav}>
+          <Iconify icon="mingcute:menu-fill" sx={{ width: 28, height: 28 }} />
+        </IconButton>
+      )}
+      {projectBar && <ProjectBar />}
+
+      <Stack
+        flexGrow={1}
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        spacing={{ xs: 0.5, sm: 1 }}
+      >
+        <NotificationsPopover />
+
+        <SettingsButton />
+
+        <AccountPopover />
+      </Stack>
+    </>
+  );
+
+  return (
+    <AppBar
+      data-cy="dashboard-layout-header"
+      sx={{
+        height: HEADER.H_MOBILE,
+        zIndex: 0,
+        ...bgBlur({
+          color: theme.palette.background.default,
+        }),
+        transition: theme.transitions.create(["height"], {
+          duration: theme.transitions.duration.shorter,
+        }),
+        ...(lgUp && {
+          width: `calc(100% - ${NAV.W_VERTICAL + 1}px)`,
+          height: HEADER.H_DESKTOP,
+          ...(offsetTop && {
+            height: HEADER.H_DESKTOP_OFFSET,
+          }),
+          ...(isNavHorizontal && {
+            width: 1,
+            bgcolor: "background.default",
+            height: HEADER.H_DESKTOP_OFFSET,
+            borderBottom: `dashed 1px ${theme.palette.divider}`,
+          }),
+          ...(isNavMini && {
+            width: `calc(100% - ${NAV.W_MINI + 1}px)`,
+          }),
+        }),
+      }}
+    >
+      <Toolbar
+        sx={{
+          height: 1,
+          px: { lg: 5 },
+        }}
+      >
+        {renderContent}
+      </Toolbar>
+    </AppBar>
+  );
+}

package/src/layouts/DashboardLayout/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { default } from "./DashboardLayout";

package/src/layouts/DashboardLayout/main.jsx

@@ -0,0 +1,64 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useSettingsContext } from "../../components/settings";
+
+import { HEADER, NAV } from "../config-layout";
+
+// ----------------------------------------------------------------------
+
+const SPACING = 8;
+
+export default function Main({ children, sx, ...other }) {
+  const settings = useSettingsContext();
+  const lgUp = useResponsive("up", "lg");
+  const isNavHorizontal = settings.themeLayout === "horizontal";
+
+  const isNavMini = settings.themeLayout === "mini";
+
+  if (isNavHorizontal) {
+    return (
+      <Box
+        component="main"
+        sx={{
+          minHeight: 1,
+          display: "flex",
+          flexDirection: "column",
+          pt: `${HEADER.H_MOBILE + 24}px`,
+          pb: 10,
+          ...(lgUp && {
+            pt: `${HEADER.H_MOBILE * 2 + 40}px`,
+            pb: 15,
+          }),
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component="main"
+      sx={{
+        flexGrow: 1,
+        minHeight: 1,
+        display: "flex",
+        flexDirection: "column",
+        py: `${HEADER.H_MOBILE + SPACING}px`,
+        ...(lgUp && {
+          px: 2,
+          py: `${HEADER.H_DESKTOP + SPACING}px`,
+          width: `calc(100% - ${NAV.W_VERTICAL}px)`,
+          ...(isNavMini && {
+            width: `calc(100% - ${NAV.W_MINI}px)`,
+          }),
+        }),
+        ...sx,
+      }}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}