moved meta tags and implemented date range feature

source/public/index.html

@@ -4,8 +4,10 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%PUBLIC_URL%/icon/icon_circle.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
 		<meta name="theme-color" content="#000000" />
-		<meta name="description" content="developomp's website" />
+		<meta property="og:image" content="%PUBLIC_URL%/img/icon.png" />
+		<meta property="og:type" content="website" />
 
 		<link rel="preconnect" href="https://fonts.gstatic.com" />
 		<link

source/src/App.tsx

@@ -301,15 +301,12 @@ export default class App extends React.Component<AppProps, AppState> {
 						}}
 					>
 						<Helmet>
-							<meta property="og:type" content="website" />
-							<meta name="theme-color" content="#000000" />
-
 							<meta
 								property="og:site_name"
 								content="developomp"
 							/>
 
-							<meta property="og:title" content="developomp" />
+							<meta property="og:title" content="Home" />
 
 							<meta
 								property="og:description"
@@ -318,12 +315,7 @@ export default class App extends React.Component<AppProps, AppState> {
 
 							<meta
 								property="og:url"
-								content="https://developomp.com"
+								content={process.env.PUBLIC_URL}
-							/>
-
-							<meta
-								property="og:image"
-								content="https://developomp.com/img/icon.png"
 							/>
 						</Helmet>
 

source/src/pages/Search.tsx

@@ -44,6 +44,24 @@ const StyledSearchControlContainer = styled.div`
 	}
 `
 
+function isDateInRange(
+	dateToCompare: string,
+	from: string,
+	to: string
+): boolean {
+	if (!dateToCompare) throw Error("No date to compare")
+
+	const isFrom = !!from
+	const isTo = !!to
+
+	if (!isFrom && !isTo) return true
+	if (!isFrom && isTo) return Date.parse(dateToCompare) < Date.parse(to)
+	if (!isTo && isFrom) return Date.parse(dateToCompare) > Date.parse(from)
+
+	const compareDate = Date.parse(dateToCompare)
+	return Date.parse(from) < compareDate && compareDate < Date.parse(to)
+}
+
 // todo: find ways to get rid of wrapper component
 export default function Search() {
 	return <_Search />
@@ -70,7 +88,7 @@ function _Search() {
 
 	const [dateRange, setDateRange] = useState([
 		{
-			startDate: new Date(),
+			startDate: new Date(0),
 			endDate: null,
 			key: "selection",
 		},
@@ -84,15 +102,6 @@ function _Search() {
 		<>
 			<Helmet>
 				<title>pomp | Search</title>
-
-				<meta property="og:title" content="Search" />
-				<meta property="og:type" content="website" />
-				<meta property="og:url" content={process.env.PUBLIC_URL} />
-				<meta
-					property="og:image"
-					content={process.env.PUBLIC_URL + "/icon/icon.svg"}
-				/>
-				<meta property="og:description" content="search" />
 			</Helmet>
 
 			<StyledSearch className="card main-content">
@@ -182,6 +191,20 @@ function _Search() {
 							Search test 2
 						</button>
 						<br />
+						<button
+							onClick={() => {
+								setDateRange([
+									{
+										startDate: new Date(0),
+										endDate: null,
+										key: "selection",
+									},
+								])
+							}}
+						>
+							clear date
+						</button>
+						<br />
 						<button
 							onClick={() => {
 								try {
@@ -189,17 +212,29 @@ function _Search() {
 									for (const res of index.search(
 										searchInput
 									)) {
-										if (map.posts[res.ref]) {
+										const postData = map.posts[res.ref]
+										if (
+											// check if post data exists
+											postData &&
+											// check if date is within the range
+											isDateInRange(
+												postData.date,
+												query.from,
+												query.to
+											)
+										) {
 											_postCards.push(
 												<PostCard
 													key={res.ref}
 													postData={{
 														url: res.ref,
-														...map.posts[res.ref],
+														...postData,
 													}}
 												/>
 											)
 										}
+
+										// apply search result
 										setPostCards(_postCards)
 									}