Add 'sge-frontend/' from commit '5fa787e054b25ac53edc7ff0275ea7960a709401'

git-subtree-dir: sge-frontend
git-subtree-mainline: 876c278ac4
git-subtree-split: 5fa787e054

sge-frontend/src/utility/Utils.js

@@ -0,0 +1,96 @@
+// ** Checks if an object is empty (returns boolean)
+import { useSelector } from "react-redux";
+
+//react-select custom filter
+export const customFilterForSelect = (candidate, input) => {
+  const candidateLower = candidate.label
+    .toUpperCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, ""); // Normalize and remove diacritics
+  const inputLower = input
+    .toUpperCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, ""); // Normalize and remove diacritics
+  return candidateLower.includes(inputLower);
+};
+
+export const isObjEmpty = (obj) => Object.keys(obj).length === 0;
+
+// ** Returns K format from a number
+export const kFormatter = (num) =>
+  num > 999 ? `${(num / 1000).toFixed(1)}k` : num;
+
+// ** Converts HTML to string
+export const htmlToString = (html) => {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent || div.innerText || "";
+};
+
+// ** Checks if the passed date is today
+const isToday = (date) => {
+  const today = new Date();
+  return (
+    /* eslint-disable operator-linebreak */
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+    /* eslint-enable */
+  );
+};
+
+/**
+ ** Format and return date in Humanize format
+ ** Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+ ** Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+ * @param {String} value date to format
+ * @param {Object} formatting Intl object to format with
+ */
+export const formatDate = (
+  value,
+  formatting = { month: "short", day: "numeric", year: "numeric" }
+) => {
+  if (!value) return value;
+  return new Intl.DateTimeFormat("en-US", formatting).format(new Date(value));
+};
+
+// ** Returns short month of passed date
+export const formatDateToMonthShort = (value, toTimeForCurrentDay = true) => {
+  const date = new Date(value);
+  let formatting = { month: "short", day: "numeric" };
+
+  if (toTimeForCurrentDay && isToday(date)) {
+    formatting = { hour: "numeric", minute: "numeric" };
+  }
+
+  return new Intl.DateTimeFormat("en-US", formatting).format(new Date(value));
+};
+
+/**
+ ** Return if user is logged in
+ ** This is completely up to you and how you want to store the token in your frontend application
+ *  ? e.g. If you are using cookies to store the application please update this function
+ */
+export const isUserLoggedIn = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const auth = useSelector((state) => state.auth);
+  return auth.isLoggedIn === true;
+};
+export const getUserData = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const auth = useSelector((state) => state.auth);
+  return auth.user;
+};
+
+// ** React Select Theme Colors
+export const selectThemeColors = (theme) => ({
+  ...theme,
+  colors: {
+    ...theme.colors,
+    primary25: "#028a4a1a", // for option hover bg-color
+    primary: "#028a4a", // for selected option bg-color
+    neutral10: "#028a4a", // for tags bg-color
+    neutral20: "#ededed", // for input border-color
+    neutral30: "#ededed", // for input hover border-color
+  },
+});

sge-frontend/src/utility/context/Can.js

@@ -0,0 +1,11 @@
+// ** Imports createContext function
+import { createContext } from 'react'
+
+// ** Imports createContextualCan function
+import { createContextualCan } from '@casl/react'
+
+// ** Create Context
+export const AbilityContext = createContext()
+
+// ** Init Can Context
+export const Can = createContextualCan(AbilityContext.Consumer)

sge-frontend/src/utility/context/ThemeColors.js

