simplified code, removed wrapper component, and tweaked clear date reset button

source/src/pages/Search.tsx

@@ -27,6 +27,13 @@ interface TagsData {
 	label: string
 }
 
+interface Query {
+	from: string
+	to: string
+	tags: string[]
+	query: string
+}
+
 const StyledSearch = styled.div`
 	text-align: center;
 `
@@ -90,6 +97,17 @@ const StyledReactTagsContainer = styled.div`
 	width: 100%;
 `
 
+const ClearDateButton = styled.button`
+	width: 100%;
+	line-height: 2.5rem;
+	border: none;
+	cursor: pointer;
+
+	background-color: tomato; /* 🍅 mmm tomato 🍅 */
+	color: white;
+	font-weight: bold;
+`
+
 const options: TagsData[] = [
 	...map.meta.tags.map((elem) => ({ value: elem, label: elem })),
 ]
@@ -130,12 +148,7 @@ function isSelectedTagsInPost(
 }
 
 // Search doesn't work on url change if component is not wrapped
-// todo: find ways to get rid of wrapper component and use class component
+export default () => {
-export default function Search() {
-	return <_Search />
-}
-
-function _Search() {
 	const inputRef = useRef<HTMLInputElement>(null)
 
 	const _history = useHistory()
@@ -144,7 +157,7 @@ function _Search() {
 	// todo: handle duplicate/missing keys
 	const _query = queryString.parse(_location.search)
 
-	const query = {
+	const query: Query = {
 		from: _query.from ? _query.from?.toString() : "",
 		to: _query.to ? _query.to?.toString() : "",
 		tags: _query.tags ? _query.tags.toString().split(",") : [],
@@ -153,7 +166,7 @@ function _Search() {
 
 	const defaultDateRange = [
 		{
-			startDate: new Date(0),
+			startDate: undefined,
 			endDate: undefined,
 			key: "selection",
 		},
@@ -228,22 +241,23 @@ function _Search() {
 		return () => clearTimeout(delayDebounceFn)
 	}, [searchInput])
 
-	return (
+	function clearDate() {
-		<>
+		_history.push({
-			<Helmet>
+			pathname: "/search",
-				<title>pomp | Search</title>
+			search: queryString.stringify({
-			</Helmet>
+				...(query.query && {
+					query: query.query,
+				}),
+				...(query.tags.length > 0 && {
+					tags: query.tags.join(","),
+				}),
+			}),
+		})
 
-			<StyledSearch className="card main-content">
+		setDateRange(defaultDateRange)
-				<h1>Search</h1>
+	}
 
-				<StyledSearchContainer>
+	function onDateRangeChange(item: OnDateRangeChangeProps) {
-					<StyledDateRange
-						editableDateInputs={true}
-						moveRangeOnFirstSelection={false}
-						retainEndDateOnFirstSelection={true}
-						ranges={dateRange}
-						onChange={(item: OnDateRangeChangeProps) => {
 		const historyToPush = {
 			...(query.query && {
 				query: query.query,
@@ -258,6 +272,7 @@ function _Search() {
 				tags: query.tags.join(","),
 			}),
 		}
+		console.log(item)
 
 		// convert Date to YYYY-MM-DD string if it exists
 		if (item.selection.startDate != null)
@@ -276,13 +291,33 @@ function _Search() {
 		})
 
 		setDateRange([item.selection])
-						}}
+	}
+
+	return (
+		<>
+			<Helmet>
+				<title>pomp | Search</title>
+			</Helmet>
+
+			<StyledSearch className="card main-content">
+				<h1>Search</h1>
+
+				<StyledSearchContainer>
+					<div>
+						<ClearDateButton onClick={clearDate}>
+							Reset range
+						</ClearDateButton>
+						<StyledDateRange
+							editableDateInputs
+							retainEndDateOnFirstSelection
+							moveRangeOnFirstSelection={false}
+							ranges={dateRange}
+							onChange={onDateRangeChange}
 						/>
+					</div>
 
 					<StyledSearchControlContainer
-						onSubmit={(event) => {
+						onSubmit={(event) => event.preventDefault()}
-							event.preventDefault()
-						}}
 					>
 						<StyledSearchBar
 							autoFocus
@@ -291,9 +326,9 @@ function _Search() {
 							value={searchInput}
 							autoComplete="off"
 							placeholder="Search"
-							onChange={(event) => {
+							onChange={(event) =>
 								setSearchInput(event.target.value)
-							}}
+							}
 							onKeyPress={(event) => {
 								event.key === "Enter" &&
 									searchInput &&
@@ -302,7 +337,30 @@ function _Search() {
 						/>
 						{postCards.length}{" "}
 						{postCards.length > 1 ? "results" : "result"}
-						<h3>Filters</h3>
+						<h3>Tags</h3>
+						<TagSelect
+							query={query}
+							selectedTags={selectedTags}
+							setSelectedOption={setSelectedOption}
+						/>
+					</StyledSearchControlContainer>
+				</StyledSearchContainer>
+			</StyledSearch>
+			{postCards}
+		</>
+	)
+}
+
+interface TagSelectProps {
+	query: Query
+	selectedTags: TagsData[] | null
+	setSelectedOption: React.Dispatch<React.SetStateAction<TagsData[] | null>>
+}
+
+const TagSelect = (props: TagSelectProps) => {
+	const _history = useHistory()
+
+	return (
 		<StyledReactTagsContainer>
 			<ThemeConsumer>
 				{(currentTheme) => (
@@ -312,15 +370,10 @@ function _Search() {
 							colors: {
 								...theme.colors,
 								neutral0: theming
-													.theme(
+									.theme(currentTheme.currentTheme, {
-														currentTheme.currentTheme,
+										light: theming.light.backgroundColor1,
-														{
+										dark: theming.dark.backgroundColor1,
-															light: theming.light
+									})
-																.backgroundColor1,
-															dark: theming.dark
-																.backgroundColor1,
-														}
-													)
 									.toString(),
 								neutral5: "hsl(0, 0%, 20%)",
 								neutral10: "hsl(0, 0%, 30%)",
@@ -340,57 +393,36 @@ function _Search() {
 							option: (styles) => ({
 								...styles,
 								backgroundColor: theming
-													.theme(
+									.theme(currentTheme.currentTheme, {
-														currentTheme.currentTheme,
+										light: theming.light.backgroundColor1,
-														{
+										dark: theming.dark.backgroundColor1,
-															light: theming.light
+									})
-																.backgroundColor1,
-															dark: theming.dark
-																.backgroundColor1,
-														}
-													)
 									.toString(),
 								color: theming
-													.theme(
+									.theme(currentTheme.currentTheme, {
-														currentTheme.currentTheme,
+										light: theming.light.color1,
-														{
+										dark: theming.dark.color1,
-															light: theming.light
+									})
-																.color1,
-															dark: theming.dark
-																.color1,
-														}
-													)
 									.toString(),
 								cursor: "pointer",
 								padding: 10,
 								":hover": {
 									backgroundColor: theming
-														.theme(
+										.theme(currentTheme.currentTheme, {
-															currentTheme.currentTheme,
+											light: theming.light
-															{
-																light: theming
-																	.light
 												.backgroundColor0,
-																dark: theming
+											dark: theming.dark.backgroundColor0,
-																	.dark
+										})
-																	.backgroundColor0,
-															}
-														)
 										.toString(),
 								},
 							}),
 							control: (styles) => ({
 								...styles,
 								backgroundColor: theming
-													.theme(
+									.theme(currentTheme.currentTheme, {
-														currentTheme.currentTheme,
+										light: theming.light.backgroundColor1,
-														{
+										dark: theming.dark.backgroundColor1,
-															light: theming.light
+									})
-																.backgroundColor1,
-															dark: theming.dark
-																.backgroundColor1,
-														}
-													)
 									.toString(),
 								border: theming.theme(
 									currentTheme.currentTheme,
@@ -403,8 +435,7 @@ function _Search() {
 							multiValue: (styles) => ({
 								...styles,
 								color: "white",
-												backgroundColor:
+								backgroundColor: theming.color.linkColor,
-													theming.color.linkColor,
 								borderRadius: "5px",
 							}),
 							multiValueLabel: (styles) => ({
@@ -417,37 +448,32 @@ function _Search() {
 								marginLeft: "0.2rem",
 								":hover": {
 									backgroundColor: "white",
-													color: theming.color
+									color: theming.color.linkColor,
-														.linkColor,
 								},
 							}),
 						}}
-										defaultValue={selectedTags}
+						defaultValue={props.selectedTags}
 						onChange={(newSelectedTags) => {
-											setSelectedOption(
+							props.setSelectedOption(
 								newSelectedTags as TagsData[]
 							)
 
 							_history.push({
 								pathname: "/search",
 								search: queryString.stringify({
-													...(query.query && {
+									...(props.query.query && {
-														query: query.query,
+										query: props.query.query,
 									}),
-													...(query.from && {
+									...(props.query.from && {
-														from: query.from,
+										from: props.query.from,
 									}),
-													...(query.to && {
+									...(props.query.to && {
-														to: query.to,
+										to: props.query.to,
 									}),
 									tags:
 										newSelectedTags
-															.map(
+											.map((elem) => elem.value)
-																(elem) =>
+											.join(",") || undefined,
-																	elem.value
-															)
-															.join(",") ||
-														undefined,
 								}),
 							})
 						}}
@@ -457,35 +483,5 @@ function _Search() {
 				)}
 			</ThemeConsumer>
 		</StyledReactTagsContainer>
-						<br />
-						date from: {query.from}
-						<br />
-						date to: {query.to}
-						<br />
-						<button
-							onClick={() => {
-								_history.push({
-									pathname: "/search",
-									search: queryString.stringify({
-										...(query.query && {
-											query: query.query,
-										}),
-										...(query.tags.length > 0 && {
-											tags: query.tags.join(","),
-										}),
-									}),
-								})
-
-								setDateRange(defaultDateRange)
-							}}
-						>
-							Clear date
-						</button>
-						<br />
-					</StyledSearchControlContainer>
-				</StyledSearchContainer>
-			</StyledSearch>
-			{postCards}
-		</>
 	)
 }