From b39c1c79efc16d09ec994aa23ebb1db670c97b26 Mon Sep 17 00:00:00 2001
From: Karel Hala <khala@redhat.com>
Date: Mon, 23 Mar 2020 13:17:44 +0100
Subject: [PATCH] Add detail of row when clicked

---
 src/App.js              |  2 ++
 src/views/DetailPage.js | 49 +++++++++++++++++++++++++++++++++++++++++
 src/views/HomePage.js   | 16 ++++++++++----
 3 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 src/views/DetailPage.js

diff --git a/src/App.js b/src/App.js
index 48ae760..5bf479a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,7 @@ import Container from "@material-ui/core/Container";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import Navigation from "./components/Navigation";
 import HomePage from "./views/HomePage";
+import DetailPage from "./views/DetailPage";
 
 const drawerWidth = 240;
 
@@ -118,6 +119,7 @@ const App = () => {
               <Route path="/" exact component={LandingPage} />
               <PrivateRoute path="/home-page" component={HomePage} />
               <PrivateRoute path="/profile" component={Profile} />
+              <Route path="/detail/:id" exact component={DetailPage} />
             </Switch>
           </Container>
         </main>
diff --git a/src/views/DetailPage.js b/src/views/DetailPage.js
new file mode 100644
index 0000000..c36a0a2
--- /dev/null
+++ b/src/views/DetailPage.js
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import Api from "../utils/api";
+import { useParams } from "react-router";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+
+const DetailPage = () => {
+  const [detail, setDetail] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    setIsLoading(true);
+    Api.get(`rest/sunshine?q={ "_id": "${id}" }`).then(([data]) => {
+      setDetail(data);
+      setIsLoading(false);
+    });
+  }, []);
+  const { id } = useParams();
+  if (isLoading) {
+    return (
+      <div>
+        <CircularProgress />
+      </div>
+    );
+  }
+  return (
+    <Card>
+      <CardContent>
+        Detail of {id}:
+        {detail ? (
+          <List>
+            {Object.entries(detail).map(([key, value]) => (
+              <ListItem key={key}>
+                <ListItemText primary={key} secondary={value} />
+              </ListItem>
+            ))}
+          </List>
+        ) : (
+          "Error while fetching detail"
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DetailPage;
diff --git a/src/views/HomePage.js b/src/views/HomePage.js
index 36baa65..3df4a95 100644
--- a/src/views/HomePage.js
+++ b/src/views/HomePage.js
@@ -11,16 +11,23 @@ import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Pagination from "@material-ui/lab/Pagination";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import { useHistory } from "react-router-dom";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   table: {
     minWidth: 650,
     overflowY: "scroll"
   },
   tableContainer: {
     margin: 24
+  },
+  tableRow: {
+    "&:hover": {
+      cursor: "pointer",
+      backgroundColor: theme.palette.background.default
+    }
   }
-});
+}));
 
 const createNumbers = (numbers) => [...Array(31)].map((_value, index) => (numbers ? numbers[index + 1] : index + 1));
 
@@ -35,6 +42,7 @@ const headerTemplate = {
 };
 
 const DataTable = ({ rows }) => {
+  const history = useHistory();
   const classes = useStyles();
   return (
     <TableContainer className={classes.tableContainer} component={Paper}>
@@ -52,7 +60,7 @@ const DataTable = ({ rows }) => {
           {rows.map((data) => {
             const row = createData(data);
             return (
-              <TableRow key={row.name}>
+              <TableRow key={row.name} onClick={() => history.push(`/detail/${data._id}`)} className={classes.tableRow}>
                 <TableCell component="th" scope="row">
                   {row.year}
                 </TableCell>
@@ -104,7 +112,7 @@ const HomePage = () => {
   return (
     <div>
       <h1>Home page</h1>
-      <Pagination count={Math.ceil(count / max)} page={skip/max + 1} onChange={handlePagination} />
+      <Pagination count={Math.ceil(count / max)} page={skip / max + 1} onChange={handlePagination} />
       <DataTable rows={data} />
     </div>
   );
-- 
GitLab