@@ -0,0 +1,56 @@
+// ** React Imports
+import { useEffect, useState, createContext } from 'react'
+
+// ** Create Context
+const ThemeColors = createContext()
+
+const ThemeContext = ({ children }) => {
+  // ** State
+  const [colors, setColors] = useState({})
+
+  //** ComponentDidMount
+  useEffect(() => {
+    if (window !== 'undefined') {
+      //** Get variable value
+      const getHex = color => window.getComputedStyle(document.body).getPropertyValue(color).trim()
+
+      //** Colors obj
+      const obj = {
+        primary: {
+          light: getHex('--primary').concat('1a'),
+          main: getHex('--primary')
+        },
+        secondary: {
+          light: getHex('--secondary').concat('1a'),
+          main: getHex('--secondary')
+        },
+        success: {
+          light: getHex('--success').concat('1a'),
+          main: getHex('--success')
+        },
+        danger: {
+          light: getHex('--danger').concat('1a'),
+          main: getHex('--danger')
+        },
+        warning: {
+          light: getHex('--warning').concat('1a'),
+          main: getHex('--warning')
+        },
+        info: {
+          light: getHex('--info').concat('1a'),
+          main: getHex('--info')
+        },
+        dark: {
+          light: getHex('--dark').concat('1a'),
+          main: getHex('--dark')
+        }
+      }
+
+      setColors({ ...obj })
+    }
+  }, [])
+
+  return <ThemeColors.Provider value={{ colors }}>{children}</ThemeColors.Provider>
+}
+
+export { ThemeColors, ThemeContext }

sge-frontend/src/utility/hooks/useFooterType.js

@@ -0,0 +1,34 @@
+// ** React Imports
+import { useState } from 'react'
+
+// ** Configs
+import themeConfig from '../../configs/themeConfig';
+
+export const useFooterType = () => {
+  // ** State
+  const [footerType, setFooterType] = useState(() => {
+    try {
+      return themeConfig.layout.footer.type
+    } catch (error) {
+      // ** If error also initialValue
+      console.log(error)
+      return themeConfig.layout.footer.type
+    }
+  })
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(footerType) : value
+
+      // ** Set state
+      setFooterType(valueToStore)
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  return [footerType, setValue]
+}

sge-frontend/src/utility/hooks/useGetUsers.js

@@ -0,0 +1,16 @@
+import { useDispatch } from "react-redux";
+import React from "react";
+import { getUsersHttp } from "../../redux/actions/users";
+
+function useGetUsers()
+{
+    const dispatch = useDispatch()
+    React.useEffect(() => {
+    console.log("get userss");
+    dispatch(getUsersHttp());
+    }, []);
+}
+
+export default useGetUsers;
+
+    

sge-frontend/src/utility/hooks/useLayout.js

@@ -0,0 +1,57 @@
+//** React Imports
+import { useState, useEffect } from 'react'
+
+// ** Configs
+import themeConfig from '../../configs/themeConfig'
+
+export const useLayout = () => {
+  // ** States
+  const [lastLayout, setLastLayout] = useState(null)
+  const [layout, setLayout] = useState(() => {
+    try {
+      return themeConfig.layout.type
+    } catch (error) {
+      // ** If error return initialValue
+      console.log(error)
+      return themeConfig.layout.type
+    }
+  })
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(layout) : value
+
+      // ** Set state
+      setLayout(valueToStore)
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  const handleLayout = () => {
+    // ** If layout is horizontal & screen size is equals to or below 1200
+    if (layout === 'horizontal' && window.innerWidth <= 1200) {
+      setLayout('vertical')
+      setLastLayout('horizontal')
+    }
+    // ** If lastLayout is horizontal & screen size is equals to or above 1200
+    if (lastLayout === 'horizontal' && window.innerWidth >= 1200) {
+      setLayout('horizontal')
+    }
+  }
+
+  // ** ComponentDidMount
+  useEffect(() => {
+    handleLayout()
+  }, [])
+
+  useEffect(() => {
+    // ** Window Resize Event
+    window.addEventListener('resize', handleLayout)
+  }, [layout, lastLayout])
+
+  return [layout, setValue]
+}

sge-frontend/src/utility/hooks/useNavbarColor.js

@@ -0,0 +1,34 @@
+//** React Imports
+import { useState } from 'react'
+
+// ** Configs
+import themeConfig from '../../configs/themeConfig'
+
+export const useNavbarColor = () => {
+  // ** State
+  const [navbarColor, setNavbarColor] = useState(() => {
+    try {
+      return themeConfig.layout.navbar.backgroundColor
+    } catch (error) {
+      // ** If error return initialValue
+      console.log(error)
+      return themeConfig.layout.navbar.backgroundColor
+    }
+  })
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(navbarColor) : value
+
+      // ** Set state
+      setNavbarColor(valueToStore)
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  return [navbarColor, setValue]
+}

