search is near to be ready

frontend/src/components/common/checkBox.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-const CheckBox = ({ label, name, onChange = null, value }) => {
-  console.log(value);
+const CheckBox = ({ label, name, onChange = null, checked }) => {
   return (
     <div className="form-group form-check">
       <input
@@ -10,7 +9,7 @@ const CheckBox = ({ label, name, onChange = null, value }) => {
         className="form-check-input"
         name={name}
         id={name}
-        value={value}
+        checked={checked}
       />
       <label className="form-check-label" htmlFor={name}>
         {label}

frontend/src/components/common/form.jsx

@@ -82,7 +82,9 @@ class Form extends Component {
     }
 
     const data = { ...this.state.data };
-    data[input.name] = input.value;
+    if (input.type === "checkbox") data[input.name] = input.checked;
+    else data[input.name] = input.value;
+
     this.setState({ data, errors });
   };
 
@@ -100,7 +102,7 @@ class Form extends Component {
       <CheckBox
         label={label}
         name={name}
-        value={data[name]}
+        checked={data[name]}
         onChange={onChange || this.handleChange}
         error={errors[name]}
       />

frontend/src/components/searchForm.jsx

@@ -1,69 +1,42 @@
 import React from "react";
 import Form from "./common/form";
 import Joi from "joi";
-import "./styles/searchForm.scss";
 import TagsInput from "./tagsInput";
+import "./styles/searchForm.scss";
 
 class SearchForm extends Form {
   state = {
     data: {
       man: false,
       woman: false,
-      rateFrom: 0,
-      rateTo: 0,
-      ageFrom: 0,
-      ageTo: 0,
-      lat: 0,
-      lon: 0,
+      rateFrom: "",
+      rateTo: "",
+      ageFrom: 18,
+      ageTo: 80,
+      radius: "",
+      tags: "",
     },
     errors: {},
-    tags: [
-      { id: 1, name: "Apples" },
-      { id: 2, name: "Pears" },
-    ],
-    suggestions: [
-      {
-        id: 184,
-        name: "Thailand",
-      },
-      {
-        id: 86,
-        name: "India",
-      },
-    ],
   };
 
-  reactTags = React.createRef();
-
-  onDelete(i) {
-    const tags = this.state.tags.slice(0);
-    tags.splice(i, 1);
-    this.setState({
-      ...this.state.data,
-      tags,
-    });
-  }
-
-  onAddition(tag) {
-    const tags = [].concat(this.state.tags, tag);
-    this.setState({
-      ...this.state.data,
-      tags,
-    });
-  }
-
   schema = Joi.object({
     man: Joi.boolean().required().label("Man"),
     woman: Joi.boolean().required().label("Woman"),
-    rateFrom: Joi.number().required().label("Rate From"),
-    rateTo: Joi.number().required().label("Rate To"),
-    ageFrom: Joi.number().required().label("Age From"),
-    ageTo: Joi.number().required().label("Age To"),
-    lat: Joi.number().required().label("Latitude"),
-    lon: Joi.number().required().label("Longitude"),
+    rateFrom: Joi.number().optional().empty("").label("Rate From"),
+    rateTo: Joi.number().optional().empty("").label("Rate To"),
+    ageFrom: Joi.number().min(18).required().label("Age From"),
+    ageTo: Joi.number().min(18).max(90).required().label("Age To"),
+    radius: Joi.number().optional().empty("").label("Radius"),
+    tags: Joi.string().optional().label("Tags"),
   });
 
-  doSubmit = () => {};
+  handleTags = (tags) => {
+    this.setState({ data: { ...this.state.data, tags } });
+  };
+
+  doSubmit = () => {
+    this.props.onSearchButtonClick(this.state.data);
+  };
   render() {
     return (
       <form className="SearchForm" onSubmit={this.handleSubmit}>
@@ -85,104 +58,12 @@ class SearchForm extends Form {
         </div>
         <div className="SearchForm-Tags">
           <div className="Tags-Title">Tags:</div>
-          <TagsInput isSearchForm={true} />
+          <TagsInput isSearchForm={true} onHandleTags={this.handleTags} />
+          {this.renderButton("Search")}
         </div>
       </form>
     );
   }
 }
 
 export default SearchForm;
-
-// const SearhForm = ({ userForm, onSearchButtonClick }) => {
-//   const [form, setForm] = useState(userForm);
-
-//   const handleFormChange = (e) => {
-//     const { target } = e;
-//     const newForm = { ...form };
-//     if (target.type === "checkbox") newForm[target.name] = target.checked;
-//     else newForm[target.name] = target.value;
-//     setForm(newForm);
-//   };
-
-//   const handleFormUpdate = async () => {
-//     await updateUserForm(form);
-//     onSearchButtonClick();
-//   };
-//   return (
-//     <div className="SearchForm">
-//       <div className="SearchForm-Gender">
-//         <h6>I want to find:</h6>
-//         <CheckBox
-//           name="man"
-//           checked={form.man}
-//           onChange={(e) => handleFormChange(e)}
-//           label="Man"
-//         />
-//         <CheckBox
-//           name="woman"
-//           checked={form.woman}
-//           onChange={(e) => handleFormChange(e)}
-//           label="Woman"
-//         />
-//       </div>
-//       <div className="SearchForm-Targets">
-//         <h6>For:</h6>
-//         <CheckBox
-//           name="friendship"
-//           checked={form.friendship}
-//           onChange={(e) => handleFormChange(e)}
-//           label="FriendShip"
-//         />
-//         <CheckBox
-//           name="love"
-//           checked={form.love}
-//           onChange={(e) => handleFormChange(e)}
-//           label="Love"
-//         />
-//         <CheckBox
-//           name="sex"
-//           checked={form.sex}
-//           onChange={(e) => handleFormChange(e)}
-//           label="Sex"
-//         />
-//         <CheckBox
-//           name="flirt"
-//           checked={form.flirt}
-//           onChange={(e) => handleFormChange(e)}
-//           label="Flirt"
-//         />
-//       </div>
-//       <div className="SearchForm-Options">
-//         <h6>Age:</h6>
-//         <input
-//           name="ageFrom"
-//           value={form.ageFrom}
-//           onChange={handleFormChange}
-//           type="text"
-//           placeholder="From"
-//           size="4"
-//         />{" "}
-//         <br /> <br />
-//         <input
-//           name="ageTo"
-//           value={form.ageTo}
-//           onChange={handleFormChange}
-//           type="text"
-//           placeholder="To"
-//           size="4"
-//         />{" "}
-//         <br /> <br />
-//         <button
-//           onClick={handleFormUpdate}
-//           type="button"
-//           className="btn btn-primary"
-//         >
-//           Search
-//         </button>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default SearhForm;

frontend/src/components/tagsInput.jsx

@@ -1,35 +1,43 @@
 import React, { useEffect, useRef, useState } from "react";
 import ReactTags from "react-tag-autocomplete";
 import { getCurrentUser } from "../services/authService";
-import { getTopTags } from "../services/tagsService";
+import { createTag, deleteTag, getTopTags } from "../services/tagsService";
 import { getUserTags } from "../services/userService";
 import "./styles/tagsInput.scss";
 
-const TagsInput = ({ userId, editMode, isSearchForm }) => {
+const TagsInput = ({ userId, editMode, isSearchForm, onHandleTags }) => {
   const [tags, setTags] = useState([]);
   const [suggestions, setSuggestions] = useState([]);
   const tagInput = useRef(null);
 
   useEffect(() => {
     const fetchTags = async () => {
       const { data: tags } = isSearchForm
-        ? await getUserTags(getCurrentUser().sub)
+        ? await getUserTags(getCurrentUser().id)
         : await getUserTags(userId);
       const { data: suggestions } = await getTopTags();
+      const tagsStr = tags
+        .map((tag) => {
+          return `${tag.name}`;
+        })
+        .join(",");
+      onHandleTags(tagsStr);
       setTags(tags);
       setSuggestions(suggestions);
     };
     fetchTags();
-  }, [userId, isSearchForm]);
+  }, [userId, isSearchForm, onHandleTags]);
 
-  const handleDelete = (i) => {
+  const handleDelete = async (i) => {
     const newTags = tags.slice(0);
-    newTags.splice(i, 1);
+    const tag = newTags.splice(i, 1);
+    await deleteTag(tag[0].name);
     setTags(newTags);
   };
 
-  const handleAddition = (tag) => {
+  const handleAddition = async (tag) => {
     const newTags = [].concat(tags, tag);
+    await createTag(tag.name);
     setTags(newTags);
   };
 

frontend/src/pages/searchPage.jsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
 import SearchUsers from "../components/searchUsers";
 import WithLoading from "../components/common/withLoading";
-import * as userService from "../services/userService";
-import { findSimilarityInForms } from "../utils/equal";
-import { getCurrentUser } from "../services/authService";
 import "./styles/searchPage.scss";
+import { getUserForm, saveForm } from "../services/formService";
+import { getUserRates, searchForUsers } from "../services/userService";
 
 const SearchUsersWithLoading = WithLoading(SearchUsers);
 
@@ -14,49 +13,26 @@ const SearchPage = () => {
   const [userForm, setUserForm] = useState({});
 
   useEffect(() => {
-    async function fetchUsers() {
-      const { data: users } = await userService.getUsers();
-      const { data: user } = await userService.getUser(getCurrentUser().sub);
-      const userForm = user.form;
-      const { data: likesDislikes } = await userService.getUserRates(
-        "likesDislikes",
-        true
-      );
-      const { data: blackList } = await userService.getUserBlacklist();
-      userForm.likesDislikes = likesDislikes;
-      userForm.blackList = blackList;
-      const filteredUsers = users.filter((user) => {
-        return user.avatar !== null
-          ? findSimilarityInForms(userForm, user)
-          : false;
-      });
-      setUserForm(userForm);
-      setUsers(filteredUsers);
+    const form = getUserForm();
+    async function searchUsers(form) {
+      const { data: foundedUsers } = await searchForUsers(form);
+      const { data: likesDislikes } = await getUserRates("likesDislikes", true);
+      console.log(likesDislikes);
+      setUserForm(form);
+      setUsers(foundedUsers);
       setIsLoading(false);
     }
-    fetchUsers();
+    if (form) searchUsers(form);
+    else setIsLoading(false);
   }, []);
 
-  const handleSearchButtonClick = async () => {
+  const handleSearchButtonClick = async (form) => {
+    saveForm(form);
     setIsLoading(true);
-    const { data: users } = await userService.getUsers();
-    const { data: user } = await userService.getUser(getCurrentUser().sub);
-    const userForm = user.form;
-    setUserForm(userForm);
-    const { data: likesDislikes } = await userService.getUserRates(
-      "likesDislikes",
-      true
-    );
-    const { data: blackList } = await userService.getUserBlacklist();
-    userForm.likesDislikes = likesDislikes;
-    userForm.blackList = blackList;
-    const filteredUsers = users.filter((user) => {
-      return user.avatar !== null
-        ? findSimilarityInForms(userForm, user)
-        : false;
-    });
-    setUsers(filteredUsers);
+    const { data: foundedUsers } = await searchForUsers(form);
+    setUsers(foundedUsers);
     setIsLoading(false);
+    console.log("submitted");
   };
 
   return (

frontend/src/services/formService.js

@@ -1,21 +1,14 @@
-import http from "./httpService";
-import { apiUrl } from "../config.json";
-import auth from "./authService";
-
-const apiEndpoint = apiUrl + "/forms";
+const formKey = "form";
 
 export function getUserForm() {
-  let userId = auth.getCurrentUser().id;
-  return http.get(`${apiEndpoint}/${userId}`, {
-    headers: { "x-auth-token": `T_${auth.getJwt()}` },
-  });
+  try {
+    const form = localStorage.getItem(formKey);
+    return JSON.parse(form);
+  } catch (ex) {
+    return null;
+  }
 }
 
-export function updateUserForm(userForm) {
-  const tempForm = { ...userForm };
-  delete tempForm.likesDislikes;
-  delete tempForm.blackList;
-  return http.put(`${apiEndpoint}/`, tempForm, {
-    headers: { "x-auth-token": `T_${auth.getJwt()}` },
-  });
+export function saveForm(form) {
+  localStorage.setItem(formKey, JSON.stringify(form));
 }