feat(1146): prettier tabWidth changed to 2

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
     singleQuote: true,
-    tabWidth: 4,
+    tabWidth: 2,
     semi: true,
     printWidth: 100,
 };

src/App.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-    render(<App />);
-    const linkElement = screen.getByText(/React + Typescript/i);
-    expect(linkElement).toBeInTheDocument();
+  render(<App />);
+  const linkElement = screen.getByText(/React + Typescript/i);
+  expect(linkElement).toBeInTheDocument();
 });

src/App.tsx

@@ -4,11 +4,11 @@ import { Router } from './routes';
 import './App.scss';
 
 const App = (): JSX.Element => {
-    return (
-        <BrowserRouter>
-            <Router />
-        </BrowserRouter>
-    );
+  return (
+    <BrowserRouter>
+      <Router />
+    </BrowserRouter>
+  );
 };
 
 export default App;

src/components/Container/Container.tsx

@@ -6,5 +6,5 @@ import style from './container.module.scss';
  * Limiting the width to a particular value in big screen
  */
 export const Container: FC = ({ children }) => {
-    return <div className={style.container}>{children}</div>;
+  return <div className={style.container}>{children}</div>;
 };

src/hooks/useInfiniteScroll/useInfiniteScroll.tsx

@@ -9,31 +9,31 @@ import { useEffect } from 'react';
  */
 
 export const useInfiniteScroll = (
-    callback: () => void
+  callback: () => void
 ): [boolean, (isFetching: boolean) => void] => {
-    const [isFetching, setIsFetching] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
 
-    useEffect(() => {
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    useEffect(() => {
-        if (!isFetching) return;
-        callback();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFetching]);
+  useEffect(() => {
+    if (!isFetching) return;
+    callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching]);
 
-    function handleScroll() {
-        if (
-            window.innerHeight + document.documentElement.scrollTop !==
-                document.documentElement.scrollHeight ||
-            isFetching
-        )
-            return;
-        setIsFetching(true);
-    }
+  function handleScroll() {
+    if (
+      window.innerHeight + document.documentElement.scrollTop !==
+        document.documentElement.scrollHeight ||
+      isFetching
+    )
+      return;
+    setIsFetching(true);
+  }
 
-    return [isFetching, setIsFetching];
+  return [isFetching, setIsFetching];
 };

src/hooks/usePopUp/usePopUp.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 interface usePopUpProps {
-    name: Readonly<string>;
-    isOpen: boolean;
+  name: Readonly<string>;
+  isOpen: boolean;
 }
 
 /**
@@ -11,17 +11,17 @@ interface usePopUpProps {
  * SIDENOTE: On inputting give it as const and not string with (as const)
  */
 type usePopUpState<T extends Readonly<string[]> | usePopUpProps[]> = {
-    [P in T extends usePopUpProps[] ? T[number]['name'] : T[number]]: {
-        isOpen: boolean;
-        data?: unknown;
-    };
+  [P in T extends usePopUpProps[] ? T[number]['name'] : T[number]]: {
+    isOpen: boolean;
+    data?: unknown;
+  };
 };
 
 interface usePopUpReturn<T extends Readonly<string[]> | usePopUpProps[]> {
-    popUp: usePopUpState<T>;
-    handlePopUpOpen: (popUpName: keyof usePopUpState<T>, data?: unknown) => void;
-    handlePopUpClose: (popUpName: keyof usePopUpState<T>) => void;
-    handlePopUpToggle: (popUpName: keyof usePopUpState<T>) => void;
+  popUp: usePopUpState<T>;
+  handlePopUpOpen: (popUpName: keyof usePopUpState<T>, data?: unknown) => void;
+  handlePopUpClose: (popUpName: keyof usePopUpState<T>) => void;
+  handlePopUpToggle: (popUpName: keyof usePopUpState<T>) => void;
 }
 
 /**
@@ -30,34 +30,34 @@ interface usePopUpReturn<T extends Readonly<string[]> | usePopUpProps[]> {
  * @param popUpNames: the names of popUp containers eg: ["popUp1","second"] or [{name:"popUp2",isOpen:bool}]
  */
 export const usePopUp = <T extends Readonly<string[]> | usePopUpProps[]>(
-    popUpNames: T
+  popUpNames: T
 ): usePopUpReturn<T> => {
-    const [popUp, setPopUp] = useState<usePopUpState<T>>(
-        Object.fromEntries(
-            popUpNames.map((popUpName) =>
-                typeof popUpName === 'string'
-                    ? [popUpName, { isOpen: false }]
-                    : [popUpName.name, { isOpen: popUpName.isOpen }]
-            ) // convert into an array of [[popUpName,state]] then into Object
-        ) as usePopUpState<T> // to override generic string return type of the function
-    );
-
-    const handlePopUpOpen = (popUpName: keyof usePopUpState<T>, data?: unknown) => {
-        setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: true, data } }));
-    };
-
-    const handlePopUpClose = (popUpName: keyof usePopUpState<T>) => {
-        setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: false } }));
-    };
-
-    const handlePopUpToggle = (popUpName: keyof usePopUpState<T>) => {
-        setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: !popUp[popUpName].isOpen } }));
-    };
-
-    return {
-        popUp,
-        handlePopUpOpen,
-        handlePopUpClose,
-        handlePopUpToggle,
-    };
+  const [popUp, setPopUp] = useState<usePopUpState<T>>(
+    Object.fromEntries(
+      popUpNames.map((popUpName) =>
+        typeof popUpName === 'string'
+          ? [popUpName, { isOpen: false }]
+          : [popUpName.name, { isOpen: popUpName.isOpen }]
+      ) // convert into an array of [[popUpName,state]] then into Object
+    ) as usePopUpState<T> // to override generic string return type of the function
+  );
+
+  const handlePopUpOpen = (popUpName: keyof usePopUpState<T>, data?: unknown) => {
+    setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: true, data } }));
+  };
+
+  const handlePopUpClose = (popUpName: keyof usePopUpState<T>) => {
+    setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: false } }));
+  };
+
+  const handlePopUpToggle = (popUpName: keyof usePopUpState<T>) => {
+    setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: !popUp[popUpName].isOpen } }));
+  };
+
+  return {
+    popUp,
+    handlePopUpOpen,
+    handlePopUpClose,
+    handlePopUpToggle,
+  };
 };

