Merge pull request #81 from Goldenrash-lab/feature/stats-selectors

selectors styles done
Goldenrash-lab · Jan 13, 2024 · 1924ded · 1924ded
2 parents 0672c71 + 8f787d5
commit 1924ded
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 61 deletions.
diff --git a/src/components/Chart/Chart.styled.js b/src/components/Chart/Chart.styled.js
@@ -19,7 +19,7 @@ export const StyledTitle = styled.h2`
     width: 336px;
   }
 
-  @media only screen and (max-width: 767px) {
+  @media only screen and (min-width: 320px) and (max-width: 767px) {
     width: 280px;
     margin-left: 20px;
   }
@@ -35,10 +35,10 @@ export const StyledContainer = styled.div`
     margin-left: 0;
   }
 
-  @media only screen and (max-width: 767px) {
+  @media only screen and (min-width: 320px) and (max-width: 767px) {
     flex-direction: column;
     width: 280px;
-    margin-left: 20px;
+    margin-left: 0;
   }
 `;
 
@@ -54,7 +54,7 @@ export const StyledChartContainer = styled.div`
   @media only screen and (min-width: 768px) {
   }
 
-  @media only screen and (max-width: 767px) {
+  @media only screen and (min-width: 320px) and (max-width: 767px) {
     margin-bottom: 32px;
   }
 `;

diff --git a/src/components/StatisticsDashboard/StatisticsDashboard.jsx b/src/components/StatisticsDashboard/StatisticsDashboard.jsx
@@ -1,44 +1,90 @@
 import React from 'react';
-import { StyledContainer, StyledSelect } from './StatisticsDashboard.styled';
+import Select from 'react-select';
+
+import { StyledContainer } from './StatisticsDashboard.styled';
 
 export const StatisticsDashboard = ({
   selectedMonth,
   selectedYear,
   handleMonthChange,
   handleYearChange,
 }) => {
+  const monthOptions = Array.from(monthNumberMap.keys()).map(month => ({
+    value: monthNumberMap.get(month),
+    label: month,
+  }));
+
+  const yearOptions = years.map(year => ({ value: year, label: year }));
+
+  const customStyles = {
+    control: (provided, state) => ({
+      ...provided,
+      borderRadius: '8px',
+      border: `1px solid (--white-60, rgba(255, 255, 255, 0.60))`,
+      background: 'rgba(74, 86, 226, 0.10)',
+      fontFamily: 'Poppins-Regular',
+      fontSize: '16px',
+      width: '182px',
+      height: '50px',
+      paddingLeft: '10px',
+      '@media only screen and (min-width: 768px)': {
+        width: '160px',
+      },
+      '@media only screen and (max-width: 767px)': {
+        width: '280px',
+      },
+    }),
+    singleValue: (provided, state) => ({
+      ...provided,
+      color: 'white',
+    }),
+    menu: (provided, state) => ({
+      ...provided,
+      borderRadius: '8px',
+      background:
+        'var(--Small-Form-color, linear-gradient(0deg, rgba(83, 61, 186, 0.70) 0%, rgba(80, 48, 154, 0.70) 43.14%, rgba(106, 70, 165, 0.52) 73.27%, rgba(133, 93, 175, 0.13) 120.03%))',
+      boxShadow: '0px 4px 60px 0px rgba(0, 0, 0, 0.25)',
+      backdropFilter: 'blur(50px)',
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      borderRadius: '8px',
+      background: state.isSelected
+        ? 'rgba(255, 255, 255, 0.10)'
+        : 'transparent',
+      color: state.isSelected ? '#FF868D' : provided.color,
+      ':hover': {
+        background: 'rgba(255, 255, 255, 0.10)',
+        color: '#FF868D',
+      },
+    }),
+  };
   return (
     <StyledContainer>
-      <StyledSelect
+      <Select
         name="month"
         id="month"
-        value={selectedMonth}
+        value={monthOptions.find(option => option.value === selectedMonth)}
         onChange={handleMonthChange}
-      >
-        <option value="" disabled>
-          Please select a month
-        </option>
-        {Array.from(monthNumberMap.keys()).map(month => (
-          <option key={month} value={month}>
-            {month}
-          </option>
-        ))}
-      </StyledSelect>
-      <StyledSelect
+        options={monthOptions}
+        styles={customStyles}
+        isSearchable={false}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
+      ></Select>
+      <Select
         name="year"
         id="year"
-        value={selectedYear}
+        value={yearOptions.find(option => option.value === selectedYear)}
         onChange={handleYearChange}
-      >
-        <option value="" disabled>
-          Please select a year
-        </option>
-        {years.map(year => (
-          <option key={year} value={year.toString()}>
-            {year}
-          </option>
-        ))}
-      </StyledSelect>
+        options={yearOptions}
+        styles={customStyles}
+        isSearchable={false}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
+      ></Select>
     </StyledContainer>
   );
 };

diff --git a/src/components/StatisticsDashboard/StatisticsDashboard.styled.js b/src/components/StatisticsDashboard/StatisticsDashboard.styled.js
@@ -19,25 +19,3 @@ export const StyledContainer = styled.div`
     gap: 20px;
   }
 `;
-
-export const StyledSelect = styled.select`
-  display: flex;
-  align-items: center;
-  font-family: 'Poppins-Regular';
-  color: white;
-  font-size: 12px;
-  width: 182px;
-  height: 50px;
-  padding: 13px 20px;
-  border-radius: 8px;
-  border: 1px solid var(--white-60, rgba(255, 255, 255, 0.6));
-  background: rgba(74, 86, 226, 0.1);
-
-  @media only screen and (min-width: 768px) {
-    width: 160px;
-  }
-
-  @media only screen and (max-width: 767px) {
-    width: 280px;
-  }
-`;
diff --git a/src/pages/StatisticsTab.jsx b/src/pages/StatisticsTab.jsx
@@ -4,10 +4,7 @@ import {
   StyledStatsInfo,
   StyledTitle,
 } from 'components/Chart/Chart.styled';
-import {
-  StatisticsDashboard,
-  monthNumberMap,
-} from 'components/StatisticsDashboard/StatisticsDashboard';
+import { StatisticsDashboard } from 'components/StatisticsDashboard/StatisticsDashboard';
 import { StatisticsTable } from 'components/StatisticsTable/StatisticsTable';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -39,20 +36,20 @@ const StatisticsTab = () => {
   const dispatchTransactionsSummary = (month, year) => {
     dispatch(
       transactionsSummaryThunk({
-        month: monthNumberMap.get(month),
+        month: month,
         year: parseInt(year),
       })
     );
   };
 
-  const handleMonthChange = event => {
-    const newMonth = event.target.value;
+  const handleMonthChange = selectedOption => {
+    const newMonth = selectedOption.value;
     setSelectedMonth(newMonth);
     dispatchTransactionsSummary(newMonth, selectedYear);
   };
 
-  const handleYearChange = event => {
-    const newYear = event.target.value;
+  const handleYearChange = selectedOption => {
+    const newYear = selectedOption.value;
     setSelectedYear(newYear);
     dispatchTransactionsSummary(selectedMonth, newYear);
   };

diff --git a/src/store/Categories/categoriesThunk.js b/src/store/Categories/categoriesThunk.js
@@ -29,7 +29,6 @@ export const transactionsSummaryThunk = createAsyncThunk(
     } else {
       return thunkApi.rejectWithValue(`You're unauthorized`);
     }
-
     try {
       const response = await api.get('api/transactions-summary', {
         params: {