From 117a370777579d7ed24d1e012f6fb82f5cd2dbe6 Mon Sep 17 00:00:00 2001 From: Papershine Date: Mon, 2 Oct 2023 22:45:18 -0700 Subject: [PATCH] add search bar to research --- package-lock.json | 11 ++ package.json | 1 + src/components/Research/Research.js | 192 +++++++++----------- src/components/Research/Research.module.css | 104 +---------- 4 files changed, 112 insertions(+), 196 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d3f6e3..ad99218 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "node": "^19.8.1", "npm": "^9.6.5", "pngquant-bin": "^8.0.1", + "primeicons": "^6.0.1", "primereact": "^9.3.1", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -19542,6 +19543,11 @@ "renderkid": "^2.0.4" } }, + "node_modules/primeicons": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz", + "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" + }, "node_modules/primereact": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/primereact/-/primereact-9.3.1.tgz", @@ -38002,6 +38008,11 @@ "renderkid": "^2.0.4" } }, + "primeicons": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz", + "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" + }, "primereact": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/primereact/-/primereact-9.3.1.tgz", diff --git a/package.json b/package.json index d256c09..f483263 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "npm": "^9.6.5", "pngquant-bin": "^8.0.1", "primereact": "^9.3.1", + "primeicons": "^6.0.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/components/Research/Research.js b/src/components/Research/Research.js index c6eda9a..daab1df 100644 --- a/src/components/Research/Research.js +++ b/src/components/Research/Research.js @@ -2,28 +2,26 @@ import React, { useState, useEffect } from "react" import { container, reportTypeButtons, - activeYearDropdown, - inactiveYearDropdown, - activeReportButton, - inactiveReportButton, - activeDropdown, - inactiveDropdown, - activeDropdownLabel, - inactiveDropdownLabel, + yearDropdown, + dropdown, separation, noReport, + searchBar } from "./Research.module.css" import ResearchComponent from "./ResearchComponent" import { useStaticQuery, graphql } from "gatsby" import { Dropdown } from "primereact/dropdown" +import { InputText } from "primereact/inputtext" import "primereact/resources/themes/bootstrap4-light-blue/theme.css" import "primereact/resources/primereact.min.css" +import "primeicons/primeicons.css" const CURRENT_YEAR = 2023 const EQUITY_START_YEAR = 2014 const INDUSTRY_START_YEAR = 2021 const REPORT_TYPES = { + all: "All Research", equity: "Equity Research", industry: "Industry Research", } @@ -51,41 +49,30 @@ function Research() { } `) - const [year, setYear] = useState(CURRENT_YEAR) + const [year, setYear] = useState(-1) const [years, setYears] = useState(null) - const [reportType, setReportType] = useState(REPORT_TYPES.equity) - const [industryGroup, setIndustryGroup] = useState(null) + const [researchType, setResearchType] = useState(REPORT_TYPES.all) + const [search, setSearch] = useState(null) const research = data.allMarkdownRemark.nodes - const industryGroupOptions = [ - { label: "All Groups", value: "All" }, - { label: "Consumer Retail", value: "Consumer Retail" }, - { label: "Natural Resources", value: "Natural Resources" }, - { - label: "Real Estate, Gaming, and Lodging", - value: "Real Estate, Gaming, and Lodging", - }, - { - label: "Technology, Media, and Telecommunications", - value: "Technology, Media, and Telecommunications", - }, + const researchOptions = [ + { label: "All Research", value: REPORT_TYPES.all }, + { label: "Equity Research", value: REPORT_TYPES.equity }, + { label: "Industry Research", value: REPORT_TYPES.industry }, ] useEffect(() => { const years = [] + years.push({ label: "All Years", value: -1 }) let startYear = EQUITY_START_YEAR - if (reportType === REPORT_TYPES.industry) startYear = INDUSTRY_START_YEAR - for (var i = CURRENT_YEAR; i >= startYear; i--) { years.push({ label: i, value: i }) } - setYears(years) - }, [reportType]) + }, []) - const handleIndustryGroupSelect = event => { + const handleResearchSelect = event => { event.preventDefault() - setReportType(REPORT_TYPES.industry) - setIndustryGroup(event.target.value) + setResearchType(event.target.value) } function handleYearSelect(event) { @@ -93,10 +80,9 @@ function Research() { setYear(event.target.value) } - function handleTypeButtonClick(event) { + function handleSearch(event) { event.preventDefault() - setReportType(event.target.value) - setIndustryGroup(null) + setSearch(event.target.value) } return ( @@ -105,96 +91,89 @@ function Research() {
- -
- - - {research - .filter( - paper => - new Date(paper.frontmatter.date).getFullYear() === Number(year), - ) - .filter( - isResearch => - isResearch.frontmatter.isIndustryResearch === "true", - ).length > 0 ? ( -
- - - - -
- ) : null} +
+ + + +
+
+ + + +
) } -function FilteredReports({ research, year, reportType, industryGroup }) { - const isIndustryResearch = reportType === REPORT_TYPES.industry - const allResearchForYear = research.filter( - paper => new Date(paper.frontmatter.date).getFullYear() === year, - ) - const filteredResearch = allResearchForYear.filter(isResearch => { - if (isIndustryResearch) { - if (industryGroup && industryGroup !== "All") { - return ( - isResearch.frontmatter.isIndustryResearch === "true" && - isResearch.frontmatter.industryGroup === industryGroup - ) - } else { - return isResearch.frontmatter.isIndustryResearch === "true" - } +function FilteredReports({ research, year, researchType, search }) { + const filteredByYear = research.filter(paper => { + if (year === -1) { + return true + } + return new Date(paper.frontmatter.date).getFullYear() === year + }) + const filteredByType = filteredByYear.filter(isResearch => { + if (researchType === REPORT_TYPES.all) { + return true + } + if (researchType === REPORT_TYPES.industry) { + return isResearch.frontmatter.isIndustryResearch === "true" } - return isResearch.frontmatter.isIndustryResearch !== "true" }) + const filteredResearch = filteredByType.filter(res => { + if (!search) { + return true + } + if (res.frontmatter.title.toLowerCase().includes(search.toLowerCase())) { + return true + } + if (res.frontmatter.company.toLowerCase().includes(search.toLowerCase())) { + return true + } + if (res.frontmatter.author.toLowerCase().includes(search.toLowerCase())) { + return true + } + if (res.frontmatter.summary.toLowerCase().includes(search.toLowerCase())) { + return true + } + return false + }) return (
@@ -212,7 +191,16 @@ function FilteredReports({ research, year, reportType, industryGroup }) { ) }) ) : ( -

No data found for the year {year}.

+
+ +

+

No results found

+

Sorry, no reports matched the applied filters.

+

Please modify your search criteria.

+
)}
) diff --git a/src/components/Research/Research.module.css b/src/components/Research/Research.module.css index 671fc3f..55ff57a 100644 --- a/src/components/Research/Research.module.css +++ b/src/components/Research/Research.module.css @@ -1,6 +1,7 @@ .container { margin: 0 auto; - width: 90%; + width: 80%; + max-width: 1600px; padding: 1rem; } @@ -54,8 +55,6 @@ .noReport { text-align: center; padding-top: 50px; - font-size: 3rem; - text-decoration: wavy; } .reportTypeButtons { @@ -65,11 +64,12 @@ flex-wrap: wrap; justify-content: center; align-items: center; + gap: 1rem; } -.inactiveYearDropdown { +.yearDropdown { height: 45px; - width: 102px; + width: 140px; text-align: center; background-color: #eeeeee !important; border: none !important; @@ -77,24 +77,7 @@ align-items: center; } -.activeYearDropdown { - height: 45px; - width: 102px; - text-align: center; - color: white !important; - background-color: #0a233d !important; - border: none !important; - box-shadow: none !important; - align-items: center; -} - -.activeYearDropdown span { - color: white; - padding-left: 20px; - padding-right: 5px; -} - -.inactiveDropdown { +.dropdown { height: 45px; width: 200px; text-align: center; @@ -104,69 +87,9 @@ align-items: center; } -.activeDropdown { - height: 45px; - width: 200px; - text-align: center; - color: white !important; - background-color: #0a233d !important; - border: none !important; - box-shadow: none !important; - align-items: center; -} - -.activeDropdown span { - color: white; - padding-left: 20px; - padding-right: 5px; -} - -.inactiveDropdownLabel { - padding-left: 8px; - color: black !important; -} - -.activeDropdownLabel { - padding-left: 0; - left: 0.25rem !important; -} - -.inactiveReportButton { - border-radius: 4px; - margin: 10px 10px; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 15px; - padding-right: 15px; - width: 175px; - height: 45px; - border: none; - cursor: pointer; - outline: none; - - background-color: #eeeeee; - color: black; -} - -.inactiveReportButton:hover { - background-color: #d8d8d8; -} - -.activeReportButton { - border-radius: 4px; - margin: 10px 10px; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 15px; - padding-right: 15px; - border: none; - cursor: pointer; - outline: none; - color: white; - background-color: #0a233d; - - width: 175px; +.searchBar { height: 45px; + width: 357px; } .reportPost { @@ -228,6 +151,7 @@ @media screen and (max-width: 1068px) { .reportPost { + width: 95%; max-width: 100%; margin: 0 auto; margin-bottom: 1rem; @@ -241,12 +165,6 @@ } } -@media screen and (max-width: 868px) { - .reportPost { - max-width: 100%; - } -} - @media screen and (max-width: 768px) { .reportPost { padding: 0; @@ -255,11 +173,9 @@ .reportTitle { margin-bottom: 1rem; } -} -@media screen and (max-width: 500px) { .reportTypeButtons { - margin-bottom: 1rem; + margin-bottom: 2rem; } .reportTypeButtons button {