changed background color & enhanced filtering

client/src/components/ActivityCollection.tsx

@@ -3,17 +3,27 @@ import { Activity } from "../types/Activity";
 
 type IProps = {
   activities: Activity[];
+  filterText: string;
 };
 
-export const ActivityCollection: FC<IProps> = ({ activities }) => {
+export const ActivityCollection: FC<IProps> = ({ activities, filterText }) => {
   return (
     <>
       <ul className="collection">
-        {activities.map((activity: Activity) => (
-          <li key={activity.id} className="collection-item avatar">
-            <ActivityEntry activity={activity} />
-          </li>
-        ))}
+        {activities
+          .filter(
+            a =>
+              a.description.toLowerCase().includes(filterText.toLowerCase()) ||
+              a.user.firstName
+                .toLowerCase()
+                .includes(filterText.toLowerCase()) ||
+              a.ticket.title.toLowerCase().includes(filterText.toLowerCase())
+          )
+          .map((activity: Activity) => (
+            <li key={activity.id} className="collection-item avatar">
+              <ActivityEntry activity={activity} />
+            </li>
+          ))}
       </ul>
     </>
   );

client/src/components/ActivityList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, ChangeEvent } from "react";
+import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
 import { ActivityCollection } from "./ActivityCollection";
 import { Activity } from "../types/Activity";
 import { FilterBar } from "./FilterBar";
@@ -9,7 +9,9 @@ type IProps = {
 
 export const ActivityList: FC<IProps> = ({ activities }) => {
   const [filterText, setFilterText] = useState<string>("");
-
+  const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
+    setFilterText("");
+  };
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
   ) => {
@@ -20,9 +22,13 @@ export const ActivityList: FC<IProps> = ({ activities }) => {
     <>
       <div className="row valign-wrapper">
         <h3>Activity</h3>
-        <FilterBar filterText={filterText} handleChange={handleChange} />
+        <FilterBar
+          filterText={filterText}
+          handleChange={handleChange}
+          clearFilterText={clearFilterText}
+        />
       </div>
-      <ActivityCollection activities={activities} />
+      <ActivityCollection activities={activities} filterText={filterText} />
     </>
   );
 };

client/src/components/AppFileList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, ChangeEvent } from "react";
+import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
 import { AppFile } from "../types/AppFile";
 import { FileCollection } from "./FileCollection";
 import { InputFile } from "./InputFile";
@@ -10,7 +10,9 @@ type IProps = {
 
 export const FileList: FC<IProps> = ({ files }) => {
   const [filterText, setFilterText] = useState<string>("");
-
+  const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
+    setFilterText("");
+  };
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
   ) => {
@@ -20,10 +22,14 @@ export const FileList: FC<IProps> = ({ files }) => {
     <>
       <div className="row valign-wrapper">
         <h3>Files</h3>
-        <FilterBar filterText={filterText} handleChange={handleChange} />
+        <FilterBar
+          filterText={filterText}
+          handleChange={handleChange}
+          clearFilterText={clearFilterText}
+        />
       </div>
       <InputFile />
-      <FileCollection files={files} />
+      <FileCollection files={files} filterText={filterText} />
     </>
   );
 };

client/src/components/FileCollection.tsx

@@ -3,15 +3,22 @@ import { AppFile } from "../types/AppFile";
 
 type IProps = {
   files: AppFile[];
+  filterText: string;
 };
 
-export const FileCollection: FC<IProps> = ({ files }) => {
+export const FileCollection: FC<IProps> = ({ files, filterText }) => {
   return (
     <>
       <ul className="collection">
-        {files.map((file: AppFile) => (
-          <FileEntry file={file} key={file.id} />
-        ))}
+        {files
+          .filter(
+            f =>
+              f.name.toLowerCase().includes(filterText.toLowerCase()) ||
+              f.format.toLowerCase().includes(filterText.toLowerCase())
+          )
+          .map((file: AppFile) => (
+            <FileEntry file={file} key={file.id} />
+          ))}
       </ul>
     </>
   );

client/src/components/FilterBar.tsx

@@ -1,12 +1,17 @@
-import React, { FC } from "react";
+import React, { FC, ChangeEvent, MouseEvent } from "react";
 import { useRouteMatch } from "react-router-dom";
 
 type IProps = {
   filterText: string;
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  clearFilterText: (e: MouseEvent<HTMLInputElement>) => void;
 };
 
-export const FilterBar: FC<IProps> = ({ filterText, handleChange }) => {
+export const FilterBar: FC<IProps> = ({
+  filterText,
+  handleChange,
+  clearFilterText
+}) => {
   const { url } = useRouteMatch();
   const placeholder: string = url.split("/")[3];
   return (
@@ -26,13 +31,10 @@ export const FilterBar: FC<IProps> = ({ filterText, handleChange }) => {
           <label className="label-icon" htmlFor="search">
             <i className="material-icons">filter_list</i>
           </label>
-          <i
-            className="material-icons" //onClick={clearSearchBar}
-          >
+          <i className="material-icons" onClick={clearFilterText}>
             close
           </i>
         </div>
-        <div className="col s2 valign-wrapper"></div>
       </div>
     </>
   );

client/src/components/TicketList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, ChangeEvent } from "react";
+import React, { FC, useState, ChangeEvent, MouseEvent } from "react";
 import { Ticket } from "../types/Ticket";
 import { FloatingButton } from "./FloatingButton";
 import { HorizontalCard } from "./HorizontalCard";
@@ -9,9 +9,12 @@ type TicketListProps = {
 };
 
 export const TicketList: FC<TicketListProps> = ({ tickets }) => {
+  const [filterText, setFilterText] = useState<string>("");
+  const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => {
+    setFilterText("");
+  };
   const archiveTicket = () => {};
   const validateTicket = () => {};
-  const [filterText, setFilterText] = useState<string>("");
 
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
@@ -44,12 +47,18 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
       <div className="row valign-wrapper">
         <h3>Tickets</h3>
         <FloatingButton color=" blue-grey lighten-4" size="small" />
-        <FilterBar filterText={filterText} handleChange={handleChange} />
+        <FilterBar
+          filterText={filterText}
+          handleChange={handleChange}
+          clearFilterText={clearFilterText}
+        />
       </div>
       <div className="col s12 grey">
         <ul>
           {tickets
-            .filter(t => t.title.includes(filterText))
+            .filter(t =>
+              t.title.toLowerCase().includes(filterText.toLowerCase())
+            )
             .map((t: Ticket) => (
               <li key={t.id}>
                 <HorizontalCard

client/src/controllers/ProjectController.tsx

@@ -91,7 +91,7 @@ export const ProjectController: FC = () => {
       name: "Business Model Canvas",
       description: "Path to 1B$",
       size: 2100,
-      format: "pdf"
+      format: "png"
     }
   ];
 

client/src/utils/router.tsx

@@ -17,7 +17,7 @@ export const history = creacteHistory.createBrowserHistory();
 export const AppRouter = () => {
   return (
     <Router history={history}>
-      <div>
+      <div className="grey lighten-4">
         <Switch>
           {/* <Route path="/">
             <HomeController />