test-nucleoid 1.0.0

package/src/hooks/use-local-storage.js

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export function useLocalStorage(key, initialState) {
+  const [state, setState] = useState(initialState);
+
+  useEffect(() => {
+    const restored = getStorage(key);
+
+    if (restored) {
+      setState((prevValue) => ({
+        ...prevValue,
+        ...restored,
+      }));
+    }
+  }, [key]);
+
+  const updateState = useCallback(
+    (updateValue) => {
+      setState((prevValue) => {
+        setStorage(key, {
+          ...prevValue,
+          ...updateValue,
+        });
+
+        return {
+          ...prevValue,
+          ...updateValue,
+        };
+      });
+    },
+    [key]
+  );
+
+  const update = useCallback(
+    (name, updateValue) => {
+      updateState({
+        [name]: updateValue,
+      });
+    },
+    [updateState]
+  );
+
+  const reset = useCallback(() => {
+    removeStorage(key);
+    setState(initialState);
+  }, [initialState, key]);
+
+  return {
+    state,
+    update,
+    reset,
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export const getStorage = (key) => {
+  let value = null;
+
+  try {
+    const result = window.localStorage.getItem(key);
+
+    if (result) {
+      value = JSON.parse(result);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+
+  return value;
+};
+
+export const setStorage = (key, value) => {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const removeStorage = (key) => {
+  try {
+    window.localStorage.removeItem(key);
+  } catch (error) {
+    console.error(error);
+  }
+};

package/src/hooks/use-off-set-top.js

@@ -0,0 +1,37 @@
+import { useScroll } from "framer-motion";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export function useOffSetTop(top = 0, options) {
+  const { scrollY } = useScroll(options);
+
+  const [value, setValue] = useState(false);
+
+  const onOffSetTop = useCallback(() => {
+    scrollY.on("change", (scrollHeight) => {
+      if (scrollHeight > top) {
+        setValue(true);
+      } else {
+        setValue(false);
+      }
+    });
+  }, [scrollY, top]);
+
+  useEffect(() => {
+    onOffSetTop();
+  }, [onOffSetTop]);
+
+  const memoizedValue = useMemo(() => value, [value]);
+
+  return memoizedValue;
+}
+
+// Usage
+// const offset = useOffSetTop(100);
+
+// Or
+// const offset = useOffSetTop(100, {
+//   container: ref,
+// });

package/src/hooks/use-responsive.js

@@ -0,0 +1,47 @@
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export function useResponsive(query, start, end) {
+  const theme = useTheme();
+
+  const mediaUp = useMediaQuery(theme.breakpoints.up(start));
+
+  const mediaDown = useMediaQuery(theme.breakpoints.down(start));
+
+  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
+
+  const mediaOnly = useMediaQuery(theme.breakpoints.only(start));
+
+  if (query === "up") {
+    return mediaUp;
+  }
+
+  if (query === "down") {
+    return mediaDown;
+  }
+
+  if (query === "between") {
+    return mediaBetween;
+  }
+
+  return mediaOnly;
+}
+
+// ----------------------------------------------------------------------
+
+export function useWidth() {
+  const theme = useTheme();
+
+  const keys = [...theme.breakpoints.keys].reverse();
+
+  return (
+    keys.reduce((output, key) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+
+      return !output && matches ? key : output;
+    }, null) || "xs"
+  );
+}

package/src/hooks/use-scroll-to-top.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+// ----------------------------------------------------------------------
+
+export function useScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}

package/src/hooks/use-user.js

@@ -0,0 +1,58 @@
+import http from "../http";
+import { publish } from "@nucleoidai/react-event";
+import useApi from "./useApi";
+import userInstance from "../http/user";
+
+import { useCallback, useEffect, useState } from "react";
+
+export function useUser() {
+  const [user, setUser] = useState({ name: "", avatarUrl: "" });
+  const [users, setUsers] = useState([]);
+  const { loading, error, handleResponse } = useApi();
+
+  useEffect(() => {
+    getUser();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getUser = useCallback(() => {
+    handleResponse(userInstance.getUserDetails(), (response) =>
+      setUser(response)
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getPermittedUsers = useCallback(() => {
+    handleResponse(userInstance.getPermittedUsers(), (response) =>
+      setUsers(response)
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const createPermission = useCallback((userId) => {
+    handleResponse(
+      http.post("/permissions", {
+        userId,
+      }),
+      (response) => {
+        publish("PERMISSION_CREATED", { userId: response.data.id });
+      }
+    );
+  }, []);
+
+  const deletePermission = useCallback((userId) => {
+    handleResponse(http.delete(`/permissions/${userId}`), (response) => {
+      publish("PERMISSION_DELETED", { userId: response.data.id });
+    });
+  }, []);
+
+  return {
+    user,
+    users,
+    loading,
+    error,
+    getPermittedUsers,
+    createPermission,
+    deletePermission,
+  };
+}

package/src/hooks/useApi.js

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+function useApi() {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const handleResponse = async (promise, callback, successCallback) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await promise;
+      callback(response);
+      if (successCallback) {
+        successCallback();
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { loading, error, handleResponse };
+}
+
+export default useApi;

package/src/hooks/useItemsState.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+import config from "../../../../config";
+import templateConfig from "../../../../config.template";
+import useSWR from "swr";
+
+const instance = axios.create({
+  baseURL: config.api,
+});
+
+const fetcher = (url) => instance.get(url).then((res) => res.data);
+
+export const useProject = () => {
+  const GetItems = () => {
+    const path = templateConfig.projectBar.path;
+    const { data, error } = useSWR(path, fetcher);
+
+    return { items: data || [], loading: !error && !data };
+  };
+
+  return {
+    GetItems,
+  };
+};

package/src/hooks/useProjects.js

@@ -0,0 +1,24 @@
+import http from "../http";
+import useApi from "./useApi";
+
+import { useCallback, useState } from "react";
+
+function useProjects() {
+  const [projects, setProjects] = useState([]);
+  const { loading, error, handleResponse } = useApi();
+
+  const getProjects = useCallback(() => {
+    handleResponse(http.get("/projects"), (response) => {
+      setProjects(response.data);
+    });
+  }, []);
+
+  return {
+    projects,
+    loading,
+    error,
+    getProjects,
+  };
+}
+
+export default useProjects;

package/src/hooks/useSettings.jsx

@@ -0,0 +1,51 @@
+import http from "../http";
+import useApi from "./useApi";
+
+import { publish, useEvent } from "@nucleoidai/react-event";
+import { useCallback, useEffect, useState } from "react";
+
+function useSettings(id) {
+  const [settings, setSettings] = useState({
+    timeZone: "",
+  });
+  const { loading, error, handleResponse } = useApi();
+  const [settingUpdated] = useEvent("SETTING_UPDATED", null);
+
+  useEffect(() => {
+    if (id) {
+      getSettings(id);
+    }
+  }, [settingUpdated]);
+
+  const getSettings = useCallback(
+    (id) => {
+      handleResponse(http.get(`/projects/${id}/settings`), (response) => {
+        setSettings(response.data);
+      });
+    },
+    [handleResponse]
+  );
+
+  const updateSettings = useCallback(
+    (id, newTimeZone) => {
+      handleResponse(
+        http.patch(`/projects/${id}/settings`, {
+          timeZone: newTimeZone,
+        }),
+        () => {
+          publish("SETTING_UPDATED", { id });
+        }
+      );
+    },
+    [handleResponse, getSettings]
+  );
+
+  return {
+    settings,
+    loading,
+    error,
+    updateSettings,
+  };
+}
+
+export default useSettings;

package/src/http/index.js

@@ -0,0 +1,166 @@
+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 isDemo = identityProvider?.toUpperCase() === "DEMO";
+
+    const { data } = isDemo
+      ? await oauth.post("/oauth/demo", {
+          appId,
+          projectId,
+          username: "admin",
+          password: "admin",
+        })
+      : await oauth.post("/oauth", {
+          refreshToken: storage.get("link", "refreshToken"),
+          appId,
+          projectId,
+          identityProvider,
+        });
+
+    const { accessToken, refreshToken } = data;
+
+    failedRequest.response.config.headers["Authorization"] =
+      "Bearer " + accessToken;
+
+    storage.set("link", "accessToken", accessToken);
+    if (refreshToken) {
+      storage.set("link", "refreshToken", refreshToken);
+    }
+
+    return Promise.resolve();
+  } catch (error) {
+    const { 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;