refactor and styled components

kaloster · Feb 28, 2023 · a920fa4 · a920fa4
1 parent 12a777a
commit a920fa4
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,20 @@
-# Welcome to Remix!
+# Welcome to Remix + GraphQL!
 
 - [Remix Docs](https://remix.run/docs)
+- [Apollo CLient Docs](https://www.apollographql.com/docs)
+
+Proof of concept for Remix app with Apollo Client to leverage GraphQL.
+
+This tutorial has 2 parts:
+
+- [Part 1 - Remix and Graphql](https://docs.google.com/document/d/1TEulxj7MldSw10dd-8RJX3cg0muIDbRMfDWlghqpGuA)
+
+- [Part 2 - Refactoring Styles and Routes](https://docs.google.com/document/d/1RZ0wHD82IeRwif6_HzewXNKzAV-7gQ9nzmukYSxxslc)
+
+This project uses the following data source: 
+[countries@current](https://studio.apollographql.com/public/countries/home)
+
+To get started, clone the repo and then:
 
 ## Development
 
@@ -28,26 +42,3 @@ npm start
 
 Now you'll need to pick a host to deploy it to.
 
-### DIY
-
-If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
-
-Make sure to deploy the output of `remix build`
-
-- `build/`
-- `public/build/`
-
-### Using a Template
-
-When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
-
-```sh
-cd ..
-# create a new project, and pick a pre-configured host
-npx create-remix@latest
-cd my-new-remix-app
-# remove the new project's app (not the old one!)
-rm -rf app
-# copy your app over
-cp -R ../my-old-remix-app/app app
-```
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -8,7 +8,7 @@ import {
   InMemoryCache,
   createHttpLink,
 } from "@apollo/client";
-
+import { ServerStyleSheet } from "styled-components";
 
 interface Request {
   headers: Record<string, string>;
@@ -31,6 +31,7 @@ export default function handleRequest(
       credentials: request.credentials ?? "same-origin", 
     }),
   });
+
 
   const App = (
     <ApolloProvider client={client}>
@@ -40,9 +41,10 @@ export default function handleRequest(
 
   return getDataFromTree(App).then(() => {
     const initialState = client.extract();
+    const sheet = new ServerStyleSheet();
 
-    const markup = renderToString(
-      <>
+    let markup = renderToString(
+      sheet.collectStyles(<>
         {App}
         <script
           dangerouslySetInnerHTML={{
@@ -51,9 +53,10 @@ export default function handleRequest(
             ).replace(/</g, "\\u003c")}`, // replaces < and script tags to prevent cross site scripting
           }}
         />
-      </>
+      </>)
     );
-
+    const styles = sheet.getStyleTags();
+    markup = markup.replace("__STYLES__", styles);
     responseHeaders.set("Content-Type", "text/html");
 
     return new Response("<!DOCTYPE html>" + markup, {

diff --git a/app/graphql/queries/getLocations.ts b/app/graphql/queries/getLocations.ts
@@ -0,0 +1,17 @@
+import { gql } from "@apollo/client";
+
+export const LOCATIONS_QUERY = gql`
+    query Query {
+      countries{
+        name
+        native
+        capital
+        emoji
+        currency
+        languages {
+          code
+          name
+        }
+      }
+    }
+`;
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,7 +10,7 @@ import {
 
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
-  title: "New Remix App",
+  title: "Countries - Remix and GraphQL",
   viewport: "width=device-width,initial-scale=1",
 });
 
@@ -20,6 +20,7 @@ export default function App() {
       <head>
         <Meta />
         <Links />
+        {typeof document === "undefined" ? "__STYLES__" : null}
       </head>
       <body>
         <Outlet />

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -1,26 +1,20 @@
-import { gql, useQuery } from "@apollo/client";
-
-const LOCATIONS_QUERY = gql`
-    query Query {
-      countries{
-        name
-        native
-        capital
-        emoji
-        currency
-        languages {
-          code
-          name
-        }
-      }
-    }
-`;
+import { useQuery } from "@apollo/client";
+import { LOCATIONS_QUERY } from "../graphql/queries/getLocations";
+import { Container, Col, Row } from './styles'
 
 export default function Index() {
-  const { data } = useQuery(LOCATIONS_QUERY);  
+  const { data } = useQuery(LOCATIONS_QUERY);
   return (
-    <div>
-      {JSON.stringify(data)}
-    </div>
+    <Container>
+      {data && data.countries.map((item: any) => (
+        <Row key={item.name}>
+          <Col>{item.name}</Col>
+          <Col>{item.capital}</Col>
+          <Col>{item.currency}</Col>
+          <Col>{item.languages.length > 0 && item.languages[0].name}</Col>
+          <Col>{item.emoji}</Col>
+       </Row>
+      ))}
+    </Container>
   );
-}
+}
diff --git a/app/routes/styles.tsx b/app/routes/styles.tsx
@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+`
+
+export const Row = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    `
+
+export const Col = styled.div`
+    width: 15%;
+    background: #ccc; 
+    margin: 5px;
+    flex: auto;
+    text-align: center;
+    min-height: 20px;
+    vertical-align: text-bottom;
+    padding: 10px;
+`
diff --git a/app/styles-context.tsx b/app/styles-context.tsx
@@ -0,0 +1,4 @@
+import * as React from "react";
+const StylesContext = React.createContext<null | React.ReactNode>(null);
+export const StylesProvider = StylesContext.Provider;
+export const useStyles = () => React.useContext(StylesContext);