From dc80a66b12bdbe7e7c6fa081098941e2fca27f78 Mon Sep 17 00:00:00 2001
From: Sherali <sherali.uz@gmail.com>
Date: Sat, 4 May 2019 01:10:07 +0500
Subject: [PATCH] feat(WordSearchForm): config logics: search place from start
 or any

---
 src/constants/latin_words.json                | 84 ++++++++---------
 src/containers/layout/MainLayout.tsx          |  2 +-
 .../layout/WordSearchFormComponent.tsx        | 90 +++++++++++++++----
 3 files changed, 115 insertions(+), 61 deletions(-)

diff --git a/src/constants/latin_words.json b/src/constants/latin_words.json
index f527ebe..8a1a78d 100644
--- a/src/constants/latin_words.json
+++ b/src/constants/latin_words.json
@@ -1758,7 +1758,7 @@
 {"name":"alliteratsiya", "info":""},
 {"name":"alio", "info":"(und.)"},
 {"name":"allod", "info":"(huq.)"},
-{"name":"a Hof", "info":"(tar.)"},
+{"name":"allof", "info":"(tar.)"},
 {"name":"allofanitlar", "info":"(geol.)"},
 {"name":"alloflik", "info":""},
 {"name":"allofon", "info":"(tlsh.)"},
@@ -2061,7 +2061,7 @@
 {"name":"amfiumalar", "info":"(zool.)"},
 {"name":"amfodelit", "info":"(geol.)"},
 {"name":"amfodontoz", "info":"(tib.)"},
-{"name":"amfogen", "info":"(-jinsla r)"},
+{"name":"amfogen", "info":"(~ jinslar)"},
 {"name":"amfolitlar", "info":"(fiz.)"},
 {"name":"amfora", "info":""},
 {"name":"amfoter", "info":""},
@@ -2133,7 +2133,7 @@
 {"name":"amlokdorlik", "info":""},
 {"name":"amlokdorxona", "info":""},
 {"name":"amma", "info":""},
-{"name":"ammabachcha va", "info":""},
+{"name":"ammabachcha", "info":""},
 {"name":"ammavachcha", "info":""},
 {"name":"ammalik", "info":""},
 {"name":"ammatollar", "info":"(kim.)"},
@@ -2662,7 +2662,7 @@
 {"name":"antablement", "info":"(arxit.)"},
 {"name":"antagonist", "info":""},
 {"name":"antagonistik", "info":""},
-{"name":"anta go n ists", "info":""},
+{"name":"antagonistlar", "info":""},
 {"name":"antagonistlik", "info":""},
 {"name":"antagonizm", "info":""},
 {"name":"antanta", "info":""},
@@ -3385,7 +3385,7 @@
 {"name":"arittirmoq", "info":""},
 {"name":"arituv", "info":""},
 {"name":"arituvchi", "info":""},
-{"name":"ariuya", "info":"(ah uyasi)"},
+{"name":"ariuya", "info":"(ari uyasi)"},
 {"name":"arixona", "info":""},
 {"name":"arixoʻriar", "info":"(zool.)"},
 {"name":"ariya", "info":""},
@@ -3627,7 +3627,7 @@
 {"name":"arttiruvchi", "info":""},
 {"name":"arus", "info":"(kelinchak)"},
 {"name":"aruz", "info":""},
-{"name":"aruzza", "info":"(tar oʻlch. b.)"},
+{"name":"aruzza", "info":"(tar., oʻlch. b.)"},
 {"name":"aruzshunos", "info":""},
 {"name":"arvoh", "info":""},
 {"name":"arvohipir", "info":"(marosim)"},
@@ -3960,7 +3960,7 @@
 {"name":"aslo-aslo", "info":""},
 {"name":"asmanit", "info":"(geol.)"},
 {"name":"asmo", "info":"(ismlar)"},
