fixed CalendarHead.jsx,CalendarHead.styled.jsx,CalendarToolbar.jsx,Pe…

…riodPaginator/PeriodPaginator.jsx, PeriodPaginator.styled.jsx, PeriodTypeSelect.jsx,PeriodTypeSelect.styled.jsx
AleksArden · May 7, 2023 · b6ea287 · b6ea287
1 parent 523eda6
commit b6ea287
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 95 deletions.
diff --git a/src/components/CalendarHead/CalendarHead.jsx b/src/components/CalendarHead/CalendarHead.jsx
@@ -1,3 +1,6 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useMedia } from 'react-use';
+import PropTypes from 'prop-types';
 import {
   startOfISOWeek,
   format,
@@ -7,26 +10,13 @@ import {
   formatISO,
   isSameMonth,
 } from 'date-fns';
-import {
-  ListMonth,
-  DateOfWeekCurrentMonth,
-  DateOfWeekOtherMonth,
-  ChoosedDate,
-  DayWeek,
-  Days,
-  Month,
-  ListDays,
-  OtherMonthStyledLink,
-  CurrentMonthStyledLink,
-} from './CalendarHead.styled';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   addChoosedDay,
   addIndexCurrentDay,
 } from 'redux/calendar/calendar.slice';
 import { selectCurrentMonth } from 'redux/calendar/calendar.selectors';
-import PropTypes from 'prop-types';
-import { useMedia } from 'react-use';
+
+import * as STC from './CalendarHead.styled';
 
 export const CalendarHead = ({ currentDay }) => {
   const currentMonth = useSelector(selectCurrentMonth);
@@ -46,30 +36,30 @@ export const CalendarHead = ({ currentDay }) => {
       end: endOfISOWeek(new Date(), { weekStartsOn: 1 }),
     });
   }
