chore: cleaned up imports and refactors

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
     "@ant-design/colors": "^7.0.2",
-    "@ant-design/icons": "^5.2.6",
+    "@ant-design/icons": "^5.3.0",
     "@changesets/cli": "^2.26.2",
     "@tanem/react-nprogress": "^5.0.51",
     "antd": "^5.10.1",

src/App.tsx

@@ -1,17 +1,11 @@
 import { RouterProvider } from 'react-router-dom';
-import { Alert, ConfigProvider } from 'antd';
+import { ConfigProvider } from 'antd';
 import { HelmetProvider } from 'react-helmet-async';
-import Marquee from 'react-fast-marquee';
 import { StylesContext } from './context';
 import routes from './routes/routes.tsx';
-import { useEffect, useState } from 'react';
-import { getToken, onMessage } from 'firebase/messaging';
-import { messaging } from './firebase/firebaseConfig.ts';
 
 import './App.css';
 
-const { VITE_APP_VAPID_KEY } = import.meta.env;
-
 // color palettes: triadic #A1A7CB, #CBA1A7, #A7CBA1
 // 10 color objects of primary #2378c3 as generated by https://smart-swatch.netlify.app/#2378c3
 // This is for reference purposes
@@ -31,39 +25,6 @@ export const COLOR = {
 };
 
 function App() {
-  const [showBanner, setShowBanner] = useState(false);
-  const [bannerMessage, setBannerMessage] = useState<
-    { image?: string; title?: string; body?: string } | undefined
-  >();
-
-  async function requestPermission() {
-    //requesting permission using Notification API
-    const permission = await Notification.requestPermission();
-
-    if (permission === 'granted') {
-      const token = await getToken(messaging, {
-        vapidKey: VITE_APP_VAPID_KEY,
-      });
-
-      //We can send token to server
-      console.log('Token generated : ', token);
-    } else if (permission === 'denied') {
-      //notifications are blocked
-      alert('You denied for the notification');
-    }
-  }
-
-  onMessage(messaging, (payload) => {
-    setShowBanner(true);
-    setBannerMessage(payload.notification);
-  });
-
-  useEffect(() => {
-    requestPermission();
-  }, []);
-
-  console.log(showBanner);
-
   return (
     <HelmetProvider>
       <ConfigProvider
@@ -142,19 +103,6 @@ function App() {
             },
           }}
         >
-          {showBanner && (
-            <Alert
-              message={
-                <Marquee pauseOnHover gradient={false}>
-                  <b>{bannerMessage?.title}:</b>&nbsp;&nbsp;&nbsp;
-                  {bannerMessage?.body}
-                </Marquee>
-              }
-              type="info"
-              showIcon
-              banner
-            />
-          )}
           <RouterProvider router={routes} />
         </StylesContext.Provider>
       </ConfigProvider>

src/components/BackBtn/BackBtn.tsx

@@ -7,7 +7,7 @@ type Props = {
   iconOnly?: boolean;
 } & ButtonProps;
 
