cleanup data.ts #22

src/views/customer/CustomerListView/UpdateCustomer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import { useUpdateCustomerMutation } from 'src/generated/graphql'
@@ -8,23 +8,22 @@ import {
   TextField,
 } from '@material-ui/core';
 import { UpdateProps } from './Types'
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    typography: {
-      padding: theme.spacing(2),
-      textAlign: 'center',
-    },
-    box: {
-      margin: theme.spacing(2),
-    },
-    textfield: {
-      marginTop: theme.spacing(2),
-    },
-    button: {
-      margin: theme.spacing(1),
-    }
-  }),
-);
+
+const useStyles = makeStyles((theme: any) => ({
+  typography: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+  },
+  box: {
+    margin: theme.spacing(2),
+  },
+  textfield: {
+    marginTop: theme.spacing(2),
+  },
+  button: {
+    margin: theme.spacing(1),
+  }
+}));
 
 const UpdateCustomer: React.FC<UpdateProps> = ({ customer, handleClose }) => {
   const classes = useStyles();

src/views/customer/CustomerListView/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Container,

src/views/customer/CustomerListView/operation.graphql

@@ -25,3 +25,16 @@ query searchCustomers($search: String!) {
     updatedAt
   }
 }
+
+query AllCustomers {
+  customers(order_by: { name: asc }) {
+    updatedAt
+    phone
+    name
+    id
+    email
+    createdAt
+    avatarUrl
+    address
+  }
+}

src/views/test/GeneratedCustomers.tsx

@@ -1,12 +1,12 @@
-import data from '../customer/CustomerListView/data'
-import React, { useState } from 'react';
 import GeneratedTable from './GeneratedCustomersTable'
+import { useAllCustomersQuery } from 'src/generated/graphql';
 
 const CustomerListView = () => {
-    const [customers] = useState(data);
-
-    return (
-     <GeneratedTable customers={customers} />
-    );
-  };
+  const [result] = useAllCustomersQuery({})
+  const { data, error, fetching } = result;
+
+  return (
+    <GeneratedTable customers={fetching ? {} : data.customers} />
+  );
+};
 export default CustomerListView