Urql graphql client

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "graphql": "^15.5.0",
     "grommet": "2.11.0",
     "grommet-icons": "4.4.0",
     "grommet-theme-v1": "^0.1.0",
@@ -12,7 +13,8 @@
     "react-intl": "^5.13.1",
     "react-router-dom": "5.1.2",
     "react-scripts": "4.0.3",
-    "styled-components": "5.0.1"
+    "styled-components": "5.0.1",
+    "urql": "^2.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -39,6 +41,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/react-router-dom": "^5.1.7",
     "typescript": "^4.2.3"

src/components/VirtualMachinesCard.tsx

@@ -2,29 +2,32 @@ import React from "react";
 import { Box, Text, Heading } from "grommet";
 import { StatusBadge } from ".";
 
-const statusColors:{[index: string]: string} = {
+const statusColors: { [index: string]: string } = {
   Off: "status-critical",
   Suspended: "status-warning",
-  On: "status-ok"
+  On: "status-ok",
 };
 
 type Data = {
-  name: string
-  count: number
-  On: number
-  Off: number
-  Suspended: number
-}
+  name: string;
+  count: number;
+  On: number;
+  Off: number;
+  Suspended: number;
+};
 
 type VirtualMachinesCardProps = {
-  data: Data
-}
+  data: Data;
+};
 
-type StatusKey = keyof Data
+type StatusKey = keyof Data;
 
-const statusKeys: StatusKey[] = ["On", "Off", "Suspended"]
+const statusKeys: StatusKey[] = ["On", "Off", "Suspended"];
 
