Created boilerplate for Redux Store

components/sample-rhdevs-website/FilterFunction/FilterBar.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import dayjs from 'dayjs'
+
+const isSameOrAfter = require('dayjs/plugin/isSameOrAfter')
+const isSameOrBefore = require('dayjs/plugin/isSameOrBefore')
+
+dayjs.extend(isSameOrAfter)
+dayjs.extend(isSameOrBefore)
+
+function FilterBar({
+  ccaList,
+  onNameFilter,
+  onTypeFilter,
+  onTagFilter,
+  onCcaFilter,
+  onStartFilter,
+  onEndFilter,
+}) {
+  const [filters, setFilters] = useState({
+    name: '',
+    type: '',
+    tags: '',
+    startTime: '',
+    endTime: '',
+    cca: '',
+  })
+
+  const handleInput = (field) => (event) => {
+    const { value } = event.target
+
+    setFilters({
+      ...filters,
+      [field]: value,
+    })
+
+    switch (field) {
+      case 'name':
+        onNameFilter(value)
+        break
+      case 'type':
+        onTypeFilter(value)
+        break
+      case 'tags':
+        onTagFilter(value)
+        break
+      case 'startTime':
+        onStartFilter(value)
+        break
+      case 'endTime':
+        onEndFilter(value)
+        break
+      case 'cca':
+        onCcaFilter(value)
+        break
+    }
+  }
+
+  return (
+    <div className="row my-5">
+      <div className="col">
+        <h4 className="border-bottom">Filters</h4>
+      </div>
+
+      <div className="col-sm-12 my-2">
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          className="form-control"
+          id="name"
+          value={filters.name}
+          onChange={handleInput('name')}
+        />
+      </div>
+
+      <div className="col-sm-12 my-2">
+        <label htmlFor="type">Type</label>
+        <select className="form-control" id="type" onChange={handleInput('type')}>
+          <option value="event">Event</option>
+          <option value="fundraiser">Fundraiser</option>
+          <option value="announcement">Announcement</option>
+        </select>
+      </div>
+
+      <div className="col-sm-12 my-2">
+        <label htmlFor="tags">Tags</label>
+        <select className="form-control" id="tags" onChange={handleInput('tags')}>
+          <option value="sports">Sports</option>
+          <option value="culture">Culture</option>
+          <option value="committee">Committee</option>
+          <option value="general">General</option>
+        </select>
+      </div>
+
+      <div className="col-sm-12 my-2">
+        <label htmlFor="startTime">Start Time</label>
+        <input
+          type="date"
+          className="form-control"
+          id="startTime"
+          onChange={handleInput('startTime')}
+        />
+      </div>
+
+      <div className="col-sm-12 my-2">
+        <label htmlFor="endDate">End Time</label>
+        <input
+          type="date"
+          className="form-control"
+          id="endTime"
+          onChange={handleInput('endTime')}
+        />
+      </div>
+
+      <div className="col-sm-12 my-2">
+        <label htmlFor="cca" />
+        <select className="form-control" id="cca">
+          <option value="">Select</option>
+          {ccaList.map((cca) => (
+            <option value={cca} key={cca}>
+              {cca}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}
+
+export default FilterBar

components/sample-rhdevs-website/FilterFunction/FilterFunction.css

@@ -0,0 +1,5 @@
+.filter-area{
+    width: 100%;
+    background-color: white;
+    padding: 2px 20px;
+}

components/sample-rhdevs-website/FilterFunction/FilterFunctionID.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import '@/components/FilterFunction.css'
+
+function FilterFunction(props) {
+  function onFilterValueChanged(event) {
+    console.log(event.target.value)
+    props.filterValueSelected(event.target.value)
+  }
+
+  return (
+    <div className="filter-area">
+      <select name="NA" onChange={onFilterValueChanged}>
+        <option value="all">All</option>
+        <option value="available">Available</option>
+        <option value="unavailble">Unavailable</option>
+      </select>
+    </div>
+  )
+}
+
+export default FilterFunction

package.json

@@ -3,24 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next lint && next dev",
+    "dev": "next dev",
     "build": "next build",
     "start": "next build && npm run open-browser && next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@next/font": "13.1.6",
+    "@reduxjs/toolkit": "^1.9.3",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
     "antd": "^5.1.7",
     "axios": "^1.2.6",
+
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.0",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.2",
     "react-scroll-parallax": "^3.3.2",
     "sharp": "^0.31.3",
     "styled-components": "^5.3.6",