Merge pull request #1925 from EveripediaNetwork/fix-search-wikis

Restructure Search Navigation To Allow users Suggest Wiki

public/locales/en/common.json

@@ -116,6 +116,7 @@
   "Submit": "Submit",
   "details": "write your wiki suggestions here...",
   "Suggest Wiki": "Suggest Wiki",
+  "SuggestionNote": "The wiki you just searched is not available. You can send us suggestions for wikis",
   "signIn": "Sign In",
   "loginDescription": "To login to IQ.wiki, you need to sign a token that will authenticate your account for access.",
   "signToken": "Sign Token"

public/locales/ko/common.json

@@ -122,6 +122,7 @@
   "subscribeMessage": "이 위키의 변경 사항에 대한 알림을 받으려면 이 위키를 구독하세요.",
   "unsubscribeMessage": "이미 이 위키를 구독했습니다! 아래 버튼을 클릭하여 이 위키의 변경 사항에 대한 알림을 받지 않도록 설정하세요.",
   "checkingStatus": "구독 상태 확인 중...",
+  "SuggestionNote": "방금 검색하신 위키는 사용할 수 없습니다. 위키에 대한 제안을 보내실 수 있습니다.",
   "SuggestWiki": "위키 제안",
   "SuggestWikiText": "우리의 위키 데이터베이스는 암호화폐 공간에서 다양한 관심사를 수용하기 위해 성장하고 있습니다. 커버하길 원하는 주제나 분야가 있으신가요? 위키를 제안해 주세요!",
   "Submit": "제출",

public/locales/zh/common.json

@@ -117,6 +117,7 @@
   "subscribeMessage": "订阅此 wiki，以获得对此 wiki 更改的通知。",
   "unsubscribeMessage": "您已经订阅了此 wiki！点击下面的按钮停止获取对此 wiki 更改的通知。",
   "checkingStatus": "检查订阅状态...",
+  "SuggestionNote": "您刚刚搜索的维基不可用。您可以向我们发送维基建议。",
   "SuggestWiki": "建议 Wiki",
   "SuggestWikiText": "我们的 wiki 数据库正在增长，以满足加密空间中的多样化兴趣。有您希望我们涵盖的主题或领域吗？欢迎建议 wikis！",
   "Submit": "提交",

