From 946ebef018b94dcb2496d8eac65b3fc721d268b7 Mon Sep 17 00:00:00 2001 From: Anastasia Sergeeva Date: Thu, 27 Jul 2023 15:52:18 +0300 Subject: [PATCH 1/2] styles: change hover and active styles form mood buttons --- public/confused-hover.svg | 10 ++ public/expressionless-hover.svg | 10 ++ public/simple-smile-hover.svg | 10 ++ public/slightly-smile-hover.svg | 10 ++ public/worried-hover.svg | 10 ++ src/assets/index.tsx | 140 ------------------ src/components/MoodGraph/MoodGraph.tsx | 23 ++- .../MoodButton/MoodButton.module.css | 45 ------ .../MoodButton/MoodButton.module.scss | 71 +++++++++ .../main/components/MoodButton/MoodButton.tsx | 34 +++-- 10 files changed, 152 insertions(+), 211 deletions(-) create mode 100644 public/confused-hover.svg create mode 100644 public/expressionless-hover.svg create mode 100644 public/simple-smile-hover.svg create mode 100644 public/slightly-smile-hover.svg create mode 100644 public/worried-hover.svg delete mode 100644 src/pages/main/components/MoodButton/MoodButton.module.css create mode 100644 src/pages/main/components/MoodButton/MoodButton.module.scss diff --git a/public/confused-hover.svg b/public/confused-hover.svg new file mode 100644 index 0000000..f5e3b92 --- /dev/null +++ b/public/confused-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/expressionless-hover.svg b/public/expressionless-hover.svg new file mode 100644 index 0000000..7abc6fd --- /dev/null +++ b/public/expressionless-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/simple-smile-hover.svg b/public/simple-smile-hover.svg new file mode 100644 index 0000000..ce4c7d1 --- /dev/null +++ b/public/simple-smile-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/slightly-smile-hover.svg b/public/slightly-smile-hover.svg new file mode 100644 index 0000000..e01bd91 --- /dev/null +++ b/public/slightly-smile-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/worried-hover.svg b/public/worried-hover.svg new file mode 100644 index 0000000..cb96cf5 --- /dev/null +++ b/public/worried-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/index.tsx b/src/assets/index.tsx index 3af2c56..c5251c7 100644 --- a/src/assets/index.tsx +++ b/src/assets/index.tsx @@ -127,141 +127,6 @@ const sortIcon = ( ); -const simpleSmileIcon = ( - - - - - - - - - - -); - -const slightlySmileIcon = ( - - - - - - - - - - -); - -const expressionlessIcon = ( - - - - - - - - - - -); - -const confusedIcon = ( - - - - - - - - - - -); - -const worriedIcon = ( - - - - - - - - - - -); - const closeBtn = @@ -296,11 +161,6 @@ export { questionIcon, myTeamIcon, sortIcon, - simpleSmileIcon, - slightlySmileIcon, - expressionlessIcon, - confusedIcon, - worriedIcon, closeBtn, greenIcon, orangeIcon, diff --git a/src/components/MoodGraph/MoodGraph.tsx b/src/components/MoodGraph/MoodGraph.tsx index 8f81483..6efae59 100644 --- a/src/components/MoodGraph/MoodGraph.tsx +++ b/src/components/MoodGraph/MoodGraph.tsx @@ -3,14 +3,11 @@ import { useState, useEffect } from "react"; import { selectConditions, selectButtonConditions } from "@/store/reducers/conditionsBurnout/conditionsBurnoutReducer.ts"; import { useAppSelector } from "@/store/hooks.ts"; import { arrowLeft, arrowRight } from "@/assets"; - -import { - simpleSmileIcon, - slightlySmileIcon, - expressionlessIcon, - confusedIcon, - worriedIcon, -} from "@/assets"; +import confusedIcon from '../../../public/confused.svg'; +import simpleSmileIcon from '../../../public/simple-smile.svg'; +import slightlySmileIcon from '../../../public/slightly-smile.svg'; +import expressionlessIcon from '../../../public/expressionless.svg'; +import worriedIcon from '../../../public/worried.svg'; import styles from "./MoodGraph.module.css"; import {UserConditionRecieved} from "@/types.ts"; @@ -147,11 +144,11 @@ export const MoodGraph = ({conditionsData}: Props) => {
-
{simpleSmileIcon}
-
{slightlySmileIcon}
-
{expressionlessIcon}
-
{confusedIcon}
-
{worriedIcon}
+ смайлик отличного настроения + смайлик хорошего настроения + смайлик нормального настроения + смайлик так себе настроения + смайлик плохого настроения
= ({ mood }) => { - const dispatch = useAppDispatch(); const buttonCondition = useAppSelector(selectButtonConditions); + const [isHovered, setIsHovered] = useState(false); + let caption: string; let imgUrl: string; + let imgUrlHovered: string; let colorClass: string; let condition: number; switch (mood) { case "bad": caption = "Плохо"; - imgUrl = "/worried.svg"; colorClass = styles.moodButtonRed; + imgUrl = '/worried.svg'; + imgUrlHovered = '/worried-hover.svg'; condition = 1; break; case "so-so": caption = "Так себе"; imgUrl = "/confused.svg"; + imgUrlHovered = '/confused-hover.svg'; colorClass = styles.moodButtonOrange; condition = 2; break; case "normal": caption = "В норме"; imgUrl = "/expressionless.svg"; + imgUrlHovered = '/expressionless-hover.svg'; colorClass = styles.moodButtonYellow; condition = 3; break; case "good": caption = "Хорошо"; imgUrl = "/slightly-smile.svg"; + imgUrlHovered = '/slightly-smile-hover.svg'; colorClass = styles.moodButtonGreen; condition = 4; break; case "perfect": caption = "Отлично"; imgUrl = "/simple-smile.svg"; + imgUrlHovered = '/simple-smile-hover.svg'; colorClass = styles.moodButtonSupergreen; condition = 5; break; - - // default: - // caption = "Отлично"; - // imgUrl = "/simple-smile.svg"; - // colorClass = styles.moodButtonSupergreen; - // condition = 5; } - function handleSendMood(e: React.MouseEvent) { if (buttonCondition) { dispatch(setErrorMessage('Можно голосовать только один раз в день')) @@ -78,9 +79,16 @@ export const MoodButton: React.FC = ({ mood }) => { } return ( - ); }; + From 0cb1d572bea41930e97baa0b3a56bf3cd1a4a523 Mon Sep 17 00:00:00 2001 From: Anastasia Sergeeva Date: Thu, 27 Jul 2023 16:57:28 +0300 Subject: [PATCH 2/2] fix: make mood buttons invisible when impossible to use it --- src/pages/main/Main.helpers.ts | 6 ++++ src/pages/main/Main.tsx | 25 ++++++++++------- .../main/components/MoodButton/MoodButton.tsx | 15 ++++------ .../MoodButtonsSection.module.scss | 15 ++++++++++ .../MoodButtonsSection/MoodButtonsSection.tsx | 28 +++++++++++++++++++ .../components/PeriodPicker.module.scss | 4 +-- src/pages/main/main.module.scss | 14 ---------- 7 files changed, 71 insertions(+), 36 deletions(-) create mode 100644 src/pages/main/Main.helpers.ts create mode 100644 src/pages/main/components/MoodButtonsSection/MoodButtonsSection.module.scss create mode 100644 src/pages/main/components/MoodButtonsSection/MoodButtonsSection.tsx diff --git a/src/pages/main/Main.helpers.ts b/src/pages/main/Main.helpers.ts new file mode 100644 index 0000000..f9bbbca --- /dev/null +++ b/src/pages/main/Main.helpers.ts @@ -0,0 +1,6 @@ +export function isTenHoursPassed(dateString: string): boolean { + const originalDate = new Date(dateString); + const tenHoursLater = new Date(originalDate.getTime() + 10 * 60 * 60 * 1000); + const currentDate = new Date(); + return currentDate >= tenHoursLater; +} diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index 71c0973..7968a66 100644 --- a/src/pages/main/Main.tsx +++ b/src/pages/main/Main.tsx @@ -4,7 +4,6 @@ import { useOnlineCheck } from "@/shared/hooks/useOnlineCheck"; import { BadInternetConnection } from "@/components/BadInternetConnection/BadInternetConnection"; import { Navbar } from "@/components/Navbar/Navbar"; import {RoutineSlider} from "@/pages/main/components/RoutineSlider/RoutineSlider.tsx"; -import {MoodButton} from "@/pages/main/components/MoodButton/MoodButton.tsx"; import {BurnoutTestBanner} from "@/components/BurnoutTestBanner/BurnoutTestBanner.tsx"; import {MoodGraph} from "@/components/MoodGraph/MoodGraph.tsx"; import {BurnoutLevel} from "@/components/BurnoutLevel/BurnoutLevel.tsx"; @@ -14,10 +13,12 @@ import {EventsMain} from "@/components/EventsMain/EventsMain.tsx"; import {PieChart} from "@/pages/main/components/PieChart/PieChart.tsx"; import {useRequest} from "@/shared/hooks/useRequest.tsx"; import {getActivityTypes} from "@/shared/api/Api.ts"; -import {ReactElement, useState} from "react"; +import {ReactElement, useEffect, useState} from "react"; import {useAppSelector} from "@/store/hooks.ts"; import {selectUserInfo} from "@/store/reducers/currentUser/currentUserReducer.ts"; import {Report} from "@/pages/main/components/Report/Report.tsx"; +import {MoodButtonsSection} from "@/pages/main/components/MoodButtonsSection/MoodButtonsSection.tsx"; +import {isTenHoursPassed} from "@/pages/main/Main.helpers.ts"; interface Props { events: EventInterface[]; @@ -28,6 +29,7 @@ export const Main = ({events}: Props): ReactElement | null => { const currentUser = useAppSelector(selectUserInfo); const [tagsOfPieChart, setTagsOfPieChart] = useState([]); const [widthsOfPieChart, setWidthsOfPieChart] = useState([]); + const [isMoodButtonsVisible, setMoodButtonsVisible] = useState(false); const articles: ArticleInterface[] = [ { @@ -50,6 +52,16 @@ export const Main = ({events}: Props): ReactElement | null => { }, ]; + useEffect(() => { + if(currentUser.latest_condition) { + const result = isTenHoursPassed(currentUser.latest_condition.date); + setMoodButtonsVisible(result); + } else { + setMoodButtonsVisible(false); + } + }, [currentUser.latest_condition]) + + const handleTagsOfPieChart = (data: TagsInterface[]) => { setTagsOfPieChart(data); } @@ -70,14 +82,7 @@ export const Main = ({events}: Props): ReactElement | null => {
-

Оцените свое настроение сегодня

-
- - - - - -
+
diff --git a/src/pages/main/components/MoodButton/MoodButton.tsx b/src/pages/main/components/MoodButton/MoodButton.tsx index bcd2f40..af0da78 100644 --- a/src/pages/main/components/MoodButton/MoodButton.tsx +++ b/src/pages/main/components/MoodButton/MoodButton.tsx @@ -1,20 +1,18 @@ import React, { useState } from "react"; import styles from "./MoodButton.module.scss"; import cn from "classnames"; -import { useAppDispatch, useAppSelector } from "@/store/hooks.ts"; +import { useAppDispatch } from "@/store/hooks.ts"; import { setSuccessMessage } from "@/store/reducers/alertSuccess/alertSuccessReducer.ts"; -import { setErrorMessage } from "@/store/reducers/alertError/alertErrorReducer.ts"; -import { sendButtonCondition, selectButtonConditions } from "@/store/reducers/conditionsBurnout/conditionsBurnoutReducer.ts"; +import { sendButtonCondition } from "@/store/reducers/conditionsBurnout/conditionsBurnoutReducer.ts"; type Moods = "bad" | "so-so" | "normal" | "good" | "perfect"; interface MoodsProps { mood: Moods; + index: number; } -export const MoodButton: React.FC = ({ mood }) => { +export const MoodButton: React.FC = ({ mood, index }) => { const dispatch = useAppDispatch(); - const buttonCondition = useAppSelector(selectButtonConditions); - const [isHovered, setIsHovered] = useState(false); let caption: string; @@ -62,9 +60,6 @@ export const MoodButton: React.FC = ({ mood }) => { } function handleSendMood(e: React.MouseEvent) { - if (buttonCondition) { - dispatch(setErrorMessage('Можно голосовать только один раз в день')) - } else { const condition = +(e.currentTarget as HTMLButtonElement).value; const note = "Моё состояние сегодня"; const date = new Date().toISOString() @@ -75,11 +70,11 @@ export const MoodButton: React.FC = ({ mood }) => { date: date })) dispatch(setSuccessMessage('Вы молодец!')) - } } return (