Feature/hotkeys

app/components/modules/search/index.tsx

@@ -0,0 +1,88 @@
+import { TextField, Box } from '@mui/material';
+import React, { useState } from 'react';
+import { PrimaryButton } from '../../elements/styledComponents';
+import { useSpace } from '../../../../pages/tribe/[id]/space/[bid]';
+import { BoardData } from '../../../types';
+
+export interface CurrentFilter {
+  titleFilter: string;
+}
+
+export const filterTasks = (space: BoardData, currentFilter: CurrentFilter) => {
+  const filteredTasks = Object.values(space.tasks)?.filter((task) => {
+    if (task === undefined) return false;
+    let titleFiltSat = false;
+
+    const { title } = task;
+
+    if (currentFilter.titleFilter.length > 0) {
+      const searchString = currentFilter.titleFilter.toLowerCase();
+      const titleToSearch = title.toLowerCase();
+      const titleSearch = titleToSearch.includes(searchString);
+      if (titleSearch === true) {
+        titleFiltSat = true;
+      }
+    } else {
+      titleFiltSat = true;
+    }
+
+    if (titleFiltSat) {
+      return task;
+    }
+    return false;
+  });
+  const spaceTasks = filteredTasks.reduce(
+    (acc, task) => ({ ...acc, [task.taskId]: task }),
+    {}
+  );
+  return spaceTasks;
+};
+
+function TasksFilter() {
+  const { space, setFilteredTasks, setCurrentFilter } = useSpace();
+  const [titleFilter, setTitleFilter] = useState<string>('');
+
+  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitleFilter(event.target.value);
+  };
+
+  const handleFilter = () => {
+    setCurrentFilter({
+      titleFilter,
+      reviewerFilter: [],
+      assigneeFilter: [],
+      labelsFilter: [],
+    });
+    setFilteredTasks(
+      filterTasks(space, {
+        titleFilter,
+      })
+    );
+  };
+
+  return (
+    <Box>
+      <TextField
+        id="filled-hidden-label-normal"
+        size="small"
+        fullWidth
+        placeholder="Title"
+        value={titleFilter}
+        onChange={handleTitleChange}
+        sx={{ mt: 2 }}
+        color="secondary"
+      />
+
+      <PrimaryButton
+        variant="outlined"
+        sx={{ mt: 4, borderRadius: 1 }}
+        color="secondary"
+        onClick={handleFilter}
+      >
+        Filter
+      </PrimaryButton>
+    </Box>
+  );
+}
+
+export default TasksFilter;

app/components/templates/space/index.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { useMoralis } from 'react-moralis';
-import { Fade, Grow } from '@mui/material';
+import { Fade, Grow, Box, Modal, Typography } from '@mui/material';
 import { useSpace } from '../../../../pages/tribe/[id]/space/[bid]';
 import CardModal from '../../modules/cardModal';
 import DiscordIntegrationModal from '../../modules/discordIntegrationModal';
@@ -11,6 +11,7 @@ import EpochList from '../../modules/epoch';
 import NoAccess from '../../modules/epoch/noAccess';
 import ProjectSkeletonLoader from '../../modules/project/skeletonLoader';
 import SpaceSettings from '../../modules/spaceSettings';
+import Search from '../../modules/search';
 
 type Props = {};
 
@@ -20,6 +21,18 @@ const OuterDiv = styled.div`
   width: 100%;
 `;
 
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.default',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
 function BoardsTemplate(props: Props) {
   const router = useRouter();
   const { user } = useMoralis();
@@ -28,6 +41,10 @@ function BoardsTemplate(props: Props) {
   const { space, isLoading, tab } = useSpace();
   const [isOpen, setIsOpen] = useState(false);
   const [isDiscordModalOpen, setIsDiscordModalOpen] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handlesOpen = () => setOpen(true);
+  const handlesClose = () => setOpen(false);
+
   const handleClose = () => {
     setIsOpen(false);
     router.push(`/tribe/${id}/space/${bid}`);
@@ -40,6 +57,17 @@ function BoardsTemplate(props: Props) {
     if (taskId && !isLoading) {
       setIsOpen(true);
     }
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'k') {
+        handlesOpen();
+      }
+    };
+    window.addEventListener('keyup', handler);
+
+    return () => {
+      window.removeEventListener('keyup', handler);
+    };
   }, [taskId, isLoading]);
 
   if (isLoading) {
@@ -48,6 +76,24 @@ function BoardsTemplate(props: Props) {
 
   return (
     <OuterDiv>
+      <Modal
+        open={open}
+        onClose={handlesClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography
+            id="modal-modal-title"
+            variant="h6"
+            component="h2"
+            color="secondary"
+          >
+            {space.name}
+            <Search />
+          </Typography>
+        </Box>
+      </Modal>
       <CardModal
         isOpen={isOpen}
         handleClose={handleClose}