wrong api

package.json

@@ -3,12 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/runtime": "^7.22.11",
+    "@material-ui/core": "^4.12.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "algoliasearch": "^4.19.1",
+    "bootstrap": "^5.3.1",
+    "bootstrap-material-design": "^4.1.3",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
+    "react-instantsearch": "^7.0.1",
+    "react-instantsearch-dom": "^6.40.4",
     "react-scripts": "5.0.1",
+    "typesense-instantsearch-adapter": "^2.7.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,23 +1,20 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+
+import Canvas from "./components/canvassearchbox";
+import GridStyle from "./components/gridstylesearchresults";
+import HomePage from "./components/homepage";
+import {InfiniteScroll} from "./components/infintescroll";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="App" class="d-flex justify-content-start">
+      <div class="w-75">
+        <HomePage />
+        <GridStyle />
+        {/* <InfiniteScroll /> */}
+      </div>
+      <Canvas class="w-24" />
     </div>
   );
 }

src/components/addfilters.js

@@ -0,0 +1,22 @@
+import React from "react";
+import {
+  InstantSearch,
+  SearchBox,
+  RefinementList,
+} from "react-instantsearch-dom";
+import TypesenseInstantsearchAdapter from "typesense-instantsearch-adapter";
+
+import { typenessclient, typesenseClient } from "./typenessclient";
+
+const AddFilters = () => {
+  return (
+    <InstantSearch indexName="mockIndex" searchClient={{ search() {} }}>
+      <RefinementList attribute="performer" />
+      <RefinementList attribute="type" />
+      <RefinementList attribute="category" />
+      {/* Other search components go here */}
+    </InstantSearch>
+  );
+};
+
+export default AddFilters;

src/components/canvassearchbox.js

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import {
+  InstantSearch,
+  SearchBox,
+  RefinementList,
+  Hits,
+  Highlight,
+} from "react-instantsearch-dom";
+import Drawer from "@material-ui/core/Drawer";
+
+import { typenessclient } from "./typenessclient";
+import { mockHits } from "../constants/mockhits";
+
+
+
+
+const Canvas = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button className="btn btn-primary" onClick={() => setOpen(true)}>
+        Search
+      </button>
+      <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
+        <div className="p-3">
+          <button
+            className="btn btn-secondary mb-3"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </button>
+          <InstantSearch indexName="mockIndex" searchClient={{ search() {} }}>
+            <SearchBox />
+            {/* <RefinementList attribute="title" />
+            <RefinementList attribute="description" /> */}
+            <Hits hitComponent={({ hit }) => console.log("123123")} Hits={mockHits} />
+          </InstantSearch>
+        </div>
+      </Drawer>
+      {/* Other components go here */}
+    </>
+  );
+};
+
+function Hit({ hit }) {
+  console.log({ hit });
+  return (
+    <div>
+      <h1>title</h1>
+      <p>description</p>
+    </div>
+  );
+}
+
+export default Canvas;

src/components/gridstylesearchresults.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { InstantSearch, Hits } from "react-instantsearch";
+
+import { typenessclient } from "./typenessclient";
+import { mockHits } from "../constants/mockhits";
+
+function Hit({ hit }) {
+  console.log({ hit });
+  return (
+    <div>
+      <h1>{hit.description}</h1>
+    </div>
+  );
+}
+
+export default function GridStyle() {
+  return (
+    <InstantSearch indexName="auditions" searchClient={typenessclient}>
+      <Hits hitComponent={Hit} />
+    </InstantSearch>
+  );
+}

src/components/homepage.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function HomePage() {
+  return (
+    <div class="container w-70">
+      <div class="jumbotron">
+        <h1>bootstrap material jumbotrom</h1>
+        <p>
+          Jumbotron specifies a big box for getting extra attention to some
+          special content or information.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/infintescroll.js

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import {
+  InstantSearch,
+  SearchBox,
+  RefinementList,
+  InfiniteHits,
+  Highlight,
+} from "react-instantsearch-dom";
+import Drawer from "@material-ui/core/Drawer";
+import { mockHits } from "../constants/mockhits";
+export const InfiniteScroll = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button className="btn btn-primary" onClick={() => setOpen(true)}>
+        Search
+      </button>
+      <Drawer anchor="left" open={open} onClose={() => setOpen(false)}>
+        <div className="p-3">
+          <button
+            className="btn btn-secondary mb-3"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </button>
+          <InstantSearch indexName="auditions" searchClient={{ Search() {} }}>
+            <SearchBox />
+            <InfiniteHits
+              hitComponent={({ hit }) => (
+                <div className="col-md-4">
+                  <div className="card mb-4 shadow-sm">
+                    <div className="card-body">
+                      <h5 className="card-title">
+                        <Highlight attribute="title" hit={hit} />
+                      </h5>
+                      <p className="card-text">
+                        <Highlight attribute="performer" hit={hit} />
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )} 
+              hits={mockHits}
+            />
+          </InstantSearch>
+        </div>
+      </Drawer>
+      {/* Other components go here */}
+    </>
+  );
+};