-{"name":"asno", "info":"(shu -da)"},
+{"name":"asno", "info":"(shu ~da)"},
 {"name":"asnof", "info":"(sinflar)"},
 {"name":"aso va hassa", "info":""},
 {"name":"asokash va hassakash", "info":""},
@@ -4057,7 +4057,7 @@
 {"name":"asrchilik", "info":"(oʻrtaasrchilik)"},
 {"name":"assa", "info":"(und.)"},
 {"name":"assalom", "info":""},
-{"name":"assalomalaykum va", "info":""},
+{"name":"assalomalaykum", "info":""},
 {"name":"assalomu alaykum", "info":""},
 {"name":"assambleya", "info":""},
 {"name":"assenizatorlar", "info":""},
@@ -4792,8 +4792,8 @@
 {"name":"avtol", "info":""},
 {"name":"avtolavka", "info":""},
 {"name":"avtolit", "info":"(geol.)"},
-{"name":"avtol itografiya", "info":""},
-{"name":"avtol iz", "info":"(biol.)"},
+{"name":"avtolitografiya", "info":""},
+{"name":"avtoliz", "info":"(biol.)"},
 {"name":"avtologiya", "info":"(tlsh. ad.)"},
 {"name":"avtolokallanish", "info":""},
 {"name":"avtolokallash", "info":"(fiz.)"},
@@ -5142,7 +5142,7 @@
 {"name":"ayhaylov", "info":""},
 {"name":"ayhaychi", "info":""},
 {"name":"ayhaychilik", "info":""},
-{"name":"ayil", "info":"(otning -i)"},
+{"name":"ayil", "info":"(otning ~i)"},
 {"name":"ayilish", "info":""},
 {"name":"ayilmoq", "info":""},
 {"name":"ayiq", "info":""},
@@ -5598,7 +5598,7 @@
 {"name":"ashkenazilar", "info":"(etn.)"},
 {"name":"ashkfishon", "info":"(mum. ad.)"},
 {"name":"ashkol", "info":"(shakllar)"},
-{"name":"ashl", "info":"(o lch. b.)"},
+{"name":"ashl", "info":"(oʻlch. b.)"},
 {"name":"ash-pash va hash-pash", "info":""},
 {"name":"ashqol-dashqol", "info":""},
 {"name":"ashraf", "info":""},
@@ -6595,16 +6595,16 @@
 {"name":"baravarida", "info":""},
 {"name":"baravariga", "info":""},
 {"name":"baravarlamoq va barobarlamoq", "info":""},
-{"name":"baravarlanganlik va", "info":""},
+{"name":"baravarlanganlik", "info":""},
 {"name":"barobarlanganlik", "info":""},
 {"name":"baravarlanish va barobarlanish", "info":""},
-{"name":"baravarlashish va", "info":""},
+{"name":"baravarlashish", "info":""},
 {"name":"barobarlashish", "info":""},
-{"name":"baravarlashmoq va", "info":""},
+{"name":"baravarlashmoq", "info":""},
 {"name":"barobarlashmoq", "info":""},
-{"name":"baravarlashtirish va", "info":""},
+{"name":"baravarlashtirish", "info":""},
 {"name":"barobarlashtirish", "info":""},
-{"name":"baravarlashuv va", "info":""},
+{"name":"baravarlashuv", "info":""},
 {"name":"barobarlashuv", "info":""},
 {"name":"baravarlik va barobarlik", "info":""},
 {"name":"baravj", "info":""},
@@ -6681,7 +6681,7 @@
 {"name":"bari", "info":""},
 {"name":"baribal", "info":"(zool.)"},
 {"name":"baribir", "info":""},
-{"name":"bari bogʻ", "info":""},
+{"name":"baribogʻ", "info":""},
 {"name":"barigiroskop", "info":""},
 {"name":"barik", "info":"(~ sistema)"},
 {"name":"barikalsit", "info":""},
