Merge pull request #25 from dashalalala24/dev

fix: animation, calendar and some minor fixes
dashalalala24 · Aug 8, 2023 · dd0385a · dd0385a
2 parents a4571ac + 095287b
commit dd0385a
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 78 deletions.
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -2,12 +2,15 @@
   display: flex;
   justify-content: space-between;
   padding: 2.58vh 4.03vw;
+  max-height: 8.66vh;
+  box-sizing: border-box;
 }
 
 .header__logo {
   box-sizing: border-box;
   width: 7.92vw;
   height: 3.5vh;
+  align-self: center;
 }
 
 .header__container {

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -11,6 +11,7 @@ import {
   setLanguage,
 } from "../../services/redux/slices/language/language";
 import { addChatMessage } from "../../services/redux/slices/chat/chat";
+import { LANG_OPTIONS } from "../../utils/constants";
 
 const Header: FC = () => {
   const dispatch = useAppDispatch();
@@ -19,20 +20,20 @@ const Header: FC = () => {
 
   const [isLanguagesVisible, setIsLanguagesVisible] = useState(false);
 
-  const langOptions = ["ru", "en", "fr", "zh"];
   const renderOtherLangButtons = () => {
-    return langOptions
-      .filter((lang) => lang !== currentLanguage)
-      .map((lang) => {
+    return LANG_OPTIONS.filter((lang) => lang !== currentLanguage).map(
+      (lang) => {
         return (
           <button
+            key={lang}
             className="header__lang-button"
             onClick={() => handleSelect(lang)}
           >
             {lang}
           </button>
         );
-      });
+      }
+    );
   };
   const handleSelect = (lang: string) => {
     dispatch(setLanguage(lang));

diff --git a/src/components/Main/ChatContainer/Chat/Chat.tsx b/src/components/Main/ChatContainer/Chat/Chat.tsx
@@ -1,12 +1,11 @@
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { useAppSelector } from "../../../../services/redux/reduxHooks";
 
 import "./Chat.css";
 import Message from "../Message/Message";
 import MessageLoader from "../Message/MessageLoader/MessageLoader";
 import Tag from "../Tag/Tag";
 import DefaultMessageText from "../DefaultMessageText/DefaultMessageText";
-import { CURRENT_DATE, CURRENT_TIME } from "../../../../utils/constants";
 import {
   currentLanguageSelector,
   languageSelector,
@@ -15,6 +14,7 @@ import {
   chatStatusSelector,
   messagesSelector,
 } from "../../../../services/redux/slices/chat/chat";
+import { getCurrentDate, getCurrentTime } from "../../../../utils/utils";
 
 const Chat: FC = () => {
   const currentLanguage = useAppSelector(currentLanguageSelector);
@@ -23,11 +23,14 @@ const Chat: FC = () => {
   const chatMessages = useAppSelector(messagesSelector);
   const checkStatus = useAppSelector(chatStatusSelector);
 
-  const lastMessage = chatMessages[chatMessages?.length - 2]?.text;
+  const lastMessage = useMemo(
+    () => chatMessages[chatMessages?.length - 2]?.text,
+    [chatMessages]
+  );
 
   return (
     <div className="chat">
-      <p className="chat__date">{CURRENT_DATE}</p>
+      <p className="chat__date">{getCurrentDate()}</p>
       {chatMessages?.length ? (
         chatMessages?.map((message) => {
           return (
@@ -48,7 +51,7 @@ const Chat: FC = () => {
         <Message
           text={<DefaultMessageText />}
           owner={"system"}
-          createdAt={CURRENT_TIME}
+          createdAt={getCurrentTime()}
         />
       )}
       {chatMessages?.length &&
@@ -71,7 +74,6 @@ const Chat: FC = () => {
           {language[currentLanguage].exampleQuestions.map((question) => {
             return <Tag key={question} text={question} answer={question} />;
           })}
-          {/* <button className="chat__tags-button"></button> */}
         </div>
       ) : null}
       {checkStatus === "aiPending" ? <MessageLoader owner={"system"} /> : null}

diff --git a/src/components/Main/ChatContainer/WaveAnimation/Animation/Animation.ts b/src/components/Main/ChatContainer/WaveAnimation/Animation/Animation.ts
@@ -5,15 +5,20 @@ import {
   WaveOptions,
 } from "../../../../../types/types";
 
-function Animation({ inMin, inMax, outMin, outMax }: AnimationProps) {
+function Animation({
+  constriction,
+  amplitudeY,
+  amplitudeX,
+  id,
+}: AnimationProps) {
   function valueMapping(
     x: number,
     inMin: number,
     inMax: number,
     outMin: number,
     outMax: number
   ) {
-    return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+    return (x * (outMax - outMin)) / (inMax - inMin) + outMin;
   }
 
   const canvas: CanvasObject = {
@@ -25,7 +30,7 @@ function Animation({ inMin, inMax, outMin, outMax }: AnimationProps) {
     init() {
       this.ele.id = "canvas";
       this.ele.setAttribute("class", "wave__canvas");
-      const waveSection = document.getElementById("wave__section");
+      const waveSection = document.getElementById(id);
       if (waveSection) {
         waveSection.prepend(this.ele);
       }
@@ -114,16 +119,22 @@ function Animation({ inMin, inMax, outMin, outMax }: AnimationProps) {
 
     const init = () => {
       waves = [];
-      for (let i = 0; i < 20; i++) {
+      for (let i = 0; i < 11; i++) {
         const [start, stop] =
           gradients[Math.floor(Math.random() * gradients.length)];
         waves.push(
           new Wave(canvas, {
             start,
             stop,
-            lineWidth: 1,
-            xSpeed: valueMapping(Math.random(), inMin, inMax, outMin, outMax),
-            amplitude: valueMapping(Math.random(), 0, 1, 0.05, 0.4),
+            lineWidth: 0.5,
+            xSpeed: valueMapping(Math.random(), 0, 1, -0.05, -0.02),
+            amplitude: valueMapping(
+              Math.random(),
+              0,
+              constriction,
+              amplitudeY,
+              amplitudeX
+            ),
             offset: Math.random() * 100,
           })
         );
@@ -148,27 +159,7 @@ function Animation({ inMin, inMax, outMin, outMax }: AnimationProps) {
       waves = [];
       canvas.ele.remove();
     };
-  }, [inMin, inMax, outMin, outMax]);
-
-  // useEffect(() => {
-  //   // Функция для пересчета значений и обновления анимации
-
-  //   function updateAnimation() {
-  //     // Пересчитываем значения
-  //     const xSpeed = valueMapping(Math.random(), inMin, inMax, outMin, outMax);
-  //     const amplitude = valueMapping(Math.random(), 0, 1, 0.05, 0.4);
-
-  //     // Обновляем значения в каждой анимации
-  //     waves.forEach((wave) => {
-  //       wave.options.xSpeed = xSpeed;
-  //       wave.options.amplitude = amplitude;
-  //       wave.resize();
-  //     });
-  //   }
-
-  //   // Вызываем функцию для пересчета значений и обновления анимации при изменении пропсов
-  //   updateAnimation();
-  // }, [inMin, inMax, outMin, outMax]);
+  }, [constriction, amplitudeY, amplitudeX]);
 
   return null;
 }

diff --git a/src/components/Main/ChatContainer/WaveAnimation/WaveAnimation.css b/src/components/Main/ChatContainer/WaveAnimation/WaveAnimation.css
@@ -7,6 +7,7 @@
   width: 100%;
   height: 188px;
   position: relative;
+  overflow: hidden;
 }
 
 .wave__record-block {
@@ -23,3 +24,21 @@
   justify-content: center;
   align-items: center;
 }
+
+.wave__animation {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform: rotateX(90deg);
+  transition: transform 0.8s ease;
+}
+
+.wave__still-animation_visible {
+  transform: rotateX(45deg);
+}
+
+.wave__moving-animation_visible {
+  transform: rotateX(180deg);
+}
diff --git a/src/components/Main/ChatContainer/WaveAnimation/WaveAnimation.tsx b/src/components/Main/ChatContainer/WaveAnimation/WaveAnimation.tsx
@@ -1,28 +1,41 @@
-import { useEffect, useRef } from "react";
-import { render } from "react-dom";
-
 import "./WaveAnimation.css";
 import Animation from "./Animation/Animation";
 import Record from "../Record/Record";
+import { useAppSelector } from "../../../../services/redux/reduxHooks";
+import { isRecordingSelector } from "../../../../services/redux/slices/isRecording/isRecording";
 
 const WaveAnimation = () => {
-  const containerRef = useRef(null);
-
-  useEffect(() => {
-    const containerNode = containerRef.current;
-    const wavesContainer = document.getElementById("wave__animation");
-    if (containerNode && wavesContainer) {
-      render(
-        <Animation inMin={0} inMax={1} outMin={-0.05} outMax={-0.02} />,
-        wavesContainer
-      );
-    }
-  }, []);
+  const isRecording = useAppSelector(isRecordingSelector);
 
   return (
-    <div className="wave__section" id="wave__section" ref={containerRef}>
-      <div className="wave__animation" id="wave__animation"></div>
-      <div className="wave__record" id="wave__record">
+    <div className="wave__section" id="wave__section">
+      <div
+        className={`wave__animation wave__still-animation ${
+          isRecording ? "" : "wave__still-animation_visible"
+        } `}
+        id="wave__still-animation"
+      >
+        <Animation
+          constriction={5000}
+          amplitudeY={0.001}
+          amplitudeX={0.1}
+          id="wave__still-animation"
+        />
+      </div>
+      <div
+        className={`wave__animation wave__moving-animation ${
+          isRecording ? "wave__moving-animation_visible" : ""
+        } `}
+        id="wave__moving-animation"
+      >
+        <Animation
+          constriction={1}
+          amplitudeY={0.05}
+          amplitudeX={0.4}
+          id="wave__moving-animation"
+        />
+      </div>
+      <div className="wave__record">
         <Record />
       </div>
     </div>

diff --git a/src/components/Main/Sidebar/HistoryInput/HistoryInput.css b/src/components/Main/Sidebar/HistoryInput/HistoryInput.css
@@ -24,7 +24,7 @@
   outline: none;
 }
 
-.historyinput__calender-button {
+.historyinput__calender-label {
   padding: 0;
   width: 24px;
   height: 24px;
@@ -33,9 +33,21 @@
   background-image: url(../../../../images/calendar-day.svg);
   background-repeat: no-repeat;
   cursor: pointer;
-  transition: opacity 0.35s linear;
+  transition: opacity 0.35s;
 }
 
-.historyinput__calender-button:hover {
+.historyinput__calender-label:hover {
   background-image: url(../../../../images/calendar-day-hovered.svg);
 }
+
+.historyinput__calender-button {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0;
+  outline: none;
+  border: none;
+  clip-path: inset(0 0 0 0);
+  appearance: none;
+}
diff --git a/src/components/Main/Sidebar/HistoryInput/HistoryInput.tsx b/src/components/Main/Sidebar/HistoryInput/HistoryInput.tsx
@@ -1,4 +1,4 @@
-import { FC, SyntheticEvent } from "react";
+import { FC } from "react";
 import "./HistoryInput.css";
 import {
   currentLanguageSelector,
@@ -17,12 +17,9 @@ const HistoryInput: FC = () => {
         type="text"
         placeholder={language[currentLanguage].historyPlaceholder}
       />
-      <button
-        className="historyinput__calender-button"
-        onClick={(evt: SyntheticEvent) => {
-          evt.preventDefault();
-        }}
-      />
+      <label className="historyinput__calender-label">
+        <input className="historyinput__calender-button" type="date" />
+      </label>
     </form>
   );
 };

diff --git a/src/components/Main/Sidebar/Sidebar.tsx b/src/components/Main/Sidebar/Sidebar.tsx
@@ -11,12 +11,12 @@ import {
   messagesSelector,
   resetChat,
 } from "../../../services/redux/slices/chat/chat";
-import { CURRENT_DATE } from "../../../utils/constants";
 import {
   currentLanguageSelector,
   languageSelector,
 } from "../../../services/redux/slices/language/language";
 import { IChatMessage } from "../../../types/types";
+import { getCurrentDate } from "../../../utils/utils";
 
 const Sidebar: FC = () => {
   const dispatch = useAppDispatch();
@@ -61,7 +61,7 @@ const Sidebar: FC = () => {
           <HistoryInput />
         ) : null}
         {userMessages?.length ? (
-          <p className="sidebar__date">{CURRENT_DATE}</p>
+          <p className="sidebar__date">{getCurrentDate()}</p>
         ) : null}
         {userMessages?.length ? (
           userMessages.map((text, index) => {

diff --git a/src/images/calendar-day-acive.svg b/src/images/calendar-day-acive.svg
diff --git a/src/index.css b/src/index.css
@@ -16,4 +16,3 @@ canvas {
   width: 100%;
   height: 100%;
 }
-
diff --git a/src/types/types.ts b/src/types/types.ts
@@ -26,10 +26,10 @@ export interface WaveOptions {
 }
 
 export interface AnimationProps {
-  inMin: number;
-  inMax: number;
-  outMin: number;
-  outMax: number;
+  constriction: number;
+  amplitudeY: number;
+  amplitudeX: number;
+  id: string;
 }
 
 export interface CanvasObject {