fix: clean up code and fix CapturesTable width

Greenstand · Nov 15, 2021 · 4183afb · 4183afb
1 parent 5fb7921
commit 4183afb
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 135 deletions.
diff --git a/src/components/Captures/CaptureTable.js b/src/components/Captures/CaptureTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, createRef } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import {
   Grid,
   Table,
@@ -80,7 +80,6 @@ const CaptureTable = () => {
   const speciesContext = useContext(SpeciesContext);
   const [isDetailsPaneOpen, setIsDetailsPaneOpen] = useState(false);
   const [speciesState, setSpeciesState] = useState({});
-  const scrollRef = createRef();
   const classes = useStyle();
 
   useEffect(() => {
@@ -120,10 +119,10 @@ const CaptureTable = () => {
 
   const createSortHandler = (attr) => {
     return () => {
-      const order = orderBy === attr && order === 'asc' ? 'desc' : 'asc';
-      const orderBy = attr;
-      setOrder(order);
-      setOrderBy(orderBy);
+      const newOrder = orderBy === attr && order === 'asc' ? 'desc' : 'asc';
+      const newOrderBy = attr;
+      setOrder(newOrder);
+      setOrderBy(newOrderBy);
     };
   };
 
@@ -142,63 +141,61 @@ const CaptureTable = () => {
   };
 
   return (
-    <Grid item container style={{ height: '100%', overflow: 'auto' }}>
-      <div className={classes.tableContainer} ref={scrollRef}>
-        <Grid
-          container
-          direction="row"
-          justify="space-between"
-          alignItems="center"
-        >
-          <Typography variant="h5" className={classes.title}>
-            Captures
-          </Typography>
-          {tablePagination()}
-        </Grid>
-        <Table data-testid="captures-table">
-          <TableHead>
-            <TableRow>
-              {columns.map(({ attr, label, noSort }) => (
-                <TableCell
-                  key={attr}
-                  sortDirection={orderBy === attr ? order : false}
-                >
-                  <TableSortLabel
-                    active={orderBy === attr}
-                    direction={orderBy === attr ? order : 'asc'}
-                    onClick={createSortHandler(attr)}
-                    disabled={noSort}
-                  >
-                    {label}
-                  </TableSortLabel>
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody data-testid="captures-table-body">
-            {captures &&
-              captures.map((capture) => (
-                <TableRow
-                  key={capture.id}
-                  onClick={createToggleDrawerHandler(capture.id)}
-                  className={classes.tableRow}
-                >
-                  {columns.map(({ attr, renderer }) => (
-                    <TableCell key={attr}>
-                      {formatCell(capture, speciesState, attr, renderer)}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
-          </TableBody>
-        </Table>
+    <Grid style={{ height: '100%', overflow: 'auto' }}>
+      <Grid
+        container
+        direction="row"
+        justify="space-between"
+        alignItems="center"
+      >
+        <Typography variant="h5" className={classes.title}>
+          Captures
+        </Typography>
         {tablePagination()}
-        <CaptureDetailDialog
-          open={isDetailsPaneOpen}
-          capture={capture}
-          onClose={closeDrawer}
-        />
-      </div>
+      </Grid>
+      <Table data-testid="captures-table">
+        <TableHead>
+          <TableRow>
+            {columns.map(({ attr, label, noSort }) => (
+              <TableCell
+                key={attr}
+                sortDirection={orderBy === attr ? order : false}
+              >
+                <TableSortLabel
+                  active={orderBy === attr}
+                  direction={orderBy === attr ? order : 'asc'}
+                  onClick={createSortHandler(attr)}
+                  disabled={noSort}
+                >
+                  {label}
+                </TableSortLabel>
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody data-testid="captures-table-body">
+          {captures &&
+            captures.map((capture) => (
+              <TableRow
+                key={capture.id}
+                onClick={createToggleDrawerHandler(capture.id)}
+                className={classes.tableRow}
+              >
+                {columns.map(({ attr, renderer }) => (
+                  <TableCell key={attr}>
+                    {formatCell(capture, speciesState, attr, renderer)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+      {tablePagination()}
+      <CaptureDetailDialog
+        open={isDetailsPaneOpen}
+        capture={capture}
+        onClose={closeDrawer}
+      />
     </Grid>
   );
 };

diff --git a/src/components/FilterHeader.js b/src/components/FilterHeader.js
@@ -1,5 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
-import { documentTitle } from '../common/variables';
+import React, { useState, useContext } from 'react';
 import { Grid, Button } from '@material-ui/core';
 import IconFilter from '@material-ui/icons/FilterList';
 import { CapturesContext } from '../context/CapturesContext';
@@ -10,10 +9,6 @@ function FilterHeader() {
   const capturesContext = useContext(CapturesContext);
   const [isFilterShown, setFilterShown] = useState(true);
 
-  useEffect(() => {
-    document.title = `Capture Data - ${documentTitle}`;
-  }, []);
-
   const handleFilterSubmit = (filter) => {
     // console.log('1 - submitted filter', filter);
     capturesContext.updateFilter(filter);

diff --git a/src/components/tests/CaptureFilter.test.js b/src/components/tests/CaptureFilter.test.js
@@ -11,11 +11,9 @@ import * as loglevel from 'loglevel';
 const log = loglevel.getLogger('../tests/capturefilter.test');
 
 describe('CaptureFilter organizations', () => {
-  let api;
-
+  const api = require('../../api/treeTrackerApi').default;
   beforeEach(() => {
     //mock the api
-    api = require('../../api/treeTrackerApi').default;
 
     api.getOrganizations = () => {
       // log.debug('mock getOrganizations:');
@@ -25,65 +23,50 @@ describe('CaptureFilter organizations', () => {
 
   describe('CaptureFilter', () => {
     describe('w/o data in context', () => {
-      let component;
-
       beforeEach(async () => {
-        component = (
+        render(
           <AppProvider>
             <CaptureFilter />
-          </AppProvider>
+          </AppProvider>,
         );
       });
 
       afterEach(cleanup);
 
-      it('renders without crashing', () => {
-        const div = document.createElement('div');
-        ReactDOM.render(component, div);
-        ReactDOM.unmountComponentAtNode(div);
-      });
-
       it('renders text "Verification Status" ', () => {
-        render(component);
         expect(screen.getByText('Verification Status')).toBeInTheDocument();
       });
 
       it('renders "Start Date" input ', () => {
-        render(component);
-        let input = screen.getByRole('textbox', { name: 'Start Date' });
+        const input = screen.getByRole('textbox', { name: 'Start Date' });
         expect(input).toBeInTheDocument();
       });
 
       it('renders "End Date" input ', () => {
-        render(component);
-        let input = screen.getByRole('textbox', { name: 'End Date' });
+        const input = screen.getByRole('textbox', { name: 'End Date' });
         expect(input).toBeInTheDocument();
       });
 
       it('renders Species dropdown ', () => {
-        render(component);
-        let dropdown = screen.getByTestId('species-dropdown');
+        const dropdown = screen.getByTestId('species-dropdown');
         expect(dropdown).toBeInTheDocument();
       });
 
       it('renders Tags dropdown ', () => {
-        render(component);
-        let dropdown = screen.getByTestId('tag-dropdown');
+        const dropdown = screen.getByTestId('tag-dropdown');
         expect(dropdown).toBeInTheDocument();
       });
 
       it('renders Organization dropdown ', () => {
-        render(component);
-        let dropdown = screen.getByTestId('org-dropdown');
+        const dropdown = screen.getByTestId('org-dropdown');
         expect(dropdown).toBeInTheDocument();
       });
 
       it('renders default orgList when dropdown clicked ', () => {
-        render(component);
-        let dropdown = screen.getByTestId('org-dropdown');
+        const dropdown = screen.getByTestId('org-dropdown');
         expect(dropdown).toBeInTheDocument();
 
-        let button = within(dropdown).getByRole('button', {
+        const button = within(dropdown).getByRole('button', {
           name: /all/i,
         });
 
@@ -102,16 +85,15 @@ describe('CaptureFilter organizations', () => {
 
     describe('w/ data in context', () => {
       let orgs;
-      let component;
 
       beforeEach(async () => {
         orgs = await api.getOrganizations();
-        component = (
+
+        render(
           <AppProvider value={{ orgList: orgs }}>
             <CaptureFilter />
-          </AppProvider>
+          </AppProvider>,
         );
-        // render(component);
         await act(() => api.getOrganizations());
       });
 
@@ -122,17 +104,15 @@ describe('CaptureFilter organizations', () => {
       });
 
       it('renders Organization dropdown ', () => {
-        render(component);
-        let dropdown = screen.getByTestId('org-dropdown');
+        const dropdown = screen.getByTestId('org-dropdown');
         expect(dropdown).toBeInTheDocument();
       });
 
       it('renders default orgList when dropdown clicked ', () => {
-        render(component);
-        let dropdown = screen.getByTestId('org-dropdown');
+        const dropdown = screen.getByTestId('org-dropdown');
         expect(dropdown).toBeInTheDocument();
 
-        let button = within(dropdown).getByRole('button', { name: /all/i });
+        const button = within(dropdown).getByRole('button', { name: /all/i });
 
         userEvent.click(button);
 
@@ -148,35 +128,30 @@ describe('CaptureFilter organizations', () => {
       });
     });
 
-    // describe('context data renders in child', () => {
-    //   let orgs;
-    //   let component;
-
-    //   beforeEach(async () => {
-    //     component = (
-    //       <AppProvider>
-    //         <AppContext.Consumer>
-    //           {(value) => <p>Received: {value.orgList}</p>}
-    //         </AppContext.Consumer>
-    //       </AppProvider>
-    //     );
-
-    //     render(component);
-
-    //     await act(() => api.getOrganizations());
-    //   });
-
-    //   // just tests the mock api, not what's showing on the page
-    //   it('api loaded 2 organizations', () => {
-    //     expect(orgs).toHaveLength(2);
-    //   });
-
-    //   it('renders text "Dummy Org" ', () => {
-    //     // screen.debug(); // shows structure in console
-    //     screen.logTestingPlaygroundURL();
-    //     // expect(screen.getByText(/^Received:/).textContent).toBe('Received: ');
-    //     expect(screen.getByText('Dummy Org')).toBeInTheDocument();
-    //   });
-    // });
+    describe.skip('context data renders in child', () => {
+      beforeEach(async () => {
+        render(
+          <AppProvider>
+            <AppContext.Consumer>
+              {(value) => <p>Received: {value.orgList}</p>}
+            </AppContext.Consumer>
+          </AppProvider>,
+        );
+
+        await act(() => api.getOrganizations());
+      });
+
+      // just tests the mock api, not what's showing on the page
+      it('api loaded 2 organizations', () => {
+        expect(orgs).toHaveLength(2);
+      });
+
+      it('renders text "Dummy Org" ', () => {
+        // screen.debug(); // shows structure in console
+        screen.logTestingPlaygroundURL();
+        // expect(screen.getByText(/^Received:/).textContent).toBe('Received: ');
+        expect(screen.getByText('Dummy Org')).toBeInTheDocument();
+      });
+    });
   });
 });
diff --git a/src/views/CapturesView.js b/src/views/CapturesView.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { documentTitle } from '../common/variables';
 import { Grid } from '@material-ui/core';
-import CaptureTable from '../components/Captures/CaptureTable.js';
+import CaptureTable from '../components/Captures/CaptureTable';
 import { CapturesProvider } from '../context/CapturesContext';
 import { SpeciesProvider } from '../context/SpeciesContext';
 import { TagsProvider } from '../context/TagsContext';