adding typesense and instantsearch

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     browser: true,
     commonjs: true,
     es6: true,
+    node: true,
   },
 
   // Base config

app/core/components/HitsInstantSearch/ProjectApplicantHits.tsx

@@ -0,0 +1,67 @@
+import ProposalCard from "../ProposalCard";
+import { Grid } from "@mui/material";
+import "instantsearch.css/themes/satellite.css";
+import { connectHits } from "react-instantsearch-core";
+
+const initials = (preferredName: string, lastName: string) => {
+  return preferredName.substring(0, 1) + lastName.substring(0, 1);
+};
+
+interface SearchProjectsOutput {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  description: string;
+  preferredName: string;
+  lastName: string;
+  avatarUrl: string;
+  status: string;
+  color?: string;
+  searchSkills?: { name: string }[];
+  votesCount: number;
+  projectMembers: number;
+  owner?: string;
+  tierName?: string;
+  latest_pmw: boolean;
+  resourcesCount?: number;
+}
+
+interface HitProps {
+  hits: SearchProjectsOutput[];
+}
+
+function HitApplicants({ hits }: HitProps) {
+  return hits.map((hit, i) => {
+    const skillsname = hit.searchSkills?.map((skillName: any) => ({
+      name: skillName.name,
+    }));
+
+    return (
+      <>
+        <Grid item xs={12} sm={6} lg={4} key={i}>
+          <ProposalCard
+            id={hit.id}
+            title={hit.name}
+            picture={hit.avatarUrl}
+            initials={initials(hit.preferredName, hit.lastName)}
+            date={new Intl.DateTimeFormat([], {
+              year: "numeric",
+              month: "long",
+              day: "2-digit",
+            }).format(new Date(hit.createdAt))}
+            description={hit.description}
+            status={hit.status}
+            skills={skillsname}
+            color={hit.color}
+            votesCount={Number(hit.votesCount)}
+            tierName={hit.tierName}
+            projectMembers={Number(hit.projectMembers)}
+          />
+        </Grid>
+      </>
+    );
+  });
+}
+
+export default connectHits(HitApplicants);

app/core/components/HitsInstantSearch/ProjectHits.tsx

@@ -0,0 +1,67 @@
+import ProposalCard from "../ProposalCard";
+import { Grid } from "@mui/material";
+import "instantsearch.css/themes/satellite.css";
+import { connectHits } from "react-instantsearch-core";
+
+const initials = (preferredName: string, lastName: string) => {
+  return preferredName.substring(0, 1) + lastName.substring(0, 1);
+};
+
+interface SearchProjectsOutput {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  description: string;
+  preferredName: string;
+  lastName: string;
+  avatarUrl: string;
+  status: string;
+  color?: string;
+  searchSkills?: { name: string }[];
+  votesCount: number;
+  projectMembers: number;
+  owner?: string;
+  tierName?: string;
+  latest_pmw: boolean;
+  resourcesCount?: number;
+}
+
+interface HitProps {
+  hits: SearchProjectsOutput[];
+}
+
+function HitsA({ hits }: HitProps) {
+  return hits.map((hit, i) => {
+    const skillsname = hit.searchSkills?.map((skillName: any) => ({
+      name: skillName.name,
+    }));
+
+    return (
+      <>
+        <Grid item xs={12} sm={6} lg={4} key={i}>
+          <ProposalCard
+            id={hit.id}
+            title={hit.name}
+            picture={hit.avatarUrl}
+            initials={initials(hit.preferredName, hit.lastName)}
+            date={new Intl.DateTimeFormat([], {
+              year: "numeric",
+              month: "long",
+              day: "2-digit",
+            }).format(new Date(hit.createdAt))}
+            description={hit.description}
+            status={hit.status}
+            skills={skillsname}
+            color={hit.color}
+            votesCount={Number(hit.votesCount)}
+            tierName={hit.tierName}
+            projectMembers={Number(hit.projectMembers)}
+          />
+        </Grid>
+      </>
+    );
+  });
+}
+
+export default connectHits(HitsA);

app/core/components/HitsInstantSearch/TableHits.tsx