-export const VirtualMachinesCard: React.FC<VirtualMachinesCardProps> = ({ data, ...rest }) => (
+export const VirtualMachinesCard: React.FC<VirtualMachinesCardProps> = ({
+  data,
+  ...rest
+}) => (
   <Box round pad="medium" direction="column" background="white" {...rest}>
     <Heading level="2" margin="none" size="small">
       {data.name}
@@ -33,7 +36,7 @@ export const VirtualMachinesCard: React.FC<VirtualMachinesCardProps> = ({ data,
       {data.count}
     </Text>
     <Box gap="medium" pad={{ vertical: "small" }}>
-      {statusKeys.map(status => (
+      {statusKeys.map((status) => (
         <Box direction="row" align="center" key={status}>
           <StatusBadge size="xlarge" background={statusColors[status]} />
           <Box pad="xsmall">

src/index.tsx

@@ -20,13 +20,14 @@
 
 // window.__deps = dependencies
 
-import React, { Component } from "react"
-import { render } from "react-dom"
-import { Grommet, ResponsiveContext } from "grommet"
-import { theme } from "./theme"
-import { IntlProvider } from 'react-intl';
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
-import { Dashboard, HelloWorld } from "./components"
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { Grommet, ResponsiveContext } from 'grommet'
+import { theme } from './theme'
+import { IntlProvider } from 'react-intl'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import { Dashboard, HelloWorld } from './components'
+import { CustomerListView } from './views/customer/CustomerListView'
 
 class AppBody extends Component {
   static contextType = ResponsiveContext
@@ -36,6 +37,7 @@ class AppBody extends Component {
       <Switch>
         <Route exact path='/' component={Dashboard} />
         <Route exact path='/hello' component={HelloWorld} />
+        <Route exact path='/customers' component={CustomerListView} />
       </Switch>
     )
   }
@@ -45,18 +47,18 @@ function loadLocaleData(locale: string) {
   switch (locale) {
     case 'sk':
     case 'sk-SK':
-      return import('./compiled-lang/sk.json');
+      return import('./compiled-lang/sk.json')
     default:
-      return import('./compiled-lang/en.json');
+      return import('./compiled-lang/en.json')
   }
 }
 
 interface Message {
-  [key: string]: any;
+  [key: string]: any
 }
 
 type AppProps = {
-  locale: string,
+  locale: string
   messages: Message
 }
 
@@ -71,11 +73,13 @@ const App: React.FC<AppProps> = ({ locale, messages }) => {
     </IntlProvider>
   )
 }
-const locale = navigator.language;
+const locale = navigator.language
 
 //@ts-ignore
-if(!window.__skip_render){
-  const messages = loadLocaleData(locale);
-  render(<App locale={locale}  messages={messages} />, document.getElementById("root"))
-
+if (!window.__skip_render) {
+  const messages = loadLocaleData(locale)
+  render(
+    <App locale={locale} messages={messages} />,
+    document.getElementById('root')
+  )
 }

src/views/customer/CustomerListView.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { createClient, Provider } from 'urql'
+import { TextInput } from 'grommet'
+import { CustomersLoader } from './CustomersLoader'
+
+export const CustomerListView = () => {
+  const client = createClient({
+    url: 'https://iteria-app-example01.herokuapp.com/v1/graphql',
+  })
+
+  const [inputSearch, setInputSearch] = useState('')
+
+  return (
+    <div>
+      <TextInput
+        autoFocus
+        value={inputSearch}
+        onChange={(event) => setInputSearch(event.target.value)}
+        placeholder='Search customer'
+      />
+      <Provider value={client}>
+        <CustomersLoader inputSearch={inputSearch} />
+      </Provider>
+    </div>
+  )
+}

src/views/customer/CustomersLoader.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useQuery, gql } from 'urql'
+import { CustomersTable } from './CustomersTable'
+
+const SEARCH = gql`
+  query Search($search: String) {
+    customers(where: { name: { _ilike: $search } }, order_by: { name: asc }) {
+      id
+      email
+      name
+      phone
+      address
+      avatarUrl
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+export const CustomersLoader: React.FC<any> = ({ inputSearch }) => {
+  const search = '%' + inputSearch + '%'
+  const [result] = useQuery({ query: SEARCH, variables: { search } })
+  const { data, error, fetching } = result
+
+  if (fetching) return <p>Loading...</p>
+  if (error) return <p>Oh no... {error.message}</p>
+  const customers = data.customers
+
+  return (
+    <div>
+      <CustomersTable customers={customers} />
+    </div>
+  )
+}

src/views/customer/CustomersTable.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { DataTable, Text } from 'grommet'
+import { FormattedDate } from 'react-intl'
+
+export const CustomersTable: React.FC<any> = ({ customers }) => {
+  return (
+    <div>
+      <DataTable
+        columns={[
+          {
+            property: 'name',
+            header: <Text>Name</Text>,
+            primary: true,
+          },
+          {
+            property: 'email',
+            header: <Text>Email</Text>,
+            primary: true,
+          },
+          {
+            property: 'address',
+            header: <Text>Location</Text>,
+            primary: true,
+            render: (customer) => (
+              <Text>
+                {customer.address.city +
+                  ', ' +
+                  customer.address.state +
+                  ', ' +
+                  customer.address.country}
+              </Text>
+            ),
+          },
+          {
+            property: 'phone',
+            header: <Text>Phone</Text>,
+            primary: true,
+          },
+          {
+            property: 'createdAt',
+            header: <Text>Registration date</Text>,
+            primary: true,
+            render: (customer) => (
+              <FormattedDate value={new Date(customer.createdAt)} />
+            ),
+          },
+        ]}
+        data={customers}
+      />
+    </div>
+  )
+}

src/views/customer/getInitials.ts

@@ -0,0 +1,6 @@
+export default (name = '') => name
+  .replace(/\s+/, ' ')
+  .split(' ')
+  .slice(0, 2)
+  .map((v) => v && v[0].toUpperCase())
+  .join('');

yarn.lock

@@ -1148,6 +1148,11 @@
     intl-messageformat-parser "6.4.1"
     tslib "^2.1.0"
 
+"@graphql-typed-document-node/core@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.0.tgz#0eee6373e11418bfe0b5638f654df7a4ca6a3950"
+  integrity sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==
+
 "@hapi/[email protected]":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1678,12 +1683,26 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
+  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -1827,6 +1846,14 @@
     "@typescript-eslint/types" "4.15.2"
     eslint-visitor-keys "^2.0.0"
 
+"@urql/core@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.0.0.tgz#b4936dd51fe84cb570506d9ee2579149689f7535"
+  integrity sha512-Qj24CG8ullqZZsYmjrSH0JhH+nY7kj8GbVbA9si3KUjlYs75A/MBQU3i97j6oWyGldDBapyis2CfaQeXKbv8rA==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.0"
+    wonka "^4.0.14"
+
 "@webassemblyjs/[email protected]":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -4741,6 +4768,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
 
+graphql@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.0.tgz#39d19494dbe69d1ea719915b578bf920344a69d5"
+  integrity sha512-OmaM7y0kaK31NKG31q4YbD2beNYa6jBBKtMFT6gLYJljHLJr42IqJ8KX08u3Li/0ifzTU5HjmoOOrwa5BRLeDA==
+
 [email protected]:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.4.0.tgz#6503a33ca29e3c9d89ba56ef1b2bc786222e62a7"
@@ -6526,6 +6558,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
 
+moment@^2.27.0:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -9713,6 +9750,14 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+urql@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/urql/-/urql-2.0.1.tgz#16c024ab0340328001b0c400ebe1368887af3823"
+  integrity sha512-UTYLaMMw/N2iM2nHbcZ1XvN+opZxtWKwJaczV+MAco8buFpR3JR9CFrgKvx9p4uz+EayqQ69LZTWreJx+c196w==
+  dependencies:
+    "@urql/core" "^2.0.0"
+    wonka "^4.0.14"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -10005,6 +10050,11 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
+wonka@^4.0.14:
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/wonka/-/wonka-4.0.15.tgz#9aa42046efa424565ab8f8f451fcca955bf80b89"
+  integrity sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg==
+
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"