Upgrade dependencies and related components

juffalow · Jun 12, 2022 · 3f9f6a4 · 3f9f6a4
1 parent adf6a5d
commit 3f9f6a4
Show file tree

Hide file tree

Showing 20 changed files with 177 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -3,23 +3,24 @@
   "version": "2.0.0",
   "private": true,
   "dependencies": {
-    "babel-plugin-relay": "^13.0.0",
+    "babel-plugin-relay": "^14.0.0",
+    "bootstrap": "^5.1.3",
     "react": "^18.0.0",
-    "react-bootstrap": "^1.3.0",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
-    "react-relay": "^13.0.0",
+    "react-relay": "^14.0.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "relay-runtime": "^13.0.0"
+    "relay-runtime": "^14.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "start-win": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "relay": "relay-compiler --schema schema.graphql --src src"
+    "relay": "relay-compiler $@"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -42,11 +43,16 @@
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@types/react-helmet": "^5.0.15",
-    "@types/react-relay": "^11.0.2",
+    "@types/react-relay": "^13.0.2",
     "@types/react-router-dom": "^5.1.3",
     "graphql": "^15.0.0",
-    "relay-compiler": "^13.0.0",
+    "relay-compiler": "^14.0.0",
     "relay-compiler-language-typescript": "^15.0.0",
     "typescript": "^4.0.2"
+  },
+  "relay": {
+    "src": "./src/",
+    "schema": "./schema.graphql",
+    "language": "typescript"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--
@@ -21,12 +21,6 @@
     -->
     <title>Quotes</title>
 
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
-      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
-      crossorigin="anonymous"
-    />
     <link rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
       integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"

diff --git a/public/manifest.json b/public/manifest.json
@@ -3,7 +3,7 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import Footer from './components/Footer';
 import Home from './pages/Home';
 import Authors from './pages/Authors';
 import environment from './environment';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const App = () => (
   <RelayEnvironmentProvider environment={environment}>

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
+import Container from 'react-bootstrap/Container';
 import { Link } from 'react-router-dom';
 
 const Menu = () => (
   <Navbar bg="dark" variant="dark" expand="lg">
-    <Navbar.Brand as={Link} to="/">Quotes</Navbar.Brand>
-    <Navbar.Toggle aria-controls="basic-navbar-nav" />
-    <Navbar.Collapse id="basic-navbar-nav">
-      <Nav className="mr-auto">
-        <Nav.Link as={Link} to="/authors">Authors</Nav.Link>
-      </Nav>
-    </Navbar.Collapse>
+    <Container fluid>
+      <Navbar.Brand as={Link} to="/">Quotes</Navbar.Brand>
+      <Navbar.Toggle aria-controls="basic-navbar-nav" />
+      <Navbar.Collapse id="basic-navbar-nav">
+        <Nav className="mr-auto">
+          <Nav.Link as={Link} to="/authors">Authors</Nav.Link>
+        </Nav>
+      </Navbar.Collapse>
+    </Container>
   </Navbar>
 );
 

diff --git a/src/environment.ts b/src/environment.ts
@@ -8,7 +8,7 @@ import { RequestParameters } from 'relay-runtime/lib/util/RelayConcreteNode';
 import { Variables } from 'relay-runtime/lib/util/RelayRuntimeTypes';
 
 async function fetchGraphQL(params: RequestParameters, variables: Variables) {
-  const response = await fetch(`${process.env.REACT_APP_GRAPHQL_URL}`, {
+  const response = await fetch(`https://graphql.juffalow.com/graphql`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

diff --git a/src/pages/authors/Filter.tsx b/src/pages/authors/Filter.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import Form from 'react-bootstrap/Form';
 import FormGroup from 'react-bootstrap/FormGroup';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
 
 interface Props {
   onUpdate: (values: any) => void;
@@ -51,38 +53,53 @@ const Filter: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <Form inline>
-      <FormGroup controlId="firstName">
-        <Form.Label>First name:</Form.Label>
-        <Form.Control
-          type="text"
-          placeholder=""
-          value={firstName}
-          onChange={handleFirstNameChange}
-        />
-      </FormGroup>
-      <FormGroup controlId="lastName">
-        <Form.Label>Last name:</Form.Label>
-        <Form.Control
-          type="text"
-          placeholder=""
-          value={lastName}
-          onChange={handleLastNameChange}
-        />
-      </FormGroup>
-      <FormGroup controlId="orderField">
-        <Form.Label>Order by:</Form.Label>
-        <Form.Control as="select" placeholder="field" value={orderField} onChange={handleOrderFieldChange}>
-          <option value="ID">ID</option>
-          <option value="CREATED_AT">CREATED_AT</option>
-        </Form.Control>
-      </FormGroup>
-      <FormGroup controlId="orderDirection">
-        <Form.Control as="select" placeholder="direction" value={orderDirection} onChange={handleOrderDirectionChange}>
-          <option value="ASC">ASC</option>
-          <option value="DESC">DESC</option>
-        </Form.Control>
-      </FormGroup>
+    <Form>
+      <Row>
+        <Col>
+          <FormGroup controlId="firstName">
+            <Form.Label>First name:</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder=""
+              value={firstName}
+              onChange={handleFirstNameChange}
+            />
+          </FormGroup>
+        </Col>
+        <Col>
+          <FormGroup controlId="lastName">
+            <Form.Label>Last name:</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder=""
+              value={lastName}
+              onChange={handleLastNameChange}
+            />
+          </FormGroup>
+        </Col>
+        <Col>
+          <Row>
+            <Col>
+              <FormGroup controlId="orderField">
+                <Form.Label>Order by:</Form.Label>
+                <Form.Control as="select" placeholder="field" value={orderField} onChange={handleOrderFieldChange}>
+                  <option value="ID">ID</option>
+                  <option value="CREATED_AT">CREATED_AT</option>
+                </Form.Control>
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup controlId="orderDirection">
+                <Form.Label>Sort:</Form.Label>
+                <Form.Control as="select" placeholder="direction" value={orderDirection} onChange={handleOrderDirectionChange}>
+                  <option value="ASC">ASC</option>
+                  <option value="DESC">DESC</option>
+                </Form.Control>
+              </FormGroup>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
     </Form>
   );
 };

diff --git a/src/pages/authors/__generated__/AuthorRow_author.graphql.ts b/src/pages/authors/__generated__/AuthorRow_author.graphql.ts
diff --git a/src/pages/authors/__generated__/AuthorsContainerAuthorsQuery.graphql.ts b/src/pages/authors/__generated__/AuthorsContainerAuthorsQuery.graphql.ts
diff --git a/src/pages/authors/__generated__/AuthorsContainerQuery.graphql.ts b/src/pages/authors/__generated__/AuthorsContainerQuery.graphql.ts
diff --git a/src/pages/authors/__generated__/AuthorsContainer_authors.graphql.ts b/src/pages/authors/__generated__/AuthorsContainer_authors.graphql.ts
diff --git a/src/pages/authors/__generated__/AuthorsTable_authors.graphql.ts b/src/pages/authors/__generated__/AuthorsTable_authors.graphql.ts
diff --git a/src/pages/home/__generated__/HomeContainerQuery.graphql.ts b/src/pages/home/__generated__/HomeContainerQuery.graphql.ts