diff --git a/constants.js b/constants.js deleted file mode 100644 index 9038821..0000000 --- a/constants.js +++ /dev/null @@ -1,16 +0,0 @@ -// eslint-disable-next-line no-undef -const useLocalhost = process && process.env.NODE_ENV === 'development' - -const constants = { - siteUrl: !useLocalhost ? 'https://frylabs.net/' : 'http://localhost:8080/', - apiUrl: !useLocalhost - ? 'https://frylabs.net/api/' - : 'http://localhost:8080/api/', - chatUrl: !useLocalhost ? 'https://frylabs.net/' : 'http://localhost:8080/', - mobileWindowWidth: 700, - maxQuestionsToRender: 250, - imageExts: ['gif', 'png', 'jpeg', 'jpg'], - videoExts: ['mp4', 'mkv', 'webm'], -} - -export default constants diff --git a/src/components/Question.jsx b/src/components/Question.jsx index c1337f9..4ffce73 100644 --- a/src/components/Question.jsx +++ b/src/components/Question.jsx @@ -6,8 +6,11 @@ function highlightText(text, toHighlight) { } try { const re = new RegExp(toHighlight, 'gi') - const splitText = text.split(toHighlight) - console.log(splitText) + const splitText = text.split(re) + if (splitText.length === 1) { + return text + } + return ( <> {splitText[0]} diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx new file mode 100644 index 0000000..39e2143 --- /dev/null +++ b/src/components/Selector.jsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react' +import styles from './Selector.module.css' + +export default function Selector(props) { + const { activeItem, data, onSelect, getLength, getName } = props + const [searchTerm, setSearchTerm] = useState('') + + const dataToDisplay = data.filter((item) => { + return getName(item).toLowerCase().includes(searchTerm.toLowerCase()) + }) + + return ( +
+ setSearchTerm(e.target.value)} + placeholder={'Kezdj el írni a kereséshez ...'} + /> +
+ {dataToDisplay.length === 0 && ( +
+ {'Nincs találat'} +
+ )} + {dataToDisplay.map((item, i) => { + return ( +
onSelect(item)} + > + {getName(item)} + {getLength && ( + + [ {getLength(item)} ] + + )} +
+ ) + })} +
+
+ ) +} diff --git a/src/components/Selector.module.css b/src/components/Selector.module.css new file mode 100644 index 0000000..6d84a29 --- /dev/null +++ b/src/components/Selector.module.css @@ -0,0 +1,23 @@ +.questionCount { + justify-content: flex-end; + white-space: nowrap; +} + +.itemName { + word-wrap: break-word; +} + +.container { + width: 450px +} + +.container input { + border: 1px solid var(--text-color); + border-radius: 5px; + padding: 10px; +} + +.noResult { + margin: 5px; + text-align: center; +} diff --git a/src/components/SubjectSelector.jsx b/src/components/SubjectSelector.jsx index 735add3..1a9b7b5 100644 --- a/src/components/SubjectSelector.jsx +++ b/src/components/SubjectSelector.jsx @@ -1,3 +1,4 @@ +import React from 'react' import styles from './SubjectSelector.module.css' export default function SubjectSelector(props) { diff --git a/src/constants.js b/src/constants.js index b26948c..df79250 100644 --- a/src/constants.js +++ b/src/constants.js @@ -2,14 +2,15 @@ const useLocalhost = process && process.env.NODE_ENV === 'development' const constants = { - siteUrl: !useLocalhost ? 'https://frylabs.net/' : 'http://localhost:8080/', - apiUrl: !useLocalhost - ? 'https://frylabs.net/api/' - : 'http://localhost:8080/api/', - chatUrl: !useLocalhost ? 'https://frylabs.net/' : 'http://localhost:8080/', + siteUrl: useLocalhost ? 'http://localhost:8080/' : 'https://frylabs.net/', + apiUrl: useLocalhost + ? 'http://localhost:8080/api/' + : 'https://frylabs.net/api/', + chatUrl: useLocalhost ? 'http://localhost:8080/' : 'https://frylabs.net/', mobileWindowWidth: 700, maxQuestionsToRender: 250, imageExts: ['gif', 'png', 'jpeg', 'jpg'], videoExts: ['mp4', 'mkv', 'webm'], } + export default constants diff --git a/src/defaultStyles.css b/src/defaultStyles.css index f1d226f..8cdaee2 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -112,6 +112,7 @@ input:focus { } .data { + word-wrap: anywhere; font-size: 13px; color: #a1a1a1; } @@ -123,10 +124,11 @@ input:focus { font-size: 30px; } -.subjectSelector { +.subjectSelector, .selector { overflow: auto; height: auto; - max-height: 250px; + max-height: 150px; + min-height: 150px; margin: 10px; padding: 5px; padding-right: 10px; @@ -134,8 +136,8 @@ input:focus { background-color: #141414; } -.subjItem { - font-size: 18px; +.subjItem, .selectorItem { + font-size: 14px; padding: 3px; padding-top: 5px; margin-top: 4px; @@ -144,12 +146,12 @@ input:focus { justify-content: space-between; } -.activeSubjItem { +.activeSubjItem, .activeSelectorItem { background-color: var(--text-color); color: black; } -.subjItem:hover:not(.activeSubjItem) { +.subjItem:hover:not(.activeSubjItem), .selectorItem:hover:not(.activeSelectorItem) { background-color: #555; color: white; } diff --git a/src/pages/_error.jsx b/src/pages/_error.jsx index e135e8c..a167daf 100644 --- a/src/pages/_error.jsx +++ b/src/pages/_error.jsx @@ -1,3 +1,5 @@ +import React from 'react' + function Error({ statusCode }) { const render404 = () => { return ( diff --git a/src/pages/allQuestions.jsx b/src/pages/allQuestions.jsx index ab24250..562c93d 100644 --- a/src/pages/allQuestions.jsx +++ b/src/pages/allQuestions.jsx @@ -7,6 +7,7 @@ import Subject from '../components/Subject' import SubjectSelector from '../components/SubjectSelector' import ExternalLinkIcon from '../components/externalLinkIcon' import SearchBar from '../components/searchBar' +import Selector from '../components/Selector' import styles from './allQuestions.module.css' @@ -202,13 +203,16 @@ export default function AllQuestions({ router, globalState, setGlobalState }) {
- + />
)