detail customer

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();
@@ -79,5 +78,4 @@ const UpdateCustomer: React.FC<UpdateProps> = ({ customer, handleClose }) => {
     </Box>
   );
 }
-export default UpdateCustomer;
-
+export default UpdateCustomer;

src/views/customer/CustomerListView/index.tsx

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

src/views/test/DetailPage.tsx

@@ -1,9 +1,10 @@
+import React from 'react'
 import data from '../customer/CustomerListView/data';
-import { FormikComponent } from './DetailPageCodegen';
-import { Customer } from './Customer';
+import { GeneratedCustomerDetail } from './GeneratedCustomerDetail';
+import { CustomerProps } from './types';
 
 const CustomerDetailView = () => {
-  const customer: Customer = {
+  const customer: CustomerProps = {
     avatarUrl: data[0].avatarUrl,
     name: data[0].name,
     createdAt: data[0].createdAt, //new Date(data[0].createdAt).toISOString().split('T')[0],
@@ -13,6 +14,6 @@ const CustomerDetailView = () => {
     test2: 258
   };
   console.log(customer);
-  return <FormikComponent {...customer} />;
+  return <GeneratedCustomerDetail {...customer} />;
 };
 export default CustomerDetailView;

src/views/test/DetailPageCodegen.tsx → src/views/test/GeneratedCustomerDetail.tsx

@@ -8,8 +8,9 @@ import {
   Grid
 } from '@material-ui/core';
 import { useFormik } from 'formik';
-import { Customer } from './Customer';
-export var FormikComponent: React.FC<Customer> = customer => {
+import { CustomerProps } from './types';
+export var GeneratedCustomerDetail: React.FC<CustomerProps> = customer => {
+  const intl = useIntl();
   const formik = useFormik({
     initialValues: {
       avatarUrl: customer.avatarUrl,
@@ -20,7 +21,7 @@ export var FormikComponent: React.FC<Customer> = customer => {
       updatedAt: customer.updatedAt,
       test2: customer.test2
     },
-    onSubmit: values => {}
+    onSubmit: values => { }
   });
   {
     const intl = useIntl();

src/views/test/GeneratedCustomers.tsx

@@ -2,11 +2,11 @@ import data from '../customer/CustomerListView/data'
 import React, { useState } from 'react';
 import GeneratedTable from './GeneratedCustomersTable'
 
-const CustomerListView = () => {
-    const [customers] = useState(data);
-  
-    return (
-     <GeneratedTable customers={customers} />
-    );
-  };
-export default CustomerListView
+const GeneratedCustomers = () => {
+  const [customers] = useState(data);
+
+  return (
+    <GeneratedTable customers={customers} />
+  );
+};
+export default GeneratedCustomers

src/views/test/GeneratedCustomersTable.tsx

@@ -1,13 +1,18 @@
-import { useIntl,FormattedMessage } from "react-intl";
-    import { GridColParams,DataGrid } from "@material-ui/data-grid";
-    export default function CustomerTable({ customers }) {
-        const intl = useIntl();
-        const columns = [
-            { field: "avatarUrl", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="avatarUrl"/>) },
-            { field: "createdAt", flex: 1, type: "date", valueFormatter: ({ value }) => intl.formatDate(value), renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="createdAt"/>) },
-            { field: "email", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="email"/>) },
-            { field: "id", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="id"/>) },
-            { field: "name", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="name"/>) },
-        ];
-        return (<div style={{ height: "400px", width: "100%" }}><DataGrid columns={columns} rows={customers}/></div>);
-    }
+import React from 'react'
+import { useIntl, FormattedMessage } from "react-intl";
+import { GridColParams, DataGrid } from "@material-ui/data-grid";
+import { useNavigate } from 'react-router-dom'
+
+export default function CustomerTable({ customers }) {
+    let navigate = useNavigate();
+
+    const intl = useIntl();
+    const columns = [
+        { field: "avatarUrl", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="avatarUrl" />) },
+        { field: "createdAt", flex: 1, type: "date", valueFormatter: ({ value }) => intl.formatDate(value), renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="createdAt" />) },
+        { field: "email", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="email" />) },
+        { field: "id", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="id" />) },
+        { field: "name", flex: 1, type: "string", valueFormatter: ({ value }) => value, renderHeader: (params: GridColParams) => (<FormattedMessage id="Customer" defaultMessage="name" />) },
+    ];
+    return (<div style={{ height: "400px", width: "100%" }}><DataGrid onRowClick={() => navigate('/app/generated-customer-detail', { replace: true })} columns={columns} rows={customers} /></div>);
+}

src/views/test/Customer.ts → src/views/test/types.ts

@@ -1,4 +1,4 @@
-export interface Customer {
+export interface CustomerProps {
     avatarUrl: string;
     createdAt: number;
     email: string;