chore(examples): fix ESLint warnings in theme-ui example (remix-run…

…#3664)
jpb06 · Jul 6, 2022 · a9013ec · a9013ec
1 parent 4e46bc4
commit a9013ec
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 37 deletions.
diff --git a/examples/theme-ui/app/entry.client.tsx b/examples/theme-ui/app/entry.client.tsx
@@ -1,28 +1,25 @@
-import React, { useState } from "react";
-import { hydrate } from "react-dom";
 import { CacheProvider } from "@emotion/react";
 import { RemixBrowser } from "@remix-run/react";
+import type { FunctionComponent } from "react";
+import { useState } from "react";
+import { hydrate } from "react-dom";
 
 import { ClientStyleContext } from "./styles/context";
-import createEmotionCache from "./styles/createEmotionCache";
-
-interface ClientCacheProviderProps {
-  children: React.ReactNode;
-}
+import { createEmotionCache } from "./styles/createEmotionCache";
 
-function ClientCacheProvider({ children }: ClientCacheProviderProps) {
+const ClientCacheProvider: FunctionComponent = ({ children }) => {
   const [cache, setCache] = useState(createEmotionCache());
 
-  function reset() {
+  const reset = () => {
     setCache(createEmotionCache());
-  }
+  };
 
   return (
     <ClientStyleContext.Provider value={{ reset }}>
       <CacheProvider value={cache}>{children}</CacheProvider>
     </ClientStyleContext.Provider>
   );
-}
+};
 
 hydrate(
   <ClientCacheProvider>

diff --git a/examples/theme-ui/app/entry.server.tsx b/examples/theme-ui/app/entry.server.tsx
@@ -1,11 +1,11 @@
-import { renderToString } from "react-dom/server";
 import { CacheProvider } from "@emotion/react";
 import createEmotionServer from "@emotion/server/create-instance";
+import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
-import type { EntryContext } from "@remix-run/node"; // Depends on the runtime you choose
+import { renderToString } from "react-dom/server";
 
 import { ServerStyleContext } from "./styles/context";
-import createEmotionCache from "./styles/createEmotionCache";
+import { createEmotionCache } from "./styles/createEmotionCache";
 
 export default function handleRequest(
   request: Request,

diff --git a/examples/theme-ui/app/root.tsx b/examples/theme-ui/app/root.tsx
@@ -1,6 +1,5 @@
-import React, { useContext, useEffect } from "react";
 import { withEmotionCache } from "@emotion/react";
-import { ThemeProvider } from "@theme-ui/core";
+import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
@@ -9,7 +8,9 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import type { MetaFunction, LinksFunction } from "@remix-run/node"; // Depends on the runtime you choose
+import { ThemeProvider } from "@theme-ui/core";
+import type { ReactNode } from "react";
+import { useContext, useEffect } from "react";
 
 import { ServerStyleContext, ClientStyleContext } from "./styles/context";
 
@@ -19,10 +20,9 @@ export const meta: MetaFunction = () => ({
   viewport: "width=device-width,initial-scale=1",
 });
 
-interface DocumentProps {
-  children: React.ReactNode;
-}
-
+type DocumentProps = {
+  children: ReactNode;
+};
 const Document = withEmotionCache(
   ({ children }: DocumentProps, emotionCache) => {
     const serverStyleData = useContext(ServerStyleContext);
@@ -40,7 +40,7 @@ const Document = withEmotionCache(
       });
       // reset cache to reapply global styles
       clientStyleData?.reset();
-    }, []);
+    }, [clientStyleData, emotionCache.sheet]);
 
     return (
       <html lang="en">
@@ -55,6 +55,7 @@ const Document = withEmotionCache(
             />
           ))}
         </head>
+
         <body>
           {children}
           <ScrollRestoration />

diff --git a/examples/theme-ui/app/routes/index.tsx b/examples/theme-ui/app/routes/index.tsx
@@ -1,6 +1,3 @@
-/** @jsx jsx */
-import React from "react";
-import { jsx } from "@theme-ui/core";
 import { Link } from "@remix-run/react";
 
 export default function Index() {

diff --git a/examples/theme-ui/app/routes/jokes.tsx b/examples/theme-ui/app/routes/jokes.tsx
@@ -1,6 +1,3 @@
-/** @jsx jsx */
-import React from "react";
-import { jsx } from "@theme-ui/core";
 import { Link } from "@remix-run/react";
 
 export default function Jokes() {

diff --git a/examples/theme-ui/app/styles/context.tsx b/examples/theme-ui/app/styles/context.tsx
@@ -1,18 +1,18 @@
-import React, { createContext } from "react";
+import { createContext } from "react";
 
-export interface ServerStyleContextData {
+export type ServerStyleContextData = {
   key: string;
-  ids: Array<string>;
+  ids: string[];
   css: string;
-}
+};
 
 export const ServerStyleContext = createContext<
   ServerStyleContextData[] | null
 >(null);
 
-export interface ClientStyleContextData {
+export type ClientStyleContextData = {
   reset: () => void;
-}
+};
 
 export const ClientStyleContext = createContext<ClientStyleContextData | null>(
   null

diff --git a/examples/theme-ui/app/styles/createEmotionCache.tsx b/examples/theme-ui/app/styles/createEmotionCache.tsx
@@ -1,5 +1,3 @@
 import createCache from "@emotion/cache";
 
-export default function createEmotionCache() {
-  return createCache({ key: "css" });
-}
+export const createEmotionCache = () => createCache({ key: "css" });