@@ -6730,13 +6730,13 @@
 {"name":"barnolik", "info":""},
 {"name":"baroapparat", "info":""},
 {"name":"barobar va baravar", "info":""},
-{"name":"barobarlashish va", "info":""},
+{"name":"barobarlashish", "info":""},
 {"name":"baravarlashish", "info":""},
-{"name":"barobarlashmoq va", "info":""},
+{"name":"barobarlashmoq", "info":""},
 {"name":"baravarlashmoq", "info":""},
-{"name":"barobarlashtirilgan va", "info":""},
+{"name":"barobarlashtirilgan", "info":""},
 {"name":"baravarlashtirilgan", "info":""},
-{"name":"barobarlashtirmoq va", "info":""},
+{"name":"barobarlashtirmoq", "info":""},
 {"name":"baravarlashtirmoq", "info":""},
 {"name":"barobarsiz va baravarsiz", "info":""},
 {"name":"barobarsizlik va baravars", "info":""},
@@ -6917,7 +6917,7 @@
 {"name":"batsilloz", "info":""},
 {"name":"battar va badtar", "info":""},
 {"name":"battarin va badtarin", "info":""},
-{"name":"battarlashmoq va", "info":""},
+{"name":"battarlashmoq", "info":""},
 {"name":"badtarlashmoq", "info":""},
 {"name":"battarroq va badtarroq", "info":""},
 {"name":"batterflyay", "info":"(sprt.)"},
@@ -15354,9 +15354,9 @@
 {"name":"dumalamoq va yumalamoq", "info":""},
 {"name":"dumalatmoq va yumalatmoq", "info":""},
 {"name":"dumaloq va yumaloq", "info":""},
-{"name":"dumaloqlamoq va", "info":""},
+{"name":"dumaloqlamoq", "info":""},
 {"name":"yumaloqlamoq", "info":""},
-{"name":"dumaloqlanish va", "info":""},
+{"name":"dumaloqlanish", "info":""},
 {"name":"yumaloqlanish", "info":""},
 {"name":"dumaloqlik va yumaloqlik", "info":""},
 {"name":"dumalov va yumalov", "info":""},
@@ -15368,7 +15368,7 @@
 {"name":"dumbaloq va umbaloq", "info":""},
 {"name":"dumbaloqchi", "info":""},
 {"name":"dumbaloqchilik", "info":""},
-{"name":"dumbalogʻoshmoq va", "info":""},
+{"name":"dumbalogʻoshmoq", "info":""},
 {"name":"umbalagʻoshmoq", "info":""},
 {"name":"dumbul", "info":""},
 {"name":"dumbullanmoq", "info":""},
@@ -19152,7 +19152,7 @@
 {"name":"gadoliniy", "info":"(kim.)"},
 {"name":"gadopesha", "info":""},
 {"name":"gadoy va gado", "info":""},
-{"name":"gadoybachcha va", "info":""},
+{"name":"gadoybachcha", "info":""},
 {"name":"gadoyvachcha", "info":""},
 {"name":"gadoylik va gadolik", "info":""},
 {"name":"gadoytaxlit va gadotaxlit", "info":""},
@@ -47311,7 +47311,7 @@
 {"name":"podyomnik", "info":""},
 {"name":"podshipnik", "info":""},
 {"name":"podsho va podshoh", "info":""},
-{"name":"podshohlarcha va", "info":""},
+{"name":"podshohlarcha", "info":""},
 {"name":"podsholarcha", "info":""},
 {"name":"podshohona", "info":""},
 {"name":"podshohparast", "info":""},
@@ -48523,7 +48523,7 @@
 {"name":"qabarilish va qavarilish", "info":""},
 {"name":"qabarilmoq va qavarilmoq", "info":""},
 {"name":"qabarinqi va qavarinqi", "info":""},
-{"name":"qabarinqiramoq va", "info":""},
+{"name":"qabarinqiramoq", "info":""},
 {"name":"qavarinqiramoq", "info":""},
 {"name":"qabarinqirash va qavarinqirash", "info":""},
 {"name":"qabariq va qavariq", "info":""},