sge-frontend/src/utility/hooks/useNavbarType.js

@@ -0,0 +1,34 @@
+//** React Imports
+import { useState } from 'react'
+
+// ** Configs
+import themeConfig from '../../configs/themeConfig'
+
+export const useNavbarType = () => {
+  // ** State
+  const [navbarType, setNavbarType] = useState(() => {
+    try {
+      return themeConfig.layout.navbar.type
+    } catch (error) {
+      // ** If error return initialValue
+      console.log(error)
+      return themeConfig.layout.navbar.type
+    }
+  })
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(navbarType) : value
+
+      // ** Set state
+      setNavbarType(valueToStore)
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  return [navbarType, setValue]
+}

sge-frontend/src/utility/hooks/useRTL.js

@@ -0,0 +1,38 @@
+//** React Imports
+import { useEffect } from 'react'
+
+// ** Store & Actions
+import { handleRTL } from '../../redux/actions/layout/index';
+import { useDispatch, useSelector } from 'react-redux'
+
+export const useRTL = () => {
+  // ** Store Vars
+  const dispatch = useDispatch()
+  const isRtl = useSelector(state => state.layout.isRTL)
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(isRtl) : value
+      dispatch(handleRTL(valueToStore))
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  useEffect(() => {
+    // ** Get HTML Tag
+    const element = document.getElementsByTagName('html')[0]
+
+    // ** If isRTL then add attr dir='rtl' with HTML else attr dir='ltr'
+    if (isRtl) {
+      element.setAttribute('dir', 'rtl')
+    } else {
+      element.setAttribute('dir', 'ltr')
+    }
+  }, [isRtl])
+
+  return [isRtl, setValue]
+}

sge-frontend/src/utility/hooks/useRouterTransition.js

@@ -0,0 +1,34 @@
+//** React Imports
+import { useState } from 'react'
+
+// ** Configs
+import themeConfig from '../../configs/themeConfig'
+
+export const useRouterTransition = () => {
+  // ** State
+  const [transition, setTransition] = useState(() => {
+    try {
+      return themeConfig.layout.routerTransition
+    } catch (error) {
+      // ** If error return initialValue
+      console.log(error)
+      return themeConfig.layout.routerTransition
+    }
+  })
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(transition) : value
+
+      // ** Set state
+      setTransition(valueToStore)
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  return [transition, setValue]
+}

sge-frontend/src/utility/hooks/useSkin.js

@@ -0,0 +1,58 @@
+//** React Imports
+import { useState, useEffect } from 'react'
+
+// ** Configs
+import themeConfig from '../../configs/themeConfig'
+
+export const useSkin = () => {
+  // ** State
+  const [skin, setSkin] = useState(() => {
+    try {
+      // ** Get from local storage by key
+      const item = window.localStorage.getItem('skin')
+      // ** Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : themeConfig.layout.skin
+    } catch (error) {
+      // ** If error also return initialValue
+      console.log(error)
+      return themeConfig.layout.skin
+    }
+  })
+
+  // ** Return a wrapped version of useState's setter function
+  const setValue = value => {
+    try {
+      // ** Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(skin) : value
+      // ** Set state
+      setSkin(valueToStore)
+      // ** Save to local storage
+      window.localStorage.setItem('skin', JSON.stringify(valueToStore))
+    } catch (error) {
+      // ** A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+
+  useEffect(() => {
+    // ** Get Body Tag
+    const element = window.document.body
+
+    // ** Define classnames for skins
+    const classNames = {
+      dark: 'dark-layout',
+      bordered: 'bordered-layout',
+      'semi-dark': 'semi-dark-layout'
+    }
+
+    // ** Remove all classes from Body on mount
+    element.classList.remove(...element.classList)
+
+    // ** If skin is not light add skin class
+    if (skin !== 'light') {
+      element.classList.add(classNames[skin])
+    }
+  }, [skin])
+
+  return [skin, setValue]
+}