-const BackBtn = ({ wIcon, iconOnly, ...others }: Props) => {
+export const BackBtn = ({ wIcon, iconOnly, ...others }: Props) => {
   const navigate = useNavigate();
 
   return (
@@ -22,5 +22,3 @@ const BackBtn = ({ wIcon, iconOnly, ...others }: Props) => {
     </Tooltip>
   );
 };
-
-export default BackBtn;

src/components/Card/Card.tsx

@@ -5,12 +5,10 @@ import './styles.css';
 
 type Props = { children: ReactNode } & CardProps;
 
-const Card = ({ children, ...others }: Props) => {
+export const Card = ({ children, ...others }: Props) => {
   return (
     <AntdCard className="card" {...others}>
       {children}
     </AntdCard>
   );
 };
-
-export default Card;

src/components/ContactForm/ContactForm.tsx

@@ -6,7 +6,7 @@ const { TextArea } = Input;
 
 type Props = FormProps;
 
-const ContactForm = ({ ...others }: Props) => {
+export const ContactForm = ({ ...others }: Props) => {
   const stylesContext = useStylesContext();
 
   return (
@@ -39,5 +39,3 @@ const ContactForm = ({ ...others }: Props) => {
     </div>
   );
 };
-
-export default ContactForm;

src/components/Container/Container.tsx

@@ -12,7 +12,7 @@ type ContainerProps = {
   style?: CSSProperties;
 } & HTMLProps<HTMLDivElement>;
 
-const Container = ({ children, style, ...others }: ContainerProps) => {
+export const Container = ({ children, style, ...others }: ContainerProps) => {
   const [containerWidth, setContainerWidth] = useState<string>();
   const isMedium = useMediaQuery({ minWidth: 769 }),
     isLarge = useMediaQuery({ minWidth: 992 }),
@@ -47,5 +47,3 @@ const Container = ({ children, style, ...others }: ContainerProps) => {
     </div>
   );
 };
-
-export default Container;

src/components/Container/index.ts

@@ -1 +1 @@
-export { default } from './Container.tsx';
+export { Container } from './Container.tsx';

src/components/EmployeeCard/EmployeeCard.tsx

@@ -8,7 +8,7 @@ type Props = {
   showInfo?: boolean;
 } & CardProps;
 
-const EmployeeCard = ({ data, showInfo, ...others }: Props) => {
+export const EmployeeCard = ({ data, showInfo, ...others }: Props) => {
   const {
     avatar,
     first_name,
@@ -50,5 +50,3 @@ const EmployeeCard = ({ data, showInfo, ...others }: Props) => {
     </AntdCard>
   );
 };
-
-export default EmployeeCard;

src/components/FaqCollapse/FaqCollapse.tsx

@@ -2,8 +2,6 @@ import { Collapse, CollapseProps } from 'antd';
 
 type Props = CollapseProps;
 
-const FaqCollapse = ({ ...others }: Props) => {
+export const FaqCollapse = ({ ...others }: Props) => {
   return <Collapse {...others} />;
 };
-
-export default FaqCollapse;

src/components/Flex/Flex.tsx

@@ -8,7 +8,7 @@ type Props = {
   children: ReactNode;
 } & CSSProperties;
 
-const Flex = ({
+export const Flex = ({
   flexDirection,
   alignItems,
   gap,
@@ -39,5 +39,3 @@ const Flex = ({
     </div>
   );
 };
-
-export default Flex;

src/components/Loader/Loader.tsx

@@ -2,7 +2,7 @@ import { Spin, theme } from 'antd';
 
 import './styles.css';
 
-const Loader = () => {
+export const Loader = () => {
   const {
     token: { borderRadius },
   } = theme.useToken();
@@ -15,5 +15,3 @@ const Loader = () => {
     </div>
   );
 };
-
-export default Loader;

src/components/Logo/Logo.tsx

@@ -15,7 +15,7 @@ type LogoProps = {
   bgColor?: CSSProperties['backgroundColor'];
 } & Partial<FlexProps>;
 
-const Logo = ({
+export const Logo = ({
   asLink,
   color,
   href,
@@ -73,5 +73,3 @@ const Logo = ({
     </Flex>
   );
 };
-
-export default Logo;

src/components/MoreMenu/MoreMenu.tsx

@@ -31,7 +31,7 @@ const items: MenuProps['items'] = [
   },
 ];
 
-const MoreMenu = () => {
+export const MoreMenu = () => {
   return (
     <Dropdown menu={{ items }} placement="bottomLeft">
       <Button>
@@ -40,5 +40,3 @@ const MoreMenu = () => {
     </Dropdown>
   );
 };
-
-export default MoreMenu;

src/components/NotificationsCard/NotificationsCard.tsx

@@ -10,7 +10,12 @@ type Props = {
   error?: any;
 } & CardProps;
 
-const NotificationsCard = ({ data, loading, error, ...others }: Props) => {
+export const NotificationsCard = ({
+  data,
+  loading,
+  error,
+  ...others
+}: Props) => {
   return (
     <Card
       title="Notifications"
@@ -49,5 +54,3 @@ const NotificationsCard = ({ data, loading, error, ...others }: Props) => {
     </Card>
   );
 };
-
-export default NotificationsCard;

src/components/NotificationsItem/NotificationsItem.tsx

@@ -10,7 +10,7 @@ type Props = {
   data: Notifications;
 } & Omit<FlexProps, 'children'>;
 
-const NotificationsItem = ({ data, ...others }: Props) => {
+export const NotificationsItem = ({ data, ...others }: Props) => {
   const {
     notification_type,
     notification_category,
@@ -54,5 +54,3 @@ const NotificationsItem = ({ data, ...others }: Props) => {
     </Flex>
   );
 };
-
-export default NotificationsItem;

src/components/Nprogress/Bar.tsx

@@ -3,7 +3,7 @@ type Props = {
   progress: number;
 };
 
-const Bar = ({ animationDuration, progress }: Props) => (
+export const Bar = ({ animationDuration, progress }: Props) => (
   <div
     style={{
       background: '#29d',
@@ -31,5 +31,3 @@ const Bar = ({ animationDuration, progress }: Props) => (
     />
   </div>
 );
-
-export default Bar;

src/components/Nprogress/Container.tsx

@@ -6,7 +6,11 @@ type Props = {
   children: ReactNode;
 };
 
-const Container = ({ animationDuration, children, isFinished }: Props) => (
+export const NContainer = ({
+  animationDuration,
+  children,
+  isFinished,
+}: Props) => (
   <div
     style={{
       opacity: isFinished ? 0 : 1,
@@ -17,5 +21,3 @@ const Container = ({ animationDuration, children, isFinished }: Props) => (
     {children}
   </div>
 );
-
-export default Container;

src/components/Nprogress/Progress.tsx

@@ -1,26 +1,26 @@
 import { useNProgress } from '@tanem/react-nprogress';
-import { Bar, Container, Nspinner } from './index.ts';
+import { NContainer } from './Container.tsx';
+import { Bar } from './Bar.tsx';
+import { NSpinner } from './Spinner.tsx';
 
 type Props = {
   isAnimating?: boolean;
 };
 
-const Progress = ({ isAnimating }: Props) => {
+export const NProgress = ({ isAnimating }: Props) => {
   const { animationDuration, isFinished, progress } = useNProgress({
     isAnimating,
   });
 
   return (
-    <Container animationDuration={animationDuration} isFinished={isFinished}>
+    <NContainer animationDuration={animationDuration} isFinished={isFinished}>
       <Bar animationDuration={animationDuration} progress={progress} />
-      <Nspinner />
+      <NSpinner />
       {/*
               This example doesn't use a spinner component so the UI stays
               tidy. You're free to render whatever is appropriate for your
               use-case.
               */}
-    </Container>
+    </NContainer>
   );
 };
-
-export default Progress;

src/components/Nprogress/Spinner.tsx

@@ -1,6 +1,6 @@
 import './spinner.css';
 
-const Spinner = () => (
+export const NSpinner = () => (
   <div
     style={{
       display: 'block',
@@ -25,5 +25,3 @@ const Spinner = () => (
     />
   </div>
 );
-
-export default Spinner;

src/components/Nprogress/index.ts

@@ -1,6 +1,4 @@
-import Bar from './Bar.tsx';
-import Container from './Container.tsx';
-import Progress from './Progress.tsx';
-import Spinner from './Spinner.tsx';
-
-export { Bar, Container, Progress as Nprogress, Spinner as Nspinner };
+export { Bar } from './Bar.tsx';
+export { NContainer } from './Container.tsx';
+export { NProgress } from './Progress.tsx';
+export { NSpinner } from './Spinner.tsx';

src/components/PageHeader/PageHeader.tsx

@@ -8,7 +8,7 @@ type Props = {
   breadcrumbs: BreadcrumbProps['items'];
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const PageHeader = ({ breadcrumbs, title, ...others }: Props) => {
+export const PageHeader = ({ breadcrumbs, title, ...others }: Props) => {
   return (
     <div {...others}>
       <Space direction="vertical" size="small">
@@ -26,5 +26,3 @@ const PageHeader = ({ breadcrumbs, title, ...others }: Props) => {
     </div>
   );
 };
-
-export default PageHeader;

src/components/PricingTable/PricingTable.tsx

@@ -34,7 +34,7 @@ type Props = {
   loading?: boolean;
 } & CardProps;
 
-const PricingTable = ({ data, error, loading, ...others }: Props) => {
+export const PricingTable = ({ data, error, loading, ...others }: Props) => {
   const {
     token: { colorPrimary, colorFillSecondary },
   } = theme.useToken();
@@ -143,5 +143,3 @@ const PricingTable = ({ data, error, loading, ...others }: Props) => {
     </Card>
   );
 };
-
-export default PricingTable;