@@ -0,0 +1,77 @@
+import { Chip } from "@mui/material";
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import "instantsearch.css/themes/satellite.css";
+import { connectHits } from "react-instantsearch-core";
+
+interface SearchProjectsOutput {
+  sort: number;
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  description: string;
+  preferredName: string;
+  lastName: string;
+  avatarUrl: string;
+  status: string;
+  color?: string;
+  searchSkills?: { name: string }[];
+  votesCount: number;
+  projectMembers: number;
+  owner?: string;
+  tierName?: string;
+  latest_pmw: boolean;
+  resourcesCount?: number;
+}
+
+interface HitProps {
+  hits: SearchProjectsOutput[];
+}
+
+function TableHits({ hits }: HitProps) {
+  return hits.map((hit) => {
+    return (
+      <TableRow key={hit.sort - 1}>
+        <TableCell>
+          <a
+            href={`/projects/${hit.id}`}
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            {hit.name}
+          </a>
+        </TableCell>
+        <TableCell>
+          <Chip
+            component="a"
+            href={`/projects?tier=${hit.tierName}`}
+            clickable
+            rel="noreferrer"
+            label={hit.tierName}
+          />
+        </TableCell>
+        <TableCell>
+          <a
+            href={`/projects/${hit.id}`}
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            {hit.status}
+          </a>
+        </TableCell>
+        <TableCell>{hit.projectMembers}</TableCell>
+        <TableCell>{hit.votesCount}</TableCell>
+        <TableCell>
+          <a
+            href={`/projects/${hit.id}`}
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            {"Code"}
+          </a>
+        </TableCell>
+        <TableCell>{hit.resourcesCount}</TableCell>
+      </TableRow>
+    );
+  });
+}
+
+export default connectHits(TableHits);

app/core/components/HitsInstantSearch/TableHitsApplicant.tsx

@@ -0,0 +1,56 @@
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import "instantsearch.css/themes/satellite.css";
+import { connectHits } from "react-instantsearch-core";
+
+interface SearchProjectsOutput {
+  sort: number;
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  description: string;
+  preferredName: string;
+  lastName: string;
+  avatarUrl: string;
+  status: string;
+  color?: string;
+  searchSkills?: { name: string }[];
+  votesCount: number;
+  projectMembers: number;
+  owner?: string;
+  tierName?: string;
+  latest_pmw: boolean;
+  resourcesCount?: number;
+}
+
+interface HitProps {
+  hits: SearchProjectsOutput[];
+}
+
+function TableHitsApplicant({ hits }: HitProps) {
+  return hits.map((hit) => {
+    return (
+      <TableRow key={hit.sort - 1}>
+        <TableCell>
+          <a
+            href={`/projects/${hit.id}`}
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            {hit.name}
+          </a>
+        </TableCell>
+        <TableCell>
+          <a
+            href={`/projects/${hit.id}`}
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            {"Code"}
+          </a>
+        </TableCell>
+      </TableRow>
+    );
+  });
+}
+
+export default connectHits(TableHitsApplicant);

app/core/components/Search/index.tsx

@@ -1,33 +1,24 @@
 import SearchIcon from "@mui/icons-material/Search";
 import { InputAdornment, TextField } from "@mui/material";
-import { useNavigate, useSearchParams } from "@remix-run/react";
 import { useState } from "react";
 
-export const Search = () => {
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const searchQuery =
-    searchParams.get("q") !== "myProposals" && searchParams.get("q")
-      ? searchParams.get("q")
-      : "";
-  const [searchValue, setSearchValue] = useState(searchQuery);
-  const projectsSearch = "/projects";
-  const handleEnterKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter") {
-      navigate(`${projectsSearch}?q=${searchValue}`);
-    }
+const Search = ({ onSearch }: { onSearch: (value: string) => void }) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    setSearchValue(value);
+    onSearch(value);
   };
 
   return (
     <TextField
       label="Search Project Name"
-      value={searchValue}
-      onChange={(e) => setSearchValue(e.target.value)}
       size="small"
+      placeholder="Search in header..."
+      value={searchValue}
+      onChange={handleSearchChange}
       sx={{ width: "200px" }}
-      onKeyPress={(e) => {
-        handleEnterKeyPress(e);
-      }}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">