@campxdev/shared 1.1.7 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Layout/Header/AppHeader.tsx

@@ -16,7 +16,6 @@ import {
 
 import CogWheelMenu from './CogWheelMenu'
 import HelpWidget from './HelpWidget/HelpWidget'
-import Notification from './Notification'
 import { StyledHeader, StyledImageWrapper } from './styles'
 import UserBox from './UserBox'
 

package/src/components/Layout/Header/UserBox.tsx

@@ -56,11 +56,11 @@ export default function UserBox({
         }
         menu={[
           ...actions,
-          // {
-          //   label: 'My Tickets',
-          //   icon: <ConfirmationNumberOutlinedIcon />,
-          //   onClick: handleTicketOpen,
-          // },
+          {
+            label: 'My Tickets',
+            icon: <ConfirmationNumberOutlinedIcon />,
+            onClick: handleTicketOpen,
+          },
 
           {
             label: 'Change Password',

package/src/components/Layout/Header/applications.ts

@@ -75,6 +75,7 @@ export const applications = [
     ? [
         {
           title: 'PeopleX',
+          key: 'people',
           path: isDevelopment ? origins.people.dev : origins.people.prod,
           icon: peopleSmall,
           description: 'Manage People in the Campus',

package/src/components/LoginForm.tsx

@@ -14,8 +14,6 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { FormTextField } from './HookForm'
 
-const developmentOrigin = window.location.origin + '/campx_dev'
-
 export const StyledTextField = styled(FormTextField)(({ theme }) => ({
   '& .MuiInputBase-root': {
     minHeight: '60px',
@@ -45,8 +43,9 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
           : 'https://api.campx.dev/auth-server/auth/login',
         data: values,
       })
+      Cookies.set('campx_tenant', res?.data?.subDomain)
       Cookies.set('campx_session_key', res.data?.token)
-      window.location.href = developmentOrigin
+      window.location.reload()
     } catch (err) {
       // eslint-disable-next-line no-console
       console.log(err)

package/src/components/{NoDataIllustration/NoDataIllustration.tsx → NoDataIllustration.tsx}

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material'
-import Image from '../Image'
+import Image from './Image'
 import { ReactNode } from 'react'
 
 interface Props {

package/src/components/{SearchBar/SearchBar.tsx → SearchBar.tsx}

@@ -1,6 +1,7 @@
 import { Search, Tune } from '@mui/icons-material'
 import { Box, InputAdornment, styled, TextField } from '@mui/material'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
+import _ from 'lodash'
 
 interface SearchBarProps {
   onSearch: (v: string) => void
@@ -9,18 +10,38 @@ interface SearchBarProps {
   }
 }
 
+const StyledButtonWrapper = styled(Box)(({ theme }) => ({
+  width: '52px',
+  border: theme.borders.grayLight,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  '&:active': {
+    border: `1px solid ${theme.palette.primary.main}`,
+  },
+  transition: 'border 0.1s ease-in-out',
+}))
+
 export default function SearchBar({ onSearch, filters }: SearchBarProps) {
-  const [search, setSearch] = useState('')
+  const [, setSearch] = useState('')
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e) => {
+        setSearch(e.target.value)
+        setSearch(e.target.value)
+      }, 300),
+    [],
+  )
+
   return (
     <Box sx={{ display: 'flex', gap: '20px' }}>
       <TextField
         sx={{ maxWidth: '600px' }}
         label="Search"
-        value={search}
-        onChange={(e) => {
-          setSearch(e.target.value)
-          onSearch(e.target.value)
-        }}
+        onChange={debouncedChangeHandler}
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
@@ -37,17 +58,3 @@ export default function SearchBar({ onSearch, filters }: SearchBarProps) {
     </Box>
   )
 }
-
-const StyledButtonWrapper = styled(Box)(({ theme }) => ({
-  width: '52px',
-  border: theme.borders.grayLight,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  '&:active': {
-    border: `1px solid ${theme.palette.primary.main}`,
-  },
-  transition: 'border 0.1s ease-in-out',
-}))

package/src/components/{UploadDocument/UploadDocument.tsx → UploadDocument.tsx}

@@ -2,7 +2,7 @@ import { Box, CircularProgress, Stack, styled, Typography } from '@mui/material'
 import { ReactNode, useRef, useState } from 'react'
 import AttachFileIcon from '@mui/icons-material/AttachFile'
 import { toast } from 'react-toastify'
-import axios from '../../config/axios'
+import axios from '../config/axios'
 
 export default function UploadDocument({
   accept = '.doc,.docx,.pdf',

package/src/components/index.ts

@@ -4,7 +4,7 @@ import ImageUpload from './ImageUpload'
 import FloatingContainer from './FloatingContainer'
 import TabsContainer from './Tabs/TabsContainer'
 import { StyledTableContainer } from './StyledTableContainer'
-import { SearchBar } from './SearchBar'
+import SearchBar from './SearchBar'
 import { DrawerButton, DialogButton } from './ModalButtons'
 import DetailsGrid from './DetailsGrid'
 import AppHeader from './Layout/Header'

package/src/config/axios.ts

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify'
 import Cookies from 'js-cookie'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import { isDevelopment } from '../constants'
-import { campxTenantKey } from '../contexts/Providers'
 
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
@@ -22,7 +21,7 @@ let axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    'x-tenant-id': isDevelopment ? 'campx_dev' : campxTenantKey,
+    'x-tenant-id': clientId,
     ...(isDevelopment &&
       sessionKey && {
         campx_session_key: sessionKey,

package/src/config/axiosXTenant.ts

@@ -12,7 +12,7 @@ const axiosTenant = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    'x-tenant-id': isDevelopment ? 'campx_dev' : clientId,
+    'x-tenant-id': clientId,
     ...(isDevelopment &&
       sessionKey && {
         campx_session_key: sessionKey,

package/src/constants/isDevelopment.ts

@@ -1,3 +1,3 @@
+const urlTenantKey = window.location.pathname.split('/')[1]
 export const isDevelopment =
-  process.env.NODE_ENV === 'development' ||
-  window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'
+  process.env.NODE_ENV === 'development' || urlTenantKey === 'campx_dev'

package/src/contexts/Providers.tsx

@@ -1,22 +1,39 @@
-import MuiThemeProvider from '../theme/MuiThemeProvider'
-import ConfirmContextProvider from '../components/PopupConfirm/ConfirmContextProvider'
 import { CssBaseline } from '@mui/material'
 import { BrowserRouter } from 'react-router-dom'
+import ConfirmContextProvider from '../components/PopupConfirm/ConfirmContextProvider'
+import MuiThemeProvider from '../theme/MuiThemeProvider'
 import QueryClientProvider from './QueryClientProvider'
 
-import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
+import Cookies from 'js-cookie'
+import { ReactNode, useEffect, useState } from 'react'
 import { ToastContainer } from '../components'
-import LoginFormProvider from './LoginFormProvider'
-import { ReactNode } from 'react'
+import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import { isDevelopment } from '../constants'
-import useAppInit from '../hooks/useAppInit'
-import Cookies from 'js-cookie'
+import LoginFormProvider from './LoginFormProvider'
 
 export const campxTenantKey = Cookies.get('campx_tenant')
 export const urlTenantKey = window.location.pathname.split('/')[1]
 
 export default function Providers({ children }: { children: ReactNode }) {
-  const { isInvalid } = useAppInit()
+  const [isInvalid, setIsInvalid] = useState(false)
+
+  useEffect(() => {
+    if (campxTenantKey === 'campx_dev') {
+      window.location.href = window.location.origin + '/campx_dev'
+    }
+
+    if (!isDevelopment) {
+      if (!urlTenantKey && campxTenantKey) {
+        return window.location.replace(
+          window.location.origin + `/${campxTenantKey}`,
+        )
+      }
+
+      if (!urlTenantKey) {
+        setIsInvalid(true)
+      }
+    }
+  }, [])
 
   return (
     <BrowserRouter basename={isDevelopment ? 'campx_dev' : urlTenantKey}>

package/src/hooks/useAuth.ts

@@ -79,11 +79,11 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
   }
 
   useEffect(() => {
-    if (window.location.pathname === '/') {
-      if (isDevelopment) {
-        window.location.replace(window.location.origin + '/campx_dev')
-      }
-    }
+    // if (window.location.pathname === '/') {
+    //   if (isDevelopment) {
+    //     window.location.replace(window.location.origin + '/campx_dev')
+    //   }
+    // }
     appInit()
   }, [])
 

package/src/components/JsonPreview/index.tsx

@@ -1 +0,0 @@
-export { default } from './JsonPreview'

package/src/components/LabelValue/index.tsx

@@ -1 +0,0 @@
-export { default } from './LabelValue'

package/src/components/NoDataIllustration/index.tsx

@@ -1 +0,0 @@
-export { default } from './NoDataIllustration'

package/src/components/Router.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-function Router() {
-  return <div>Router</div>
-}
-
-export default Router

package/src/components/Row/index.tsx

@@ -1 +0,0 @@
-export { default } from './Row'

package/src/components/SearchBar/index.tsx

@@ -1 +0,0 @@
-export { default as SearchBar } from './SearchBar'

package/src/components/SwitchButton/index.tsx

@@ -1 +0,0 @@
-export { default } from './SwitchButton'

package/src/components/UploadDocument/index.tsx

@@ -1 +0,0 @@
-export { default } from './UploadDocument'

package/src/hooks/useAppInit.ts

@@ -1,33 +0,0 @@
-import Cookies from 'js-cookie'
-import { useEffect, useRef, useState } from 'react'
-import { isDevelopment } from '../constants'
-import { campxTenantKey } from '../contexts/Providers'
-
-const urlTenantKey = window.location.pathname.split('/')[1]
-
-export default function useAppInit() {
-  const [isInvalid, setIsInvalid] = useState(false)
-
-  useEffect(() => {
-    if (!isDevelopment) {
-      if (!urlTenantKey && campxTenantKey) {
-        return window.location.replace(
-          window.location.origin + `/${campxTenantKey}`,
-        )
-      }
-
-      if (!urlTenantKey) {
-        setIsInvalid(true)
-      }
-    }
-
-    if (window.location.pathname === '/' && isDevelopment) {
-      Cookies.set('campx_tenant', 'campx_dev')
-      window.location.href = window.location.origin + '/campx_dev'
-    }
-  }, [])
-
-  return {
-    isInvalid,
-  }
-}