switched to functions for hoisting

Author: jonshipman

.env

@@ -1 +1,2 @@
-REACT_APP_DOMAIN=http://localhost
+REACT_APP_DOMAIN=http://localhost
+REACT_APP_TITLE=React App

src/Apollo.js

@@ -56,11 +56,13 @@ const link = new HttpLink({
   uri: `${process.env.REACT_APP_DOMAIN}/graphql`,
 });
 
-export const ApolloProvider = ({ children }) => {
+export function ApolloProvider({ children }) {
   const client = new ApolloClient({
     link: from([authAfterware, link]),
     cache,
   });
 
   return <Provider {...{ client }}>{children}</Provider>;
-};
+}
+
+export default ApolloProvider;

src/App.js

@@ -6,7 +6,7 @@ import { Header, Footer, Main } from "./layout";
 import { Home } from "./home";
 import "./app.scss";
 
-export const App = () => {
+export function App() {
   const { search } = useLocation();
   const previewId = new URLSearchParams(search).get("p");
 
@@ -25,4 +25,6 @@ export const App = () => {
       <Footer />
     </div>
   );
-};
+}
+
+export default App;

src/components/ScrollToTop.js

@@ -1,16 +1,16 @@
 import { useEffect, useRef } from "react";
 import { useLocation } from "react-router-dom";
 
-const usePrevious = (value) => {
+function usePrevious(value) {
   const ref = useRef();
   useEffect(() => {
     ref.current = value;
   });
 
   return ref.current;
-};
+}
 
-export const ScrollToTop = () => {
+export function ScrollToTop() {
   const { pathname } = useLocation();
   const prevPathname = usePrevious(pathname);
 
@@ -30,4 +30,6 @@ export const ScrollToTop = () => {
   }, [pathname, prevPathname]);
 
   return null;
-};
+}
+
+export default ScrollToTop;

src/home/Home.js

@@ -1,12 +1,14 @@
 import React from "react";
 import { PageWidth, PostContent, useNode } from "react-wp-gql";
 
-export const Home = () => {
+export function Home() {
   const { node } = useNode();
 
   return (
     <PageWidth>
       <PostContent>{node.content}</PostContent>
     </PageWidth>
   );
-};
+}
+
+export default Home;

src/hooks/useSettings.js

@@ -9,7 +9,7 @@ const SettingsQuery = gql`
   }
 `;
 
-export const useSettings = () => {
+export function useSettings() {
   const { data, loading, error } = useQuery(SettingsQuery, {
     errorPolicy: "all",
   });
@@ -21,4 +21,6 @@ export const useSettings = () => {
     loading,
     error,
   };
-};
+}
+
+export default useSettings;

src/index.js

@@ -1,15 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { App } from "./App";
+import App from "./App";
 import { BrowserRouter } from "react-router-dom";
 import { NodeProvider } from "react-wp-gql";
 import { ScrollToTop } from "./components";
-import { ApolloProvider } from "./Apollo";
+import ApolloProvider from "./Apollo";
 import * as fragments from "./gql/fragments";
 import reportWebVitals from "./reportWebVitals";
 
 const nodeProps = {
-  siteName: "React Build",
+  siteName: process.env.REACT_APP_TITLE,
   fragments,
   cache: true,
 };

src/layout/Footer.js

@@ -21,7 +21,7 @@ const FooterMenu = gql`
   }
 `;
 
-const MenuLink = ({ url, label, connectedNode }) => {
+function MenuLink({ url, label, connectedNode }) {
   let Tag = "a";
   const props = { className: "color-inherit no-underline" };
   const type = connectedNode?.node?.__typename || "MenuItem";
@@ -34,13 +34,13 @@ const MenuLink = ({ url, label, connectedNode }) => {
   }
 
   return <Tag {...props}>{label}</Tag>;
-};
+}
 
-const FooterColumn = ({ children, className = "" }) => (
-  <div className={`w-100 w-third-l ${className}`}>{children}</div>
-);
+function FooterColumn({ children, className = "" }) {
+  return <div className={`w-100 w-third-l ${className}`}>{children}</div>;
+}
 
-export const Footer = () => {
+export function Footer() {
   const { title, description } = useSettings();
   const { data } = useQuery(FooterMenu);
   const menu = data?.menuItems?.nodes || [];
@@ -79,4 +79,6 @@ export const Footer = () => {
       </div>
     </footer>
   );
-};
+}
+
+export default Footer;

src/layout/Header.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { PageWidth, Menu } from "react-wp-gql";
 import { Link } from "react-router-dom";
 
-export const Header = () => {
+export function Header() {
   const [open, setOpen] = useState();
 
   return (
@@ -36,4 +36,6 @@ export const Header = () => {
       </PageWidth>
     </header>
   );
-};
+}
+
+export default Header;

src/layout/Main.js

@@ -1,5 +1,7 @@
 import React from "react";
 
-export const Main = ({ children }) => (
-  <div className="main lh-copy relative z-1 flex-auto">{children}</div>
-);
+export function Main({ children }) {
+  return <div className="main lh-copy relative z-1 flex-auto">{children}</div>;
+}
+
+export default Main;