Change to using arrow functions (#1603)

* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

docs/src/pages/graphql.tsx

@@ -1,34 +1,38 @@
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { GraphiQL } from 'graphiql';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Layout from '@theme/Layout';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-
-import 'graphiql/graphiql.css';
+import { createGraphiQLFetcher } from "@graphiql/toolkit";
+import { GraphiQL } from "graphiql";
+import React from "react";
+import ReactDOM from "react-dom";
+import Layout from "@theme/Layout";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
+import "graphiql/graphiql.css";
 
 // Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
-function GraphiQLComponent() {
-  if(!window.localStorage.getItem('graphiql:theme') && window.localStorage.getItem('theme') != 'dark') {
-    window.localStorage.setItem('graphiql:theme', 'light');
-  } 
+const GraphiQLComponent = () => {
+  if (
+    !window.localStorage.getItem("graphiql:theme") &&
+    window.localStorage.getItem("theme") != "dark"
+  ) {
+    window.localStorage.setItem("graphiql:theme", "light");
+  }
 
-  const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+  const fetcher = createGraphiQLFetcher({
+    url: "https://api.twenty.com/graphql",
+  });
   return (
-  <div className="fullHeightPlayground">
-    <GraphiQL fetcher={fetcher} />;
-  </div>
+    <div className="fullHeightPlayground">
+      <GraphiQL fetcher={fetcher} />;
+    </div>
   );
-}
+};
 
-export default function graphQL() {
-  return (
-    <Layout title="GraphQL Playground" description="GraphQL Playground for Twenty">
-      
-        <BrowserOnly>
-          {() => <GraphiQLComponent />}
-        </BrowserOnly>
-    </Layout>
-  );
-}
+const graphQL = () => (
+  <Layout
+    title="GraphQL Playground"
+    description="GraphQL Playground for Twenty"
+  >
+    <BrowserOnly>{() => <GraphiQLComponent />}</BrowserOnly>
+  </Layout>
+);
+
+export default graphQL;

docs/src/theme/DocSidebarItem/Link/index.js

@@ -32,14 +32,14 @@ import {
 } from "react-icons/tb";
 
 
-export default function DocSidebarItemLink({
+const DocSidebarItemLink = ({
   item,
   onItemClick,
   activePath,
   level,
   index,
   ...props
-}) {
+}) => {
   const {href, label, className, autoAddBaseUrl, customProps = {}} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
@@ -104,3 +104,5 @@ export default function DocSidebarItemLink({
     </li>
   );
 }
+
+export default DocSidebarItemLink;

docs/src/theme/Icon/DarkMode/index.js

@@ -3,7 +3,9 @@ import { TbMoon } from 'react-icons/tb';
 import {useColorMode} from '@docusaurus/theme-common';
 
 
-export default function IconDarkMode(props) {
+const IconDarkMode = (props) => {
   const { colorMode } = useColorMode().colorMode;
   return colorMode === 'dark' ? <TbMoon /> : <></>;
 }
+
+export default IconDarkMode

docs/src/theme/Icon/Home/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TbHome } from 'react-icons/tb';
-export default function IconHome(props) {
-  return <TbHome size={14} />;
-}
+import React from "react";
+import { TbHome } from "react-icons/tb";
+const IconHome = (props) => <TbHome size={14} />;
+
+export default IconHome;

docs/src/theme/Icon/LightMode/index.js

@@ -3,7 +3,9 @@ import { TbSun } from 'react-icons/tb';
 import {useColorMode} from '@docusaurus/theme-common';
 
 
-export default function IconLightMode(props) {
+const IconLightMode = (props) =>  {
   const { colorMode } = useColorMode().colorMode;
   return colorMode === 'dark' ? <></>: <TbSun /> ;
 }
+
+export default IconLightMode;