@@ -55382,7 +55382,7 @@
 {"name":"salohiyatsizlik", "info":""},
 {"name":"salom", "info":""},
 {"name":"salomalaykum", "info":"(bot.)"},
-{"name":"salom-alaykum va", "info":""},
+{"name":"salom-alaykum", "info":""},
 {"name":"salomu alaykum", "info":""},
 {"name":"salom-alik", "info":""},
 {"name":"salom-aliklashmoq", "info":""},
@@ -67267,13 +67267,13 @@
 {"name":"toʻyxabar", "info":""},
 {"name":"toʻyxat", "info":""},
 {"name":"toʻyxona", "info":""},
-{"name":"toʻygʻazdirmoq va", "info":""},
+{"name":"toʻygʻazdirmoq", "info":""},
 {"name":"toʻygʻizdirmoq", "info":""},
-{"name":"toʻygʻazilmoq va", "info":""},
+{"name":"toʻygʻazilmoq", "info":""},
 {"name":"toʻygʻizilmoq", "info":""},
-{"name":"toʻygʻazish va", "info":""},
+{"name":"toʻygʻazish", "info":""},
 {"name":"toʻygʻizish", "info":""},
-{"name":"toʻygʻazmoq va", "info":""},
+{"name":"toʻygʻazmoq", "info":""},
 {"name":"toʻygʻizmoq", "info":""},
 {"name":"toʻygʻizuv", "info":""},
 {"name":"toʻychi", "info":""},
@@ -80417,7 +80417,7 @@
 {"name":"shohparastlik", "info":""},
 {"name":"shohroh", "info":""},
 {"name":"shohsoqqa", "info":""},
-{"name":"shohsoqqaday va", "info":""},
+{"name":"shohsoqqaday", "info":""},
 {"name":"shohsoqqadek", "info":""},
 {"name":"shohsupa va shosupa", "info":""},
 {"name":"shohtomir", "info":""},
@@ -81075,9 +81075,9 @@
 {"name":"chakillash", "info":""},
 {"name":"chakillov", "info":""},
 {"name":"chakich va chekich", "info":""},
-{"name":"chakichlamoq va", "info":""},
+{"name":"chakichlamoq", "info":""},
 {"name":"chekichlamoq", "info":""},
-{"name":"chakichlanmoq va", "info":""},
+{"name":"chakichlanmoq", "info":""},
 {"name":"chekichlanmoq", "info":""},
 {"name":"chakichlashmoq", "info":""},
 {"name":"chakka", "info":"(bosh ~si)"},
@@ -81879,11 +81879,11 @@
 {"name":"chekish", "info":""},
 {"name":"chekishmoq", "info":""},
 {"name":"chekich va chakich", "info":""},
-{"name":"chekichlamoq va", "info":""},
+{"name":"chekichlamoq", "info":""},
 {"name":"chakichlamoq", "info":""},
-{"name":"chekichlanmoq va", "info":""},
+{"name":"chekichlanmoq", "info":""},
 {"name":"chakichlanmoq", "info":""},
-{"name":"chekichlashmoq va", "info":""},
+{"name":"chekichlashmoq", "info":""},
 {"name":"chakichlashmoq", "info":""},
 {"name":"chekka", "info":""},
 {"name":"chekkalamoq", "info":""},
@@ -83033,7 +83033,7 @@
 {"name":"chumolicha", "info":""},
 {"name":"chumchuq", "info":""},
 {"name":"chumchuqbola", "info":""},
-{"name":"chumchuqday va", "info":""},
+{"name":"chumchuqday", "info":""},
 {"name":"chumchuqdek", "info":""},
 {"name":"chumchuqkoʻz", "info":"(bot.)"},
 {"name":"chumchuqmoshak", "info":""},