src/components/Layout/Navbar/NavSearch/index.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 import {
+  Button,
   Center,
   Flex,
   InputGroup,
@@ -11,6 +12,7 @@ import {
   useEventListener,
   Wrap,
   Avatar,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { Search2Icon } from '@chakra-ui/icons'
 import {
@@ -41,6 +43,7 @@ import {
 } from '@/utils/WikiUtils/getWikiSummary'
 import { useTranslation } from 'next-i18next'
 import { usePostHog } from 'posthog-js/react'
+import SuggestWikiModal from '../SuggestWiki'
 
 export type NavSearchProps = {
   setHamburger: React.Dispatch<React.SetStateAction<boolean>>
@@ -86,6 +89,18 @@ const NavSearch = (props: NavSearchProps) => {
 
   const inputRef = useRef<HTMLInputElement | null>(null)
 
+  const {
+    isOpen: isSuggestWikiOpen,
+    onOpen: onSuggestWikiOpen,
+    onClose: onSuggestWikiClose,
+  } = useDisclosure()
+
+  // close Autocomplete container and clear query from the search field on modal close
+  const handleSuggestWikiClose = () => {
+    setQuery('')
+    onSuggestWikiClose()
+  }
+
   useEventListener('keydown', (event) => {
     const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.userAgent)
     const hotkey = isMac ? 'metaKey' : 'ctrlKey'
@@ -104,17 +119,30 @@ const NavSearch = (props: NavSearchProps) => {
 
   const emptyState = (
     <Flex direction="column" gap="6" align="center" justify="center" py="16">
-      <chakra.span fontWeight="semibold">No search Results</chakra.span>
-      <LinkButton
+      <Text
+        maxW={'75%'}
+        textAlign="center"
+        fontWeight="medium"
+        fontSize={{ sm: '12', lg: '14' }}
+        color="gray.600"
+        _dark={{ color: 'white' }}
+      >
+        {t('SuggestionNote')}
+      </Text>
+
+      <Button
         variant="outline"
         px="10"
         w="fit-content"
         fontWeight="semibold"
         fontSize="xs"
-        href="/create-wiki"
+        onClick={() => {
+          onSuggestWikiOpen()
+          setHamburger(false)
+        }}
       >
-        Create New Wiki
-      </LinkButton>
+        {t('Suggest Wiki')}
+      </Button>
     </Flex>
   )
 
@@ -356,6 +384,11 @@ const NavSearch = (props: NavSearchProps) => {
           )}
         </AutoCompleteList>
       </AutoComplete>
+      <SuggestWikiModal
+        isOpen={isSuggestWikiOpen}
+        onClose={handleSuggestWikiClose}
+        prePopulatedSearch={query}
+      />
     </>
   )
 }

src/components/Layout/Navbar/SuggestWiki.tsx

@@ -1,4 +1,5 @@
 import { Modal } from '@/components/Elements'
+import { useState, useEffect } from 'react'
 import {
   Box,
   Button,
@@ -30,16 +31,26 @@ const sumbitButton = (
   )
 }
 
+interface SuggestWikiModalProps extends Partial<ModalProps> {
+  prePopulatedSearch?: string
+}
+
 const SuggestWikiModal = ({
   onClose = () => {},
   isOpen = true,
-}: Partial<ModalProps>) => {
+  prePopulatedSearch = '',
+}: SuggestWikiModalProps) => {
   const { t } = useTranslation('common')
-  const [input, setInput] = React.useState('')
-  const [email, setEmail] = React.useState('')
-  const [isSubmitted, setIsSubmitted] = React.useState(false)
-  const [loading, setLoading] = React.useState(false)
+  const [input, setInput] = useState(prePopulatedSearch)
+  const [email, setEmail] = useState('')
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [loading, setLoading] = useState(false)
   const [error, setError] = React.useState('')
+
+  useEffect(() => {
+    setInput(prePopulatedSearch)
+  }, [prePopulatedSearch])
+
   const handleInputChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
     const inputValue = e.target.value
     setInput(inputValue)

src/components/Settings/Notification/SearchWikiNotifications.tsx

@@ -5,12 +5,12 @@ import {
   Flex,
   InputGroup,
   Spinner,
-  chakra,
   Button,
   Text,
   useEventListener,
   useToast,
   Icon,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { Search2Icon } from '@chakra-ui/icons'
 import {
@@ -50,6 +50,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
 import { useAddress } from '@/hooks/useAddress'
 import { usePostHog } from 'posthog-js/react'
+import SuggestWikiModal from '@/components/Layout/Navbar/SuggestWiki'
 
 const ItemPaths = {
   [SEARCH_TYPES.WIKI]: '/wiki/',
@@ -138,6 +139,12 @@ const SearchWikiNotifications = () => {
   const unrenderedWikis = results.wikis.length - ARTICLES_LIMIT
   const totalUnrenderedWikis = unrenderedWikis > 0 ? unrenderedWikis : 0
 
+  const {
+    isOpen: isSuggestWikiOpen,
+    onOpen: onSuggestWikiOpen,
+    onClose: onSuggestWikiClose,
+  } = useDisclosure()
+
   useEventListener('keydown', (event) => {
     const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.userAgent)
     const hotkey = isMac ? 'metaKey' : 'ctrlKey'
@@ -156,17 +163,29 @@ const SearchWikiNotifications = () => {
 
   const emptyState = (
     <Flex direction="column" gap="6" align="center" justify="center" py="16">
-      <chakra.span fontWeight="semibold">No search Results</chakra.span>
-      <LinkButton
+      <Text
+        maxW={{ sm: '70%', lg: '50%' }}
+        textAlign="center"
+        fontWeight="medium"
+        fontSize={{ sm: '12', lg: '14' }}
+        color="gray.600"
+        _dark={{ color: 'white' }}
+      >
+        {t('SuggestionNote')}
+      </Text>
+
+      <Button
         variant="outline"
         px="10"
         w="fit-content"
         fontWeight="semibold"
         fontSize="xs"
-        href="/create-wiki"
+        onClick={() => {
+          onSuggestWikiOpen()
+        }}
       >
-        Create New Wiki
-      </LinkButton>
+        {t('Suggest Wiki')}
+      </Button>
     </Flex>
   )
 
@@ -337,6 +356,10 @@ const SearchWikiNotifications = () => {
           </InputGroup>
         </form>
       </AutoComplete>
+      <SuggestWikiModal
+        isOpen={isSuggestWikiOpen}
+        onClose={onSuggestWikiClose}
+      />
     </Flex>
   )
 }