feat: dashboard search (#338)

Co-authored-by: sidemt <25644062+sidemt@users.noreply.github.com>

apps/frontend/package.json

@@ -13,6 +13,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.1.5",
     "@chakra-ui/react": "^2.8.0",
     "@choc-ui/chakra-autocomplete": "^5.2.8",

apps/frontend/src/components/nav-menu.jsx

@@ -32,6 +32,7 @@ import { signOut } from "next-auth/react";
 import NextLink from "next/link";
 
 import { isEditor } from "@/lib/current-user";
+import PostSearch from "./search-component";
 
 const Icon = chakra(FontAwesomeIcon);
 
@@ -79,7 +80,7 @@ const NavMenuContent = ({ user, onClose, ...rest }) => {
             mx="20px"
             textAlign="center"
             fontWeight="700"
-            fontSize="20px"
+            fontSize="16px"
             display="flex"
             alignItems="center"
           >
@@ -92,6 +93,7 @@ const NavMenuContent = ({ user, onClose, ...rest }) => {
             />
             freeCodeCamp.org
           </Box>
+          <PostSearch user={user} />
           <CloseButton
             onClick={onClose}
             display={{ base: "flex", md: "none" }}

apps/frontend/src/components/search-component.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import {
+  IconButton,
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  Input,
+  useDisclosure,
+  InputGroup,
+  InputLeftElement,
+  Text,
+  Card,
+  CardBody,
+} from "@chakra-ui/react";
+import { SearchIcon } from "@chakra-ui/icons";
+import { getAllPosts } from "@/lib/posts";
+import { isEditor } from "@/lib/current-user";
+import NextLink from "next/link";
+
+const PostSearch = ({ user }) => {
+  const [posts, setPosts] = useState([]);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const search = async (query) => {
+    const result = await getAllPosts(user.jwt, {
+      publicationState: "preview",
+      fields: ["title", "id"],
+      populate: ["author"],
+      filters: {
+        title: {
+          $containsi: query,
+        },
+        // only show posts of that user if they are not an editor
+        ...(isEditor(user) ? {} : { author: { id: { $eq: user.id } } }),
+      },
+      pagination: {
+        pageSize: 5,
+      },
+    });
+
+    setPosts(result.data);
+  };
+
+  return (
+    <>
+      <IconButton onClick={onOpen} variant={"ghost"}>
+        <SearchIcon />
+      </IconButton>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <InputGroup>
+            <InputLeftElement pointerEvents={"none"} className="InputLeft">
+              <SearchIcon color={"gray.300"} />
+            </InputLeftElement>
+            <Input
+              type="text"
+              placeholder="Search"
+              onChange={(query) => search(query.target.value)}
+              size="lg"
+            />
+          </InputGroup>
+          {posts.map((post) => (
+            <Card as={NextLink} href={`/posts/${post.id}`} key={post.id}>
+              <CardBody>
+                <Text>{post.attributes.title}</Text>
+              </CardBody>
+            </Card>
+          ))}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default PostSearch;

apps/frontend/src/styles/globals.css

@@ -52,3 +52,8 @@
   width: 40%;
   height: 40%;
 }
+
+.InputLeft {
+  top: 3px !important;
+  left: 3px !important;
+}