@@ -83115,7 +83115,7 @@
 {"name":"chuvalmoq", "info":""},
 {"name":"chuvaltirish", "info":""},
 {"name":"chuvaltirmoq", "info":""},
-{"name":"chuvalchangday va", "info":""},
+{"name":"chuvalchangday", "info":""},
 {"name":"chuvalchangdek", "info":""},
 {"name":"chuvalchanglar", "info":"(zool.)"},
 {"name":"chuvalchangsimon", "info":""},
diff --git a/src/containers/layout/MainLayout.tsx b/src/containers/layout/MainLayout.tsx
index c34a11e..d8c9801 100644
--- a/src/containers/layout/MainLayout.tsx
+++ b/src/containers/layout/MainLayout.tsx
@@ -214,7 +214,7 @@ export default function MainLayout({children, settingsClickListener}: IProps) {
             {children}
             <Footer>
                 <ul className="footer-menu list">
-                    <li><b>© Imlo Editor - 2019 </b> </li>
+                    <li><b>© Imlo Editor - 2019</b> <span>(sinov rejimida ishlamoqda)</span></li>
                     <li><a onClick={(e: any) => setModal(true)}>Loyiha haqida</a></li>
                     <li><a onClick={(e: any) => setModal2(true)}>Foydalanilgan manbalar</a></li>
                 </ul>
diff --git a/src/containers/layout/WordSearchFormComponent.tsx b/src/containers/layout/WordSearchFormComponent.tsx
index 9115284..82cae75 100644
--- a/src/containers/layout/WordSearchFormComponent.tsx
+++ b/src/containers/layout/WordSearchFormComponent.tsx
@@ -2,12 +2,15 @@ import React, {useState} from 'react'
 import IconSearchSVG from "../../components/svg/IconSearchSVG";
 import posed from "react-pose";
 import styled from "styled-components";
-import {debounce, includes, slice} from "lodash"
+import {debounce, includes, isEmpty, slice, startsWith} from "lodash"
 import {LATIN_IMLO_ARRAY} from "../../constants/latinWords";
 
 interface IProps {
 }
 
+interface ISearchConfig {
+    searchPlace: string
+}
 const SidebarStyle = styled.div`
     .overlay-wrapper{
             position:fixed;
@@ -17,6 +20,7 @@ const SidebarStyle = styled.div`
             left:0;
             z-index:1;
             background:rgba(0,0,0,0.2);
+            
     }
     .search-sidebar{
         position:fixed;
@@ -53,22 +57,40 @@ const SidebarStyle = styled.div`
         width: 40px;
         color:#999;
     }
+    .search-sidebar footer{
+        padding:10px;
+        background:rgba(0,0,0,0.05);
+    }
+    .search-sidebar .search-config {
+        label{
+            input{
+                width:16px;
+                height:16px;
+                vertical-align:text-bottom;
+                margin-right:3px;
+            }
+            &+label{
+                margin-left:15px;
+            }
+        }
+    }
     `
 
 const SidebarBody = styled.div`
+    flex:1
     ul{
         font-size: 18px;
         li{
             cursor:pointer;
             padding: 15px 20px;
             display:flex;
-            line-height:1.4;
+            line-height:24px;
             color:#666;
             span{
                 flex:1;
             }
             &+li{
-                border-top:1px solid #fafafa;
+                border-top:1px solid rgba(0,0,0,0.1);
             }
             svg{
                 margin-right: 10px;
@@ -82,18 +104,23 @@ const SidebarBody = styled.div`
                 color:#999;
                 text-align:center;
             }
