add actionSearchGoods

HW19/index.html

@@ -39,7 +39,11 @@
         </div>
     </div>
     <header>
-        <a href="#">КУДА Я ПОПАЛ? Это типа ЛОГОТИП</a>
+        <div class="headerLeft">
+            <a href="#">КУДА Я ПОПАЛ? Это типа ЛОГОТИП</a>
+           <a id="serchLink"><input type="search" id="search" placeholder="Search"></a> 
+        </div>
+
         <div class="order-box">
             <a href="#/dashboard" id="dashboardLink">
                 <img src="dashboard.png" alt="dashboard icon">

HW19/main.js

@@ -173,6 +173,24 @@ const actionPromise = (name, promise) =>
         }
     }
 
+const actionSearchGoods = (value) =>
+    actionPromise('sort', gql(`query gf($query: String){
+                                    GoodFind(query: $query){
+                                        _id, name, description, price, images{
+                                            _id, url
+                                        }
+                                    }
+        }`, {
+        query: JSON.stringify([
+            {
+                $or: [{ title: value }, { description: value }] //регулярки пишутся в строках
+            },
+            {
+                sort: [{ title: 1 }]
+            } //сортируем по title алфавитно
+        ])
+    }))
+
 const actionRootCats = () =>
     actionPromise('rootCats', gql(`query {
             CategoryFind(query: "[{\\"parent\\":null}]"){
@@ -269,6 +287,8 @@ store.dispatch(actionGoodById())
 // store.dispatch(actionAuthLogin(token))
 // store.dispatch(actionPromise('delay2000', delay(1000)))
 
+
+
 window.onhashchange = () => {
     const [, route, _id] = location.hash.split('/')
     const routes = {
@@ -504,7 +524,6 @@ store.subscribe(() => {
             product.append(btn)
             main.append(product)
         }
-
     }
 })
 
@@ -619,10 +638,41 @@ store.subscribe(() => {
 })
 
 
+search.oninput = () => {
+    location.hash = '#/search'
+    store.dispatch(actionSearchGoods('/' + search.value + '/'))
+}
+
+store.subscribe(() => {
+    const { sort } = store.getState().promise
+    const [, route, _id] = location.hash.split('/')
+    if (sort?.payload && route === 'search') {
+        main.innerHTML = `<h4>Бро, совпадений нет</h4>`
+        for (const { _id, name, price, images } of sort.payload) {
+            main.innerHTML = ''
+            const product = document.createElement('div')
+            product.classList.add('product')
+            const btn = document.createElement('button')
+            btn.innerText = '+'
+            let urlImage = images ? images[0].url : ''
+            product.innerHTML = `<a class="product-title__link" href="#/good/${_id}">${name}</a>
+                                 <div class="product__inner">
+                                    <img src="${backURL}/${urlImage}" />
+                                    <strong> ${price} $</strong>
+                                 </div > `
+            btn.onclick = () => store.dispatch(actionAddCart({ _id, name, price, images }, 1))
+            product.append(btn)
+            main.append(product)
+        }
+    }
+})
+
 console.log(store.getState());
 store.subscribe(() => console.log(store.getState()))
 
 
+
+
 // store.dispatch(actionPromise('', delay(1000)))
 // store.dispatch(actionPromise('delay2000', delay(2000)))
 // store.dispatch(actionPromise('luke', fetch('https://swapi.dev/api/people/1/').then(res => res.json())))