feat(date_manipulation): add option to filter products by dates vulne…

…rable to date manipulation (#320)

client/package.json

@@ -10,9 +10,11 @@
     "get-browser-fingerprint": "^2.0.1",
     "history": "^4.10.1",
     "react": "^17.0.2",
+    "react-datepicker": "^4.10.0",
     "react-dom": "^17.0.2",
     "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
     "web-vitals": "^0.2.4",
     "xmldom": "^0.6.0",
     "react-scripts": "4.0.3"
@@ -49,6 +51,7 @@
     "@types/history": "^4.7.8",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",
+    "@types/react-datepicker": "^6.0.3",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/xmldom": "^0.1.34",

client/src/api/httpClient.ts

@@ -11,6 +11,14 @@ import { OidcClient } from '../interfaces/Auth';
 import { ApiUrl } from './ApiUrl';
 import { makeApiRequest } from './makeApiRequest';
 
+function formatDateToYYYYMMDD(date: Date): string {
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const dd = String(date.getDate()).padStart(2, '0');
+
+  return `${dd}-${mm}-${yyyy}`;
+}
+
 export const httpClient: AxiosInstance = axios.create();
 
 export function getTestimonials(): Promise<any> {
@@ -26,9 +34,11 @@ export function getTestimonialsCount(): Promise<any> {
   });
 }
 
-export function getProducts(): Promise<Product[]> {
+export function getProducts(dateFrom: Date, dateTo: Date): Promise<Product[]> {
   return makeApiRequest({
-    url: ApiUrl.Products,
+    url: `${ApiUrl.Products}?date_from=${formatDateToYYYYMMDD(
+      dateFrom
+    )}&date_to=${formatDateToYYYYMMDD(dateTo)}`,
     method: 'get',
     headers: {
       authorization:

client/src/pages/marketplace/DatePicker.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface DateRangePickerProps {
+  onDatesChange: (dateFrom: Date, dateTo: Date) => void;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({ onDatesChange }) => {
+  const [dates, setDates] = useState<{
+    dateFrom: Date;
+    dateTo: Date;
+  }>({
+    dateFrom: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
+    dateTo: new Date()
+  });
+
+  const handleDateFromChange = (date: Date) => {
+    setDates({ dateFrom: date, dateTo: dates.dateTo });
+    onDatesChange(dates.dateFrom, dates.dateTo);
+  };
+  const handleDateToChange = (date: Date) => {
+    setDates({ dateFrom: dates.dateFrom, dateTo: date });
+    onDatesChange(dates.dateFrom, dates.dateTo);
+  };
+
+  return (
+    <div className="col-lg-12 d-flex justify-content-center">
+      <div className="input-group" style={{ width: '130px' }}>
+        <DatePicker
+          selected={dates.dateFrom}
+          onChange={handleDateFromChange}
+          selectsStart
+          dateFormat="yyyy-MM-dd"
+          className="form-control"
+          placeholderText="Date From"
+          excludeDateIntervals={[
+            { start: dates.dateTo, end: new Date('02-05-2100') }
+          ]}
+          isClearable={false}
+          closeOnScroll={true}
+        />
+      </div>
+      <p style={{ padding: '8px' }}>-</p>
+      <div className="input-group" style={{ width: '130px' }}>
+        <DatePicker
+          selected={dates.dateTo}
+          onChange={handleDateToChange}
+          selectsEnd
+          dateFormat="yyyy-MM-dd"
+          className="form-control"
+          placeholderText="Date To"
+          excludeDateIntervals={[
+            { start: new Date('02-05-1970'), end: dates.dateFrom }
+          ]}
+          isClearable={false}
+          closeOnScroll={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;

client/src/pages/marketplace/Marketplace.tsx

@@ -9,6 +9,7 @@ import {
 import Header from '../main/Header/Header';
 import Testimonials from './Testimonials/Testimonials';
 import ProductView from './ProductView';
+import DateRangePicker from './DatePicker';
 import Partners from './Partners/Partners';
 
 interface Props {
@@ -51,7 +52,10 @@ export const Marketplace: FC<Props> = (props: Props) => {
   useEffect(() => {
     props.preview
       ? getLatestProducts().then((data) => setProducts(data))
-      : getProducts().then((data) => setProducts(data));
+      : getProducts(
+          new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
+          new Date()
+        ).then((data) => setProducts(data));
   }, []);
 
   useEffect(() => {
@@ -67,6 +71,10 @@ export const Marketplace: FC<Props> = (props: Props) => {
     }
   }, []);
 
+  const handleDateChange = (dateFrom: Date, DateTo: Date) => {
+    getProducts(dateFrom, DateTo).then((data) => setProducts(data));
+  };
+
   return (
     <section>
       {props.preview || <Header onInnerPage={true} />}
@@ -78,7 +86,8 @@ export const Marketplace: FC<Props> = (props: Props) => {
           </div>
           {props.preview || (
             <div className="row">
-              <div className="col-lg-12 d-flex justify-content-center">
+              <DateRangePicker onDatesChange={handleDateChange} />
+              <div className="col-lg-12 d-flex justify-content-center pt-2">
                 <ul id="portfolio-flters">
                   <li data-filter="*" className="filter-active">
                     All

client/src/pages/marketplace/ProductView.tsx

@@ -10,6 +10,7 @@ export const ProductView: FC<Props> = (props: Props) => {
   return (
     <div
       className={`col-lg-4 col-md-6 portfolio-item filter-${props.product.category}`}
+      style={{ zIndex: 0 }}
       key={props.product.name}
     >
       <div className="portfolio-wrap">