Add search with autocomplete #27

AtkishkinVlad · 2022-10-15T15:33:13Z

Add mock-server json-server
Add SearchInput

sashachabin · 2022-10-16T21:30:46Z

package.json

 	},
 	"devDependencies": {
 		"@next/eslint-plugin-next": "^12.1.6",
 		"eslint": "^8.2.0",
+        "json-server": "0.17.0",


Let's fix the formatting in this file

sashachabin · 2022-10-16T21:32:27Z

Please write the Issues and PR's in English. At first it will seem unusual, but English is the language of professional community.
Please add to PR description the Issue id #25 referenced by this task — Add search with autocomplete #25

sashachabin · 2022-10-16T21:34:22Z

package.json

+		"bootstrap": "5.1.3",
+		"classnames": "2.3.1",
 		"lodash": "4.17.21",
 		"next": "12.1",
 		"normalize.css": "8.0.1",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
-		"react-responsive": "^9.0.0-beta.10",
-		"sass": "^1.52.3",
+		"react-responsive": "9.0.0-beta.10",
+		"react-select": "^5.5.0",
+		"sass": "1.52.3",
 		"superagent": "7.1.1",
-		"typograf": "^6.14.1"
+		"typograf": "6.14.1"


Why ^ symbols has been removed from this PR?

sashachabin · 2022-10-16T21:45:48Z

Please fix build step in deploy. Have you checked the linter?

sashachabin · 2022-10-16T21:49:29Z

components/Search/Search.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Select from "react-select/base";


It seems that react-select is redundant for this task. It's main feature is multiselect.

a lot of unnecessary unused logic

there is no modularity with 28 kb
(https://bundlephobia.com/package/[email protected])

The logic in our component is very different from react-search

For example, we have item groups with headings

AtkishkinVlad · 2022-10-19T19:36:29Z

components/Search/SuggestionItem/SuggestionItem.jsx

+export const SuggestionItem = ({ suggestion }) => (
+  <div>
+    <h4>
+      {suggestion.guide_name} / {suggestion.guide_section}


I suggest adding the guide_name of the manual to the search

Cause: sections can be duplicated in different manuals

sashachabin · 2022-10-22T14:13:30Z

components/Search/SearchInput/SearchInput.jsx

+export const SearchInput = ({ isVisible }) => {
+  const [suggestions, setSuggestions] = React.useState([]);
+  const styleInputBlock = classNames(style.searchInput__container, {
+    [style.hidden]: !isVisible


Let's make the hidden={!isVisible} attribute. It will be great for accessibility

sashachabin · 2022-10-22T14:24:46Z

mock/search-data.mock.json

+  "1": {
+    "items": [


NOTE
It will have to return only an array. Key for simulating a user request

sashachabin · 2022-10-22T14:30:45Z

We have to ask the backend to limit the number of search results returned.
No more than 20 results.

If backend return 20 results — write Показаны первые 20 результатов поиска at the bottom of the control.

sashachabin · 2022-10-22T14:33:34Z

TODO back-end

We won't do it yet

Create cover image
Generate with thumbnail 64x64
Return cover image as cover_preview field

sashachabin · 2022-10-22T15:01:59Z

components/Search/SearchSuggestionBlock/SearchSuggestionBlock.jsx

+import React from "react";
+import { SuggestionItem } from "../SuggestionItem/SuggestionItem";
+
+export const SearchSuggestionBlock = ({ suggestions }) => {


SearchSuggestionBlock -> SearchSuggestion

sashachabin · 2022-10-22T15:03:06Z

components/Search/SuggestionItem/SuggestionItem.jsx

+import React from "react";
+import Link from "next/link";
+
+export const SuggestionItem = ({ suggestion }) => (


SuggestionItem -> SearchSuggestionItem

sashachabin · 2022-10-22T15:05:16Z

components/ManualPage/ManualPage.jsx

@@ -20,6 +22,8 @@ function ManualPage({
    catalogIndex,
    children,
 }) {
+    const [showSearchInput, setShowSearchInput] = React.useState(false);
+
    const getLine = (columnList) => {
        if (!columnList.children.length) {


columnList.children.length > 0

sashachabin · 2022-10-22T15:13:09Z

package.json

@@ -8,32 +8,37 @@
 		"lint:fix": "eslint --fix --ext .js,.jsx .",
 		"prettier": "npx prettier --write .",
 		"prepare": "husky install",
+		"json-server": "json-server ./mock/search-data.mock.json --port 8088",


Add to dev: "next dev & npm run json-server"

… button

sashachabin · 2022-12-03T18:06:11Z

components/Search/SearchInput/SearchInput.module.css

+    left: calc(max(384px, 20%) + 15vw);
+    opacity: 0;
+    bottom: 0;
+    transition: all .4s ease-in-out;


so slow)

animations more than 100-150ms seems very slow

sashachabin · 2022-12-03T18:06:43Z

components/Search/SearchInput/SearchInput.module.css

+    border: 6px solid #EEEFF1;
+    border-top: 6px solid #EEEFF1;


border-top duplicates border

sashachabin · 2022-12-03T18:08:11Z

components/Search/SearchSuggestion/SearchSuggestion.jsx

+import styles from './SearchSuggestion.module.css'
+
+export function SearchSuggestion({ suggestions }) {
+    if (suggestions.length === 0) {


Let's make the components less smart.

Let the parent component check whether the child component should be render.

sashachabin · 2022-12-03T18:11:57Z

components/Search/SearchInput/SearchInput.jsx

+                ref={(input) => input?.focus()}
+                className={style.input}
+                onChange={debounce(async (e) => {
+                    const textInput = e.target.value


Move this callback to separate function

sashachabin · 2023-01-22T17:01:19Z

Done in #47

sashachabin reviewed Oct 16, 2022

View reviewed changes

sashachabin changed the title ~~Поиск по руководствам~~ Add a mock server to manuals search Oct 16, 2022

sashachabin changed the title ~~Add a mock server to manuals search~~ Add a mock server for manuals search Oct 16, 2022

AtkishkinVlad commented Oct 19, 2022

View reviewed changes

AtkishkinVlad changed the title ~~Add a mock server for manuals search~~ SearchInput Oct 22, 2022

AtkishkinVlad changed the title ~~SearchInput~~ Add search with autocomplete Oct 22, 2022

sashachabin reviewed Oct 22, 2022

View reviewed changes

ekbdev assigned AngyBlacwood Nov 30, 2022

AtkishkinVlad and others added 7 commits December 3, 2022 22:16

base template for search with suggestion react-select

e554d1d

pre-alpha version search with autosuggestion

048b72f

fix package.json npm run dev command

8d7b7c5

search-with-suggest: add base style

f15e106

added search input style and autofocus on input after click on search…

1a103f0

… button

search-with-suggest

9d27ff0

search-with-suggest: add open / close animation

30631b2

AtkishkinVlad force-pushed the search-with-suggest branch from 872e008 to 30631b2 Compare December 3, 2022 17:54

sashachabin reviewed Dec 3, 2022

View reviewed changes

sashachabin closed this Jan 22, 2023

sashachabin deleted the search-with-suggest branch December 2, 2023 07:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add search with autocomplete #27

Add search with autocomplete #27

AtkishkinVlad commented Oct 15, 2022 •

edited

Loading

sashachabin Oct 16, 2022

sashachabin commented Oct 16, 2022 •

edited

Loading

sashachabin Oct 16, 2022 •

edited

Loading

sashachabin commented Oct 16, 2022 •

edited

Loading

sashachabin Oct 16, 2022 •

edited

Loading

sashachabin Oct 16, 2022 •

edited

Loading

AtkishkinVlad Oct 19, 2022 •

edited

Loading

sashachabin Oct 22, 2022

sashachabin Oct 22, 2022

sashachabin commented Oct 22, 2022

sashachabin commented Oct 22, 2022 •

edited

Loading

sashachabin Oct 22, 2022

sashachabin Oct 22, 2022

sashachabin Oct 22, 2022

sashachabin Oct 22, 2022

sashachabin Dec 3, 2022

sashachabin Dec 3, 2022

sashachabin Dec 3, 2022

sashachabin Dec 3, 2022

sashachabin commented Jan 22, 2023

		@@ -0,0 +1,27 @@
		import React from "react";
		import Select from "react-select/base";

Add search with autocomplete #27

Add search with autocomplete #27

Conversation

AtkishkinVlad commented Oct 15, 2022 • edited Loading

Choose a reason for hiding this comment

sashachabin commented Oct 16, 2022 • edited Loading

sashachabin Oct 16, 2022 • edited Loading

Choose a reason for hiding this comment

sashachabin commented Oct 16, 2022 • edited Loading

sashachabin Oct 16, 2022 • edited Loading

Choose a reason for hiding this comment

sashachabin Oct 16, 2022 • edited Loading

Choose a reason for hiding this comment

AtkishkinVlad Oct 19, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sashachabin commented Oct 22, 2022

sashachabin commented Oct 22, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sashachabin commented Jan 22, 2023

AtkishkinVlad commented Oct 15, 2022 •

edited

Loading

sashachabin commented Oct 16, 2022 •

edited

Loading

sashachabin Oct 16, 2022 •

edited

Loading

sashachabin commented Oct 16, 2022 •

edited

Loading

sashachabin Oct 16, 2022 •

edited

Loading

sashachabin Oct 16, 2022 •

edited

Loading

AtkishkinVlad Oct 19, 2022 •

edited

Loading

sashachabin commented Oct 22, 2022 •

edited

Loading