Merge pull request #15 from Visual-Regression-Tracker/22-variation-filter

22 variation filter

Author: pashidlos

src/components/Filters.tsx

@@ -9,20 +9,20 @@ import {
   InputLabel,
 } from "@material-ui/core";
 import { Clear } from "@material-ui/icons";
-import { TestRun } from "../types";
+import { TestRun, TestVariation } from "../types";
 
 interface IProps {
-  testRuns: TestRun[];
+  items: (TestRun | TestVariation)[];
   queryState: [string, React.Dispatch<React.SetStateAction<string>>];
   osState: [string, React.Dispatch<React.SetStateAction<string>>];
   deviceState: [string, React.Dispatch<React.SetStateAction<string>>];
   browserState: [string, React.Dispatch<React.SetStateAction<string>>];
   viewportState: [string, React.Dispatch<React.SetStateAction<string>>];
-  testStatusState: [string, React.Dispatch<React.SetStateAction<string>>];
+  testStatusState?: [string, React.Dispatch<React.SetStateAction<string>>];
 }
 
 const Filters: React.FunctionComponent<IProps> = ({
-  testRuns,
+  items,
   queryState,
   osState,
   deviceState,
@@ -35,27 +35,31 @@ const Filters: React.FunctionComponent<IProps> = ({
   const [device, setDevice] = deviceState;
   const [browser, setBrowser] = browserState;
   const [viewport, setViewport] = viewportState;
-  const [testStatus, setTestStatus] = testStatusState;
+  const [testStatus, setTestStatus] = testStatusState
+    ? testStatusState
+    : [null, () => {}];
 
-  const osList = testRuns
+  const osList = items
     .map((t) => t.os)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
-  const deviceList = testRuns
+  const deviceList = items
     .map((t) => t.device)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
-  const browserList = testRuns
+  const browserList = items
     .map((t) => t.browser)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
-  const viewportList = testRuns
+  const viewportList = items
     .map((t) => t.viewport)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
-  const testStatusList = testRuns
-    .map((t) => t.status)
-    .filter((v, i, array) => v && array.indexOf(v) === i);
+  const testStatusList =
+    items.some((i) => (i as TestRun).status) &&
+    (items as TestRun[])
+      .map((t) => t.status)
+      .filter((v, i, array) => v && array.indexOf(v) === i);
 
   return (
     <React.Fragment>
@@ -171,7 +175,7 @@ const Filters: React.FunctionComponent<IProps> = ({
             </FormControl>
           </Grid>
         )}
-        {testStatusList.length > 0 && (
+        {testStatusList && testStatusList.length > 0 && (
           <Grid item xs>
             <FormControl fullWidth>
               <InputLabel shrink id="filter_testStatus">

src/pages/ProjectPage.tsx

@@ -147,7 +147,7 @@ const ProjectPage = () => {
           <Grid item>
             <Box m={2}>
               <Filters
-                testRuns={testRuns}
+                items={testRuns}
                 queryState={[query, setQuery]}
                 osState={[os, setOs]}
                 deviceState={[device, setDevice]}

src/pages/TestVariationListPage.tsx

@@ -5,13 +5,22 @@ import { TestVariation } from "../types";
 import { testVariationService } from "../services";
 import { Container, Box, Grid, Typography } from "@material-ui/core";
 import ProjectSelect from "../components/ProjectSelect";
+import Filters from "../components/Filters";
 
 const TestVariationListPage: React.FunctionComponent = () => {
   const { projectId } = useParams();
   const [testVariations, setTestVariations] = React.useState<TestVariation[]>(
     []
   );
 
+  // filter
+  const [query, setQuery] = React.useState("");
+  const [os, setOs] = React.useState("");
+  const [device, setDevice] = React.useState("");
+  const [browser, setBrowser] = React.useState("");
+  const [viewport, setViewport] = React.useState("");
+  const [filteredItems, setFilteredItems] = React.useState<TestVariation[]>([]);
+
   React.useEffect(() => {
     if (projectId) {
       testVariationService.getList(projectId).then((testVariations) => {
@@ -20,6 +29,19 @@ const TestVariationListPage: React.FunctionComponent = () => {
     }
   }, [projectId]);
 
+  React.useEffect(() => {
+    setFilteredItems(
+      testVariations.filter(
+        (t) =>
+          t.name.includes(query) && // by query
+          (os ? t.os === os : true) && // by OS
+          (device ? t.device === device : true) && // by device
+          (viewport ? t.viewport === viewport : true) && // by viewport
+          (browser ? t.browser === browser : true) // by browser
+      )
+    );
+  }, [query, os, device, browser, viewport, testVariations]);
+
   return (
     <React.Fragment>
       <Container>
@@ -30,7 +52,19 @@ const TestVariationListPage: React.FunctionComponent = () => {
               <ProjectSelect selectedId={projectId} />
             </Grid>
             <Grid item>
-              <TestVariationList items={testVariations} />
+              <Box m={2}>
+                <Filters
+                  items={testVariations}
+                  queryState={[query, setQuery]}
+                  osState={[os, setOs]}
+                  deviceState={[device, setDevice]}
+                  browserState={[browser, setBrowser]}
+                  viewportState={[viewport, setViewport]}
+                />
+              </Box>
+            </Grid>
+            <Grid item>
+              <TestVariationList items={filteredItems} />
             </Grid>
           </Grid>
         </Box>