src/components/modal.js

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import {
+  InstantSearch,
+  SearchBox,
+  RefinementList,
+  InfiniteHits,
+  Highlight,
+  Configure,
+  connectHits,
+} from "react-instantsearch-dom";
+import Drawer from "@material-ui/core/Drawer";
+import Modal from "react-bootstrap/Modal";
+
+import { typenessclient } from "./typenessclient";
+
+const HitsModal = ({ hits }) => {
+  return (
+    <>
+      {hits.map((hit) => (
+        <div key={hit.id} className="mb-3">
+          <h5>
+            <Highlight attribute="title" hit={hit} />
+          </h5>
+          <p>
+            <Highlight attribute="performer" hit={hit} />
+          </p>
+        </div>
+      ))}
+    </>
+  );
+};
+
+const CustomHits = connectHits(HitsModal);
+
+const ModalComponent = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedHit, setSelectedHit] = useState(null);
+
+  const handleHitClick = (hit) => {
+    setSelectedHit(hit);
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <Drawer anchor="left" open={open} onClose={() => setOpen(false)}>
+        <div className="p-3">
+          <button
+            className="btn btn-secondary mb-3"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </button>
+          <InstantSearch indexName="mockIndex" searchClient={{}}>
+            <SearchBox />
+            <RefinementList attribute="performer" />
+            <RefinementList attribute="type" />
+            <RefinementList attribute="category" />
+            <InfiniteHits
+              hitComponent={({ hit }) => (
+                <div className="col-md-4">
+                  <div className="card mb-4 shadow-sm">
+                    <div className="card-body">
+                      <h5 className="card-title">
+                        <Highlight attribute="title" hit={hit} />
+                      </h5>
+                      <p className="card-text">
+                        <Highlight attribute="performer" hit={hit} />
+                      </p>
+                      <button
+                        className="btn btn-primary"
+                        onClick={() => handleHitClick(hit)}
+                      >
+                        Details
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+              hits={mockHits(4)}
+            />
+            {selectedHit && (
+              <Modal show={open} onHide={() => setOpen(false)}>
+                <Modal.Header closeButton>
+                  <Modal.Title>{selectedHit.title}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  {/* Display details about selected hit */}
+                </Modal.Body>
+                <Modal.Footer>
+                  {/* Display list of hits */}
+                  <Configure hitsPerPage={5} />
+                  <CustomHits />
+                </Modal.Footer>
+              </Modal>
+            )}
+          </InstantSearch>
+        </div>
+      </Drawer>
+      {/* Other components go here */}
+    </>
+  );
+};
+
+export default ModalComponent;

src/components/search.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { InstantSearch } from "react-instantsearch-dom";
+
+import { typenessclient } from "./typenessclient";
+import SearchBx from "./searchbox";
+import AddFilters from "./addfilters";
+import GridStyle from "./gridstylesearchresults";
+
+const Search = () => {
+  return (
+    <InstantSearch indexName="mockIndex" searchClient={{ search() {} }}>
+      <SearchBx />
+      <AddFilters />
+      <GridStyle />
+    </InstantSearch>
+  );
+};
+
+export default Search;

src/components/searchbox.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { InstantSearch, SearchBox } from "react-instantsearch-dom";
+import { typesenseInstantsearchAdapter } from "typesense-instantsearch-adapter";
+
+import { typenessclient } from "./typenessclient";
+
+const SearchBx = () => {
+  return (
+    <InstantSearch indexName="auditions" searchClient={{ search() {} }}>
+      <SearchBox />
+    </InstantSearch>
+  );
+};
+
+export default SearchBx;