src/hooks/useToggle/useToggle.tsx

@@ -1,35 +1,35 @@
 import { useState } from 'react';
 
 type useToggleReturn = {
-    handleOpen: () => void;
-    handleClose: () => void;
-    handleToggle: () => void;
-    isOpen: boolean;
+  handleOpen: () => void;
+  handleClose: () => void;
+  handleToggle: () => void;
+  isOpen: boolean;
 };
 
 /**
  * A hook to handle typical ui state management like toggling, opening and closing
  */
 
 export const useToggle = (initialState = false): useToggleReturn => {
-    const [isOpen, setIsOpen] = useState(initialState);
+  const [isOpen, setIsOpen] = useState(initialState);
 
-    const handleOpen = (): void => {
-        setIsOpen(true);
-    };
+  const handleOpen = (): void => {
+    setIsOpen(true);
+  };
 
-    const handleClose = (): void => {
-        setIsOpen(false);
-    };
+  const handleClose = (): void => {
+    setIsOpen(false);
+  };
 
-    const handleToggle = (): void => {
-        setIsOpen((isOpen) => !isOpen);
-    };
+  const handleToggle = (): void => {
+    setIsOpen((isOpen) => !isOpen);
+  };
 
-    return {
-        handleOpen,
-        handleClose,
-        handleToggle,
-        isOpen,
-    };
+  return {
+    handleOpen,
+    handleClose,
+    handleToggle,
+    isOpen,
+  };
 };

src/index.tsx

@@ -5,10 +5,10 @@ import '@patternfly/react-core/dist/styles/base.css';
 import App from './App';
 
 ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById('root')
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/layouts/AppLayout/AppLayout.tsx

@@ -9,29 +9,25 @@ import { Footer } from './components/Footer';
 import styles from './appLayout.module.scss';
 
 export const AppLayout: FC = ({ children }) => {
-    return (
-        <Page>
-            <Container>
-                <Flex
-                    direction={{ default: 'column' }}
-                    className="h-full"
-                    flexWrap={{ default: 'nowrap' }}
-                >
-                    <FlexItem>
-                        <PageSection padding={{ default: 'padding' }} className={styles.banner}>
-                            <AppBanner />
-                        </PageSection>
-                    </FlexItem>
-                    <Flex direction={{ default: 'column' }} flex={{ default: 'flex_1' }}>
-                        <FlexItem>{children}</FlexItem>
-                    </Flex>
-                    <FlexItem>
-                        <PageSection padding={{ default: 'padding' }} className={styles.footer}>
-                            <Footer />
-                        </PageSection>
-                    </FlexItem>
-                </Flex>
-            </Container>
-        </Page>
-    );
+  return (
+    <Page>
+      <Container>
+        <Flex direction={{ default: 'column' }} className="h-full" flexWrap={{ default: 'nowrap' }}>
+          <FlexItem>
+            <PageSection padding={{ default: 'padding' }} className={styles.banner}>
+              <AppBanner />
+            </PageSection>
+          </FlexItem>
+          <Flex direction={{ default: 'column' }} flex={{ default: 'flex_1' }}>
+            <FlexItem>{children}</FlexItem>
+          </Flex>
+          <FlexItem>
+            <PageSection padding={{ default: 'padding' }} className={styles.footer}>
+              <Footer />
+            </PageSection>
+          </FlexItem>
+        </Flex>
+      </Container>
+    </Page>
+  );
 };

src/layouts/AppLayout/components/AppBanner/AppBanner.tsx

@@ -1,31 +1,31 @@
 import {
-    Flex,
-    FlexItem,
-    Text,
-    TextContent,
-    TextVariants,
-    Title,
-    TitleSizes,
+  Flex,
+  FlexItem,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+  TitleSizes,
 } from '@patternfly/react-core';
 
 import style from './appBanner.module.scss';
 
 export const AppBanner = (): JSX.Element => {
-    return (
-        <Flex alignItems={{ default: 'alignItemsCenter' }}>
-            <FlexItem spacer={{ default: 'spacerLg' }}>
-                <img src="/images/innovation_logo.svg" className={style.logo} />
-            </FlexItem>
-            <FlexItem>
-                <Title headingLevel="h6" size={TitleSizes['3xl']} className="pb-4 text-light">
-                    Innovation Hub
-                </Title>
-                <TextContent>
-                    <Text component={TextVariants.small}>
-                        A place to share your ideas and find other passionate people
-                    </Text>
-                </TextContent>
-            </FlexItem>
-        </Flex>
-    );
+  return (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <img src="/images/innovation_logo.svg" className={style.logo} />
+      </FlexItem>
+      <FlexItem>
+        <Title headingLevel="h6" size={TitleSizes['3xl']} className="pb-4 text-light">
+          Innovation Hub
+        </Title>
+        <TextContent>
+          <Text component={TextVariants.small}>
+            A place to share your ideas and find other passionate people
+          </Text>
+        </TextContent>
+      </FlexItem>
+    </Flex>
+  );
 };