+            &.not-found-item{
+                color:#ccc;
+                justify-content:center;
+                padding-top:20px
+            }
         }
     }
 `
 
 const OverlayBox = posed.div({
-    hidden: {opacity: 0},
-    visible: {opacity: 1},
+    hidden: {opacity: 0, applyAtEnd: {display: 'none'}},
+    visible: {opacity: 1, applyAtStart: {display: 'block'}},
 });
 
 const SearchSidebar = posed.div({
-    hidden: {opacity: 0},
-    visible: {opacity: 1},
+    hidden: {opacity: 0, applyAtEnd: {display: 'none'}},
+    visible: {opacity: 1, applyAtStart: {display: 'flex'}},
     exit: {
         x: '200%'
     },
@@ -107,20 +134,29 @@ const SearchSidebar = posed.div({
 
 export default function WordSearchFormComponent({}: IProps) {
     const [visibleSearchBar, setVisibleSearchBar] = useState<boolean>(false);
+    const [searchConfig, setSearchConfig] = useState<ISearchConfig>({searchPlace: "start"});
     const [searchValue, setSearchValue] = useState<string>("");
     const [wordList, setWordList] = useState<string[]>([]);
     const searchSubmitListener = (e: any) => {
-
+        e.preventDefault();
     }
     let timer: undefined | number;
-    const inputKeyupListener = (searchValue: string) => {
+    const inputKeyupListener = (searchValue: string, searchPlace: string) => {
         setSearchValue(searchValue);
         if (timer) {
             clearTimeout(timer);
         }
         new Promise(resolve => {
                 timer = setTimeout(() =>
-                        resolve(LATIN_IMLO_ARRAY.filter((word: string) => searchValue && includes(word, searchValue))),
+                        resolve(LATIN_IMLO_ARRAY.filter((word: string) => {
+                            if (searchValue) {
+                                if (searchPlace == 'any') {
+                                    return includes(word, searchValue)
+                                } else {
+                                    return startsWith(word, searchValue)
+                                }
+                            }
+                        })),
                     100)
             }
         )
@@ -136,15 +172,19 @@ export default function WordSearchFormComponent({}: IProps) {
     }
     const debouncedKeyupListener = debounce(inputKeyupListener, 500)
 
+    const searchPlaceChangeListener = (place: string) => {
+        setSearchConfig({searchPlace: place});
+        inputKeyupListener(searchValue, place)
+    }
     return (
         <>
             <form className="word-search-box" onSubmit={searchSubmitListener}>
                 <input type="text"
                        className="word-search"
                        placeholder={"so'zni qidiring..."}
-                       onKeyUp={(e: any) => debouncedKeyupListener(e.target.value)}
+                       onKeyUp={(e: any) => debouncedKeyupListener(e.target.value, searchConfig.searchPlace)}
                 />
-                <button className="btn" type="submit">
+                <button className="btn hide" type="submit">
                     <IconSearchSVG color="white"/>
                 </button>
             </form>
@@ -157,14 +197,28 @@ export default function WordSearchFormComponent({}: IProps) {
                 <SearchSidebar className="search-sidebar" pose={visibleSearchBar ? 'visible' : 'hidden'}>
                     <SidebarBody>
                         <ul className="list">
-                            {wordList.map((word: string, index: number) =>
-                                <li key={index}>
-                                    {word}
-                                </li>)}
+                            {isEmpty(wordList) ? <li className="not-found-item">Topilmadi!</li> :
+                                wordList.map((word: string, index: number) =>
+                                    <li key={index}>
+                                        {word}
+                                    </li>)}
                         </ul>
                     </SidebarBody>
-                    <footer>
-
+                    <footer className="search-footer">
+                        <div className="search-config">
+                            <label>
+                                <input type="radio" name="place"
+                                       checked={searchConfig.searchPlace == 'start'}
+                                       onChange={e => searchPlaceChangeListener('start')}/>
+                                So'z boshidan
+                            </label>
+                            <label>
+                                <input type="radio" name="place"
+                                       checked={searchConfig.searchPlace == 'any'}
+                                       onChange={e => searchPlaceChangeListener('any')}/>
+                                Ixtiyor joydan
+                            </label>
+                        </div>
                     </footer>
                 </SearchSidebar>
             </SidebarStyle>