sortTirol

components/Top.js

@@ -4,6 +4,7 @@ import { useCollectionData } from "react-firebase-hooks/firestore";
 import TirolCard from "./TirolCard";
 import Modal from "react-modal";
 import Upload from "./upload";
+import Router from "next/router";
 
 const modalStyle = {
   overlay: {
@@ -28,7 +29,8 @@ Modal.setAppElement("body");
 
 const TirolList = () => {
   const [modalIsOpen, setIsOpen] = React.useState(false);
-  const [tirols, loading, error] = useCollectionData(
+  const [name, setName] = useState("");
+  let [tirols, loading, error] = useCollectionData(
     firebase.firestore().collection("tirol"),
     {
       idField: "id",
@@ -47,10 +49,49 @@ const TirolList = () => {
   function closeModal() {
     setIsOpen(false);
   }
-
+  async function onSearch() {
+    console.log(tirols);
+    await firebase
+      .firestore()
+      .collection("tirol")
+      .orderBy("name")
+      .startAt(name)
+      .endAt(name + "\uf8ff")
+      .get()
+      .then((snapShot) => {
+        snapShot.forEach((doc) => {
+          // console.log(tirols);
+          tirols = doc.data();
+          // console.log(tirols);
+          // console.log(`tirols:${tirols.name}`);
+          let name = doc.data().name;
+          let arraySplit = name.split("");
+          console.log(arraySplit);
+          console.log(`${doc.id}: ${doc.data().name}`);
+          Router.push({
+            pathname: "/tirolrepo",
+            query: { name: `${doc.id}` },
+          });
+        });
+        console.log(`tirols:${tirols.name}`);
+      });
+    console.log(`tirols2:${tirols}`);
+  }
   return (
     <>
-      <div className="grid grid-cols-auto gap-4">
+      <p className="pb-6 pl-32 text-xl text-left">
+        感想を見たい・書きたいチロルチョコを選ぼう▼
+        <input
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="form-bg"
+          placeholder=""
+        ></input>
+        <button className="pl-2" onClick={onSearch}>
+          検索
+        </button>
+      </p>
+      <div className="grid grid-cols-auto gap-4 bg-pink p-16">
         <img
           src="/upload-tirol-icon.png"
           onClick={openModal}

layouts/Top/index.js

@@ -0,0 +1,14 @@
+import Header from "../../components/layouts/Header";
+import Footer from "../../components/layouts/Footer";
+
+function TopLayout({ children }) {
+  return (
+    <>
+      <Header />
+      <div className="main-bg p-16">{children}</div>
+      <Footer />
+    </>
+  );
+}
+
+export default TopLayout;

pages/index.js

@@ -1,11 +1,11 @@
 import Top from "../components/Top";
-import MainLayout from "../layouts/Main";
+import TopLayout from "../layouts/Top";
 
 const Index = () => {
   return (
-    <MainLayout>
+    <TopLayout>
       <Top />
-    </MainLayout>
+    </TopLayout>
   );
 };