Merge pull request #32 from HowTrash/feature/30-FE-SearchAPI

finished
reBike · Aug 4, 2022 · 6e04d76 · 6e04d76
2 parents 28a14dd + 56ef392
commit 6e04d76
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 104 deletions.
diff --git a/frontend/src/components/mainpage/SearchBar.tsx b/frontend/src/components/mainpage/SearchBar.tsx
@@ -1,91 +1,114 @@
-import { Box, TextField, IconButton } from "@mui/material";
+import { Box, TextField, IconButton, styled } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Api from "../../utils/customApi";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
 
-const SearchBar = () => {
-  interface searchData {
-    name: string;
-    way: string;
-  }
+const ranklist: { kind: string; image: string }[] = [
+    {
+        kind: "GLASS",
+        image: `https://i.ibb.co/g9rSyFX/31-OEv-Rve-V3-L-SY450.jpg`,
+    },
+    {
+        kind: "BIODEGRADABLE",
+        image: `https://i.ibb.co/0MHvQZr/2022-07-30-11-23-56.png`,
+    },
+    {
+        kind: "CARDBOARD",
+        image: `https://i.ibb.co/jHTxfbS/17457488-1837243389875287-7962009710514097503-n.jpg`,
+    },
+    {
+        kind: "PAPER",
+        image: `https://i.ibb.co/7XPdFc5/2558-B64255-CF58-B833.jpg`,
+    },
+    {
+        kind: "METAL",
+        image: `https://i.ibb.co/tsjSswc/2022-07-30-11-26-27.png`,
+    },
+    {
+        kind: "PLASTIC",
+        image: `https://i.ibb.co/xLm0vv2/2022-07-30-11-20-36.png`,
+    },
+];
 
-  const [input, setInput] = useState("");
+const SearchBarBox = styled(Box)(({}) => ({
+    backgroundColor: "white",
+    borderRadius: "15px",
+    boxShadow: "1px 3px 3px #B0B09A",
+    margin: "auto",
+    marginTop: "250px",
+    width: "58ch",
+}));
 
-  const searchHowTrash = async (props: string) => {
-    const result = await Api.get(
-      `/trash/mainpage/search-words/${props}/result`
-    ).then((res) => res.data[0] as searchData);
-    window.location.href = "../Howtopage"; //이걸 또 각각 새로운 페이지로 만들어야함 ${}써서
-    console.log(result);
-  };
+const SearchBarTextField = styled(TextField)(({}) => ({
+    width: "50ch",
+    backgroundColor: "white",
+    border: 0,
+    borderRadius: 10,
+    ml: 1,
+    "& .MuiOutlinedInput-root": {
+        "& fieldset": {
+            borderColor: "#00ff0000",
+        },
+        "&.Mui-focused fieldset": {
+            borderColor: "#00ff0000",
+        },
+        "&:hover fieldset": {
+            borderColor: "#00ff0000",
+        },
+    },
+}));
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (input === "paper") {
-      searchHowTrash("cardboard");
-    } else alert("그런 검색어는 없어요ㅜ");
-    setInput("");
-  };
+const SearchBar = () => {
+    const [input, setInput] = useState("");
+    let navigate = useNavigate();
 
-  console.log(input);
-  //서치바
-  //
+    const onSubmit = (input: string) => {
+        axios
+            .post(`http://localhost:8080/api/search/`, { value: input })
+            .then((response) => {
+                let trashIMG = "";
+                for (let j = 0; j < 6; j++) {
+                    if (ranklist[j].kind === response.data.result[0]) {
+                        trashIMG = ranklist[j].image;
+                    }
+                }
+                navigate(`/defaulthowpage`, {
+                    state: {
+                        needKind: response.data.result[0],
+                        needImages: trashIMG,
+                    },
+                });
+            });
+    };
 
-  return (
-    <Box
-      sx={{
-        backgroundColor: "white",
-        borderColor: "#759F98",
-        borderRadius: 3,
-        boxShadow: "1px 3px 3px #B0B09A",
-        margin: "auto",
-        mt: 2,
-        width: "58ch",
-      }}
-    >
-      <Box
-        onSubmit={handleSubmit}
-        component="form"
-        sx={{
-          "& .MuiTextField-root": {
-            width: "50ch",
-          },
-        }}
-        noValidate
-        autoComplete="off"
-      >
-        <TextField
-          id="searchContent"
-          name="searchContent"
-          type="text"
-          value={input || ""}
-          onChange={(event) => setInput(event.target.value)}
-          sx={{
-            backgroundColor: "white",
-            border: 0,
-            borderRadius: 10,
-            ml: 1,
-            "& .MuiOutlinedInput-root": {
-              "& fieldset": {
-                borderColor: "#00ff0000",
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: "#00ff0000",
-              },
-              "&:hover fieldset": {
-                borderColor: "#00ff0000",
-              },
-            },
-          }}
-        />
 
-        <IconButton type="submit" aria-label="search">
-          <SearchIcon sx={{ mt: 0.5, color: "#B0B09A" }} fontSize="large" />
-        </IconButton>
-      </Box>
-    </Box>
-  );
+    return (
+        <SearchBarBox>
+            <Box
+                component="form"
+                onSubmit={(e: any) => {
+                    e.preventDefault();
+                    onSubmit(input);
+                }}
+            >
+                <SearchBarTextField
+                    value={input}
+                    onChange={(e) => {
+                        setInput(e.target.value);
+                    }}
+                />
+                <IconButton type="submit" aria-label="search">
+                    <SearchIcon
+                        sx={{ mt: 0.5, color: "#B0B09A" }}
+                        fontSize="large"
+                    />
+                </IconButton>
+            </Box>
+        </SearchBarBox>
+    );
 };
 
 export default SearchBar;
