setIsMenuOpen(!isMenuOpen)}
26 | >
27 |
28 |
29 |
30 |
104 | -
35 | Menu
36 |
37 | }
38 | >
39 |
-
45 | {data ? (
46 | data.map(category => (
47 |
48 | {setIsMenuOpen(false); setIsSublistOpen(false)}}>
49 |
Error.
62 | ) : (
63 | Loading...
64 | )}
65 | 
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/components/header/SearchBar.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import TextField from '@material-ui/core/TextField'
3 | import Autocomplete from '@material-ui/lab/Autocomplete'
4 | import CircularProgress from '@material-ui/core/CircularProgress'
5 | import IconButton from '@material-ui/core/IconButton'
6 | import { useState, useEffect, useRef } from 'react'
7 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
8 | import { faSearch } from '@fortawesome/free-solid-svg-icons'
9 | import { useRouter } from 'next/router'
10 |
11 | function sleep(delay = 0) {
12 | return new Promise(resolve => {
13 | setTimeout(resolve, delay)
14 | })
15 | }
16 |
17 | export default function SearchBar() {
18 | const [ open, setOpen ] = useState(false)
19 | const [ options, setOptions ] = useState([])
20 | const loading = open && options.length === 0
21 |
22 | const router = useRouter()
23 | const [ searchValue, setSearchValue ] = useState('')
24 | const inputRef = useRef(null)
25 |
26 | useEffect(() => {
27 | if (location.pathname.includes('search')) {
28 | inputRef.current.value = searchValue
29 | } else {
30 | inputRef.current.value = ''
31 | }
32 | }, [])
33 |
34 | useEffect(() => {
35 | let active = true
36 |
37 | if (!loading) {
38 | return undefined
39 | }
40 |
41 | (async () => {
42 | const res = await fetch(`${process.env.NEXT_PUBLIC_HCMS_API_URL}/articles`)
43 | await sleep(1000)
44 | const articles = await res.json()
45 |
46 | if (active) {
47 | setOptions(Object.keys(articles).map(i => articles[i].title))
48 | }
49 | })()
50 |
51 | return () => {
52 | active = false
53 | }
54 |
55 | }, [loading])
56 |
57 | useEffect(() => {
58 | if (!open) {
59 | setOptions([])
60 | }
61 | }, [open])
62 |
63 | const search = e => {
64 | e.preventDefault()
65 | if (searchValue !== '') {
66 | router.push(`/search?searchValue=${searchValue.replace(/ +/g, ' ').trim()}`)
67 | } else { return null }
68 | }
69 |
70 | return (
71 | -
24 | {data ? (
25 | data.map(category => (
26 |
27 | setIsMenuOpen(false)}>
28 |
Error.
41 | ) : (
42 | Loading...
43 | )}
44 | ' + `+ ${amountOfMatches - 1} more match(es).` 65 | 66 | p.current.innerHTML = 67 | initialRangeBeforeMatch <= 0 && initialRangeAfterMatch >= p.current.innerHTML.length 68 | ? newText + message 69 | : initialRangeBeforeMatch > 0 && initialRangeAfterMatch < p.current.innerHTML.length 70 | ? '...' + newText + '...' + message 71 | : initialRangeBeforeMatch <= 0 72 | ? newText + '...' + message 73 | : initialRangeAfterMatch >= p.current.innerHTML.length 74 | ? '...' + newText + message 75 | : null 76 | } 77 | } else if (noMatchInArticleText) { 78 | p.current.innerHTML = 'No matches in article text' 79 | } 80 | }, [value]) 81 | 82 | return ( 83 | 84 |
86 |
106 | 94 | {title} 95 |
96 |97 | 98 | { 99 | textFromHtml 100 | .split(new RegExp(`(${value})`, "ig")) 101 | .map(i => i.match(new RegExp(`(${value})`, "ig")) ? {i} : i) 102 | } 103 | 104 |
105 |
15 |
24 |
25 | I'm learning webdev for more than 1.5 years now! I've made this website for my portfolio.
26 |
27 |
28 | I'm not really creative, so here's the Lorem Ipsum text.
29 |
30 |
31 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sit, illo laborum hic ut dolor quidem sapiente aut iusto doloribus laudantium tempore voluptatum perspiciatis suscipit. Quis assumenda odio adipisci eos.
32 | Perferendis non reprehenderit iure nulla omnis suscipit ea tempore voluptates nostrum quisquam, error pariatur, obcaecati a sed. Rem perferendis minima nulla reprehenderit error adipisci voluptates minus, reiciendis obcaecati eos! Officia!
33 | Commodi optio accusamus non nostrum dicta quisquam omnis iure reprehenderit in ut consequuntur cupiditate sunt, necessitatibus incidunt expedita, voluptatum, beatae quis quia? Temporibus nostrum, expedita porro aliquid omnis ducimus! Libero?
34 | Necessitatibus mollitia minus ipsam iure ipsum voluptatibus atque corporis aliquid beatae explicabo nostrum reiciendis, ex architecto itaque maiores quis nam minima hic cum, iste laboriosam, dolore officiis? Totam, reiciendis aspernatur.
35 | Delectus, consectetur qui. Doloremque tempore voluptates debitis tempora consequatur perferendis nihil, quod laborum earum ea deserunt corporis accusantium repellat quas unde nostrum delectus doloribus qui obcaecati voluptatum vitae ducimus sint!
36 |
58 | {!data
59 | ? skeletonArr.map(i => {
60 | return (
61 |
74 |
62 |
64 |
66 |
68 | )
69 | })
70 | : data.articles
71 | .map((val, index, array) => array[array.length - 1 - index])
72 | .map(i =>
48 |
50 |
52 |
54 | )
55 | })
56 | ) : error ? (
57 | Error.
58 | ) : (
59 | <>
60 | {
61 | articles.map(i => {
62 | return
48 |
50 |
52 |
53 | )
54 | })
55 | ) : error ? (
56 | Error
57 | ) : (
58 | filteredData
59 | )}
60 |