-  const List = currentDay ? ListDays : ListMonth;
+  const List = currentDay ? STC.ListDays : STC.ListMonth;
   return (
     <>
       <List>
         {daysInWeek?.map((day, idx) => {
-          const Week = currentDay ? Days : Month;
+          const Week = currentDay ? STC.Days : STC.Month;
           const StyledLink = !isSameMonth(new Date(day), new Date(currentMonth))
-            ? OtherMonthStyledLink
-            : CurrentMonthStyledLink;
+            ? STC.OtherMonthStyledLink
+            : STC.CurrentMonthStyledLink;
 
           const DateOfWeek = isSameMonth(new Date(day), new Date(currentMonth))
-            ? DateOfWeekCurrentMonth
-            : DateOfWeekOtherMonth;
+            ? STC.DateOfWeekCurrentMonth
+            : STC.DateOfWeekOtherMonth;
 
           const DateWeek = isSameDay(new Date(currentDay), new Date(day))
-            ? ChoosedDate
+            ? STC.ChoosedDate
             : DateOfWeek;
 
           return (
             <Week key={idx}>
               {isWide ? (
-                <DayWeek>{format(day, 'EEE')}</DayWeek>
+                <STC.DayWeek>{format(day, 'EEE')}</STC.DayWeek>
               ) : (
-                <DayWeek>{format(day, 'EEEEE')}</DayWeek>
+                <STC.DayWeek>{format(day, 'EEEEE')}</STC.DayWeek>
               )}
 
               {currentDay && (

diff --git a/src/components/CalendarHead/CalendarHead.styled.jsx b/src/components/CalendarHead/CalendarHead.styled.jsx
@@ -97,7 +97,7 @@ export const ChoosedDate = styled(DateOfWeek)`
   color: var(--btn-text-color);
 `;
 export const DateOfWeekCurrentMonth = styled(DateOfWeek)`
-  transition: box-shadow var(--animation), box-shadow var(--animation);
+  transition: box-shadow var(--animation);
 
   &:hover,
   :focus {

diff --git a/src/components/CalendarToolbar/CalendarToolbar.jsx b/src/components/CalendarToolbar/CalendarToolbar.jsx
@@ -1,11 +1,12 @@
 import { useSelector } from 'react-redux';
-import { Wrapper } from './CalendarToolbar.styled';
-import { PeriodPaginator } from './PeriodPaginator/PeriodPaginator';
-import { PeriodTypeSelect } from './PeriodTypeSelect/PeriodTypeSelect';
 import {
   selectChoosedDay,
   selectIndexCurrentDay,
 } from 'redux/calendar/calendar.selectors';
+import { PeriodPaginator } from './PeriodPaginator/PeriodPaginator';
+import { PeriodTypeSelect } from './PeriodTypeSelect/PeriodTypeSelect';
+
+import { Wrapper } from './CalendarToolbar.styled';
 
 export const CalendarToolbar = () => {
   const choosedDay = useSelector(selectChoosedDay);

diff --git a/src/components/CalendarToolbar/PeriodPaginator/PeriodPaginator.jsx b/src/components/CalendarToolbar/PeriodPaginator/PeriodPaginator.jsx
@@ -1,3 +1,5 @@
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
 import {
   format,
   formatISO,
@@ -11,16 +13,6 @@ import {
   isFirstDayOfMonth,
   isLastDayOfMonth,
 } from 'date-fns';
-import {
-  MonthName,
-  Wrapper,
-  MonthWrapper,
-  ButtonLeft,
-  ButtonRight,
-  WrapperButton,
-  Icon,
-} from './PeriodPaginator.styled';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   addChoosedDay,
   addCurrentMonth,
@@ -31,8 +23,9 @@ import {
   selectCurrentMonth,
   selectIsLoading,
 } from 'redux/calendar/calendar.selectors';
+
 import Icons from '../../../images/sprite.svg';
-import PropTypes from 'prop-types';
+import * as STC from './PeriodPaginator.styled';
 
 export const PeriodPaginator = ({ currentIndex, choosedDay }) => {
   const currentMonth = parseISO(useSelector(selectCurrentMonth));
@@ -86,38 +79,40 @@ export const PeriodPaginator = ({ currentIndex, choosedDay }) => {
   };
 
   return (
-    <Wrapper index={currentIndex}>
-      <MonthWrapper>
+    <STC.Wrapper index={currentIndex}>
+      <STC.MonthWrapper>
         {currentIndex !== null ? (
-          <MonthName>{format(new Date(choosedDay), 'd MMMM yyyy')}</MonthName>
+          <STC.MonthName>
+            {format(new Date(choosedDay), 'd MMMM yyyy')}
+          </STC.MonthName>
         ) : (
-          <MonthName>{format(currentMonth, 'MMMM yyyy')}</MonthName>
+          <STC.MonthName>{format(currentMonth, 'MMMM yyyy')}</STC.MonthName>
         )}
-      </MonthWrapper>
+      </STC.MonthWrapper>
 
-      <WrapperButton>
+      <STC.WrapperButton>
         {currentIndex !== null ? (
           isFirstDayOfMonth(new Date(choosedDay)) ? (
-            <ButtonLeft disabled>
-              <Icon width="20" height="20">
+            <STC.ButtonLeft disabled>
+              <STC.Icon width="20" height="20">
                 <use href={`${Icons}#calendar-right-sf`}></use>
-              </Icon>
-            </ButtonLeft>
+              </STC.Icon>
+            </STC.ButtonLeft>
           ) : (
-            <ButtonLeft to={`day/${prevDay}`} onClick={handlePrevDay}>
-              <Icon width="20" height="20">
+            <STC.ButtonLeft to={`day/${prevDay}`} onClick={handlePrevDay}>
+              <STC.Icon width="20" height="20">
                 <use href={`${Icons}#calendar-right-sf`}></use>
-              </Icon>
-            </ButtonLeft>
+              </STC.Icon>
+            </STC.ButtonLeft>
           )
         ) : isThisMonth(new Date(currentMonth)) ? (
-          <ButtonLeft disabled>
-            <Icon width="20" height="20">
+          <STC.ButtonLeft disabled>
+            <STC.Icon width="20" height="20">
               <use href={`${Icons}#calendar-right-sf`}></use>
-            </Icon>
-          </ButtonLeft>
+            </STC.Icon>
+          </STC.ButtonLeft>
         ) : (
-          <ButtonLeft
+          <STC.ButtonLeft
             to={`month/${formatISO(
               new Date(subMonths(startOfMonth(new Date(currentMonth)), 1)),
               { representation: 'date' }
@@ -130,28 +125,28 @@ export const PeriodPaginator = ({ currentIndex, choosedDay }) => {
             }}
             disabled={isLoading}
           >
-            <Icon width="20" height="20">
+            <STC.Icon width="20" height="20">
               <use href={`${Icons}#calendar-right-sf`}></use>
-            </Icon>
-          </ButtonLeft>
+            </STC.Icon>
+          </STC.ButtonLeft>
         )}
 
         {currentIndex !== null ? (
           isLastDayOfMonth(new Date(choosedDay)) ? (
-            <ButtonRight disabled>
-              <Icon>
+            <STC.ButtonRight disabled>
+              <STC.Icon>
                 <use href={`${Icons}#calendar-left-sf`}></use>
-              </Icon>
-            </ButtonRight>
+              </STC.Icon>
+            </STC.ButtonRight>
           ) : (
-            <ButtonRight to={`day/${nextDay}`} onClick={handleNextDay}>
-              <Icon>
+            <STC.ButtonRight to={`day/${nextDay}`} onClick={handleNextDay}>
+              <STC.Icon>
                 <use href={`${Icons}#calendar-left-sf`}></use>
-              </Icon>
-            </ButtonRight>
+              </STC.Icon>
+            </STC.ButtonRight>
           )
         ) : (
-          <ButtonRight
+          <STC.ButtonRight
             to={`month/${formatISO(
               new Date(addMonths(startOfMonth(new Date(currentMonth)), 1)),
               { representation: 'date' }
@@ -164,13 +159,13 @@ export const PeriodPaginator = ({ currentIndex, choosedDay }) => {
             }}
             disabled={isLoading}
           >
-            <Icon>
+            <STC.Icon>
               <use href={`${Icons}#calendar-left-sf`}></use>
-            </Icon>
-          </ButtonRight>
+            </STC.Icon>
+          </STC.ButtonRight>
         )}
-      </WrapperButton>
-    </Wrapper>
+      </STC.WrapperButton>
+    </STC.Wrapper>
   );
 };
 PeriodPaginator.propTypes = {

diff --git a/src/components/CalendarToolbar/PeriodPaginator/PeriodPaginator.styled.jsx b/src/components/CalendarToolbar/PeriodPaginator/PeriodPaginator.styled.jsx
@@ -59,7 +59,6 @@ const StyledLink = styled(NavLink)`
   display: flex;
   justify-content: center;
   align-items: center;
-
   isolation: isolate;
 
   width: 36px;

diff --git a/src/components/CalendarToolbar/PeriodTypeSelect/PeriodTypeSelect.jsx b/src/components/CalendarToolbar/PeriodTypeSelect/PeriodTypeSelect.jsx
@@ -1,33 +1,29 @@
 import { useDispatch, useSelector } from 'react-redux';
+import { format, formatISO, isThisMonth } from 'date-fns';
 import {
-  Wrapper,
-  StyledLinkDay,
-  StyledLinkMonth,
-  LinkActiveMonth,
-  LinkActiveDay,
-} from './PeriodTypeSelect.styled';
+  addChoosedDay,
+  addIndexCurrentDay,
+} from 'redux/calendar/calendar.slice';
 import {
   selectChoosedDay,
   selectCurrentMonth,
   selectIndexCurrentDay,
 } from 'redux/calendar/calendar.selectors';
-import { format, formatISO, isThisMonth } from 'date-fns';
-import {
-  addChoosedDay,
-  addIndexCurrentDay,
-} from 'redux/calendar/calendar.slice';
+
+import * as STC from './PeriodTypeSelect.styled';
 
 export const PeriodTypeSelect = () => {
   const dispath = useDispatch();
   const currentDate = useSelector(selectCurrentMonth);
   const choosedDay = useSelector(selectChoosedDay);
   const currentIndex = useSelector(selectIndexCurrentDay);
 
-  const LinkMonth = currentIndex !== null ? StyledLinkMonth : LinkActiveMonth;
-  const LinkDay = currentIndex !== null ? LinkActiveDay : StyledLinkDay;
+  const LinkMonth =
+    currentIndex !== null ? STC.StyledLinkMonth : STC.LinkActiveMonth;
+  const LinkDay = currentIndex !== null ? STC.LinkActiveDay : STC.StyledLinkDay;
 
   return (
-    <Wrapper>
+    <STC.Wrapper>
       {isThisMonth(new Date(currentDate)) ? (
         <LinkMonth
           to={`month/${formatISO(new Date(currentDate), {
@@ -89,6 +85,6 @@ export const PeriodTypeSelect = () => {
           Day
         </LinkDay>
       )}
-    </Wrapper>
+    </STC.Wrapper>
   );
 };
diff --git a/src/components/CalendarToolbar/PeriodTypeSelect/PeriodTypeSelect.styled.jsx b/src/components/CalendarToolbar/PeriodTypeSelect/PeriodTypeSelect.styled.jsx
@@ -47,8 +47,8 @@ export const StyledLinkMonth = styled(StyledLink)`
   border: none;
   border-right: var(--border-calendar-period-type);
   border-radius: 8px 0px 0px 8px;
-  transition: background-color var(--animation), box-shadow var(--animation),
-    box-shadow var(--animation), box-shadow var(--animation);
+
+  transition: background-color var(--animation), box-shadow var(--animation);
 
   &:hover,
   :focus {
@@ -67,8 +67,7 @@ export const StyledLinkDay = styled(StyledLink)`
   border: none;
   border-radius: 0px 8px 8px 0px;
 
-  transition: background-color var(--animation), box-shadow var(--animation),
-    box-shadow var(--animation), box-shadow var(--animation);
+  transition: background-color var(--animation), box-shadow var(--animation);
 
   &:hover,
   :focus {