diff --git a/frontend/src/modules/ReduxImgApi.tsx b/frontend/src/modules/ReduxImgApi.tsx
@@ -3,34 +3,34 @@ import { useState, useEffect } from "react";
 import { getAccess } from "src/Auth/tokenManager";
 
 const TrashInfoApi = (itemID: any, userIdToRedux: any) => {
-  const [imgUrl, setImgUrl] = useState("");
-  const [trashKinds, setTrashKinds] = useState([]);
-  const trashKindList: any = [];
-  const what: any = getAccess();
-  useEffect(() => {
-    Api.get(`/trash/users/${userIdToRedux}/images/${itemID}/kinds`, {
-      headers: {
-        Authorization: `${what.value}`,
-      },
-    }).then(function (response) {
-      for (var i = 0; i < response.data.length; i++) {
-        trashKindList.push(response.data[i].kind);
-      }
-      console.log(trashKindList);
-      setTrashKinds(trashKindList);
-    });
+    const [imgUrl, setImgUrl] = useState("");
+    const [trashKinds, setTrashKinds] = useState([]);
+    const trashKindList: any = [];
+    const what: any = getAccess();
+    useEffect(() => {
+        Api.get(`/trash/users/${userIdToRedux}/images/${itemID}/kinds`, {
+            headers: {
+                Authorization: `${what.value}`,
+            },
+        }).then(function (response) {
+            for (var i = 0; i < response.data.length; i++) {
+                trashKindList.push(response.data[i].kind);
+            }
+            console.log(trashKindList);
+            setTrashKinds(trashKindList);
+        });
 
-    Api.get(`/trash/users/${userIdToRedux}/images/${itemID}`, {
-      headers: {
-        Authorization: `${what.value}`,
-      },
-    }).then(function (response) {
-      console.log(response.data.image);
-      setImgUrl(response.data.image);
-    });
-  }, []);
+        Api.get(`/trash/users/${userIdToRedux}/images/${itemID}`, {
+            headers: {
+                Authorization: `${what.value}`,
+            },
+        }).then(function (response) {
+            console.log(response.data.image);
+            setImgUrl(response.data.image);
+        });
+    }, []);
 
-  return { imgUrl, trashKinds };
+    return { imgUrl, trashKinds };
 };
 
 export default TrashInfoApi;