Improve UX, allow order authors by new fields

Author: juffalow

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Quotes",
+  "name": "Quotes",
   "icons": [
     {
       "src": "favicon.png",

schema.graphql

@@ -1,9 +1,9 @@
 # source: http://localhost:3010/graphql
-# timestamp: Sat Nov 06 2021 12:16:11 GMT+0100 (Central European Standard Time)
+# timestamp: Sat Nov 12 2022 12:05:52 GMT+0100 (Central European Standard Time)
 
-"""Exposes a URL that specifies the behaviour of this scalar."""
+"""Exposes a URL that specifies the behavior of this scalar."""
 directive @specifiedBy(
-  """The URL that specifies the behaviour of this scalar."""
+  """The URL that specifies the behavior of this scalar."""
   url: String!
 ) on SCALAR
 
@@ -57,6 +57,8 @@ input AuthorsOrder {
 
 enum AuthorsOrderField {
   ID
+  FIRST_NAME
+  LAST_NAME
   CREATED_AT
 }
 

src/App.css

@@ -0,0 +1,8 @@
+html, body, #root {
+  min-height: 100vh;
+}
+
+.main-container {
+  padding-bottom: 50px;
+  min-height: calc(100vh - 162px);
+}

src/App.tsx

@@ -7,14 +7,15 @@ import Home from './pages/Home';
 import Authors from './pages/Authors';
 import environment from './environment';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css';
 
 const App = () => (
   <RelayEnvironmentProvider environment={environment}>
     <BrowserRouter>
       <>
         <Menu />
         <ForkMe />
-        <main role="main" className="flex-shrink-0" style={{ marginTop: 25, marginBottom: 81 }}>
+        <main role="main" className="flex-shrink-0 main-container" style={{ marginTop: 25, marginBottom: 25 }}>
           <Routes>
             <Route path="/authors" element={<Authors />} />
             <Route path="/" element={<Home />} />

src/components/Footer.tsx

@@ -4,7 +4,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
 const Footer = () => (
-  <footer className="footer mt-auto py-3 bg-dark fixed-bottom" style={{ color: '#fff' }}>
+  <footer className="footer mt-auto py-3 bg-dark" style={{ color: '#fff' }}>
     <Container fluid={true}>
       <Row>
         <Col>

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(`https://graphql.juffalow.com/graphql`, {
+  const response = await fetch(`https://quotes.juffalow.com/graphql`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

src/pages/authors/Filter.tsx

@@ -84,6 +84,8 @@ const Filter: React.FC<Props> = (props: Props) => {
                 <Form.Label>Order by:</Form.Label>
                 <Form.Control as="select" placeholder="field" value={orderField} onChange={handleOrderFieldChange}>
                   <option value="ID">ID</option>
+                  <option value="FIRST_NAME">FIRST_NAME</option>
+                  <option value="LAST_NAME">LAST_NAME</option>
                   <option value="CREATED_AT">CREATED_AT</option>
                 </Form.Control>
               </FormGroup>

src/pages/authors/__generated__/AuthorsContainerAuthorsQuery.graphql.ts

@@ -5,6 +5,7 @@ import Col from 'react-bootstrap/Col';
 import { usePaginationFragment, useLazyLoadQuery } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import QuotesList from './QuotesList';
+import QuotesLoader from './QuotesLoader';
 import { HomeContainer_quotes$key } from './__generated__/HomeContainer_quotes.graphql';
 import { HomeContainerQuery } from './__generated__/HomeContainerQuery.graphql';
 
@@ -59,13 +60,13 @@ const HomeContainer = () => {
       query HomeContainerQuery($first: Int, $after: String) {
           ...HomeContainer_quotes
       }`, {
-      first: 10,
+      first: 9,
       after: null,
     },
   );
 
   return (
-    <Suspense fallback={<p>Loading...</p>}>
+    <Suspense fallback={<QuotesLoader />}>
       <Quotes query={query} />
     </Suspense>
   );

src/pages/authors/__generated__/AuthorsContainerQuery.graphql.ts

@@ -20,7 +20,7 @@ const QuotesList = (props: Props) => {
   );
 
   return (
-    <Row>
+    <Row className="mt-4">
       {
         quotes.map((quote: Quote) => (
           <Col key={quote.id} md={4} style={{ marginBottom: 20 }}>

src/pages/home/HomeContainer.tsx

@@ -0,0 +1,12 @@
+.bar-loader {
+  background: #eee;
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1.5s shine linear infinite;
+}
+
+@keyframes shine {
+  to {
+    background-position-x: -200%;
+  }
+}

src/pages/home/QuotesList.tsx

@@ -0,0 +1,26 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Card from 'react-bootstrap/Card';
+import './QuotesLoader.css';
+
+interface Props {
+  count?: number;
+}
+
+const QuotesLoader = (props: Props) => (
+  <Row className="mt-4">
+    {
+      Array.apply(null, Array(props.count)).map(() => (
+        <Col md={4} style={{ marginBottom: 20 }}>
+          <Card className="bar-loader" style={{ minHeight: 125 }} />
+        </Col>
+      ))
+    }
+  </Row>
+)
+
+QuotesLoader.defaultProps = {
+  count: 3,
+}
+
+export default QuotesLoader;