Optimizations

src/App.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import Header from "./components/header/Header";
 import HomePage from "./pages/home/HomePage";
 import useLocalStorage from "use-local-storage";
+import Footer from "./components/footer/Footer";
 
 
 function App() {
-    const [isDark, setIsDark] = useLocalStorage('isDark',true)
-  return (
-      <div data-theme={isDark ? 'dark' : 'light'} className={'wrapper'}>
-        <Header isDark={isDark} setIsDark={setIsDark} />
-        <main>
-            <HomePage />
-        </main>
-      </div>
-  );
+  const [isDark, setIsDark] = useLocalStorage('isDark',true)
+    return (
+        <div className={'wrapper'} data-theme={isDark ? 'dark' : 'light'}>
+            <Header isDark={isDark} setIsDark={setIsDark}/>
+            <HomePage/>
+            <Footer/>
+        </div>
+    );
 }
 
 export default App;

src/components/HourlyForecast/HourlyForecast.module.scss

@@ -1,7 +1,7 @@
 .body{
   font-family: var(--font_family);
-  padding: 24px;
-  box-shadow: 7px 7px 10px 0 var(--foreground-color);
+  padding: 25px;
+  box-shadow: 7px 7px 10px 0 rgba(0,0,0,0.5);
   border-radius: 30px;
   background: var(--background-color);
   width: 100%;

src/components/HourlyForecast/HourlyForecast.tsx

@@ -3,14 +3,17 @@ import s from './HourlyForecast.module.scss'
 import {useAppDispatch, useAppSelector} from "../../hooks/hooks";
 import {hourlyForecastThunk} from "../../store/thunks/hourlyForecast.thunk";
 import Icon from "../imageIcon/Icon";
+import {toast} from "react-toastify";
 
-const HourlyForecast = () => {
-    const {name} = useAppSelector(state => state.currentWeather)
+const HourlyForecast = React.memo(() => {
+    const name = useAppSelector(state => state.currentWeather.name)
+    const error = useAppSelector(state => state.hourlyWeather.error)
     const {list} = useAppSelector(state => state.hourlyWeather)
     const dispatch = useAppDispatch()
     useEffect(() => {
         name && dispatch(hourlyForecastThunk(name))
     }, [name]);
+    error && toast.error(error)
     return (
         <div className={s.body}>
             <h2 className="title">Hourly Forecast:</h2>
@@ -28,6 +31,6 @@ const HourlyForecast = () => {
             </div>
         </div>
     );
-};
+});
 
 export default HourlyForecast;

src/components/currentWeather/CurrentWeather.module.scss

@@ -1,9 +1,9 @@
 .info{
-  padding: 24px;
-  box-shadow: 7px 7px 10px 0 var(--foreground-color);
+  padding: 25px;
+  box-shadow: 7px 7px 10px 0 rgba(0,0,0,0.5);
   border-radius: 30px;
   background: var(--background-color);
-  width: 58%;
+  width: 60%;
   position: relative;
   display: flex;
   justify-content: space-between;

src/components/currentWeather/CurrentWeather.tsx

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import s from './CurrentWeather.module.scss'
-import {useAppSelector} from "../../hooks/hooks";
+import {useAppDispatch, useAppSelector} from "../../hooks/hooks";
 import Icon from '../imageIcon/Icon';
 import CurrentWeatherInfo from "../currentWeatherInfo/CurrentWeatherInfo";
+import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk";
 
-const CurrentWeather = () => {
-    const {temp, weather, feels_like} = useAppSelector(state => state.currentWeather)
+const CurrentWeather = React.memo(() => {
+    console.log('CurrentWeather')
+    const dispatch = useAppDispatch()
+    const temp = useAppSelector(state => state.currentWeather.temp)
+    const weather = useAppSelector(state => state.currentWeather.weather)
+    const feels_like = useAppSelector(state => state.currentWeather.feels_like)
+
+    useEffect(() => {
+        dispatch(currentWeatherThunk('astana'))
+    }, [dispatch]);
 
     return (
         <div className={s.info}>
@@ -17,6 +26,6 @@ const CurrentWeather = () => {
             <CurrentWeatherInfo />
         </div>
     );
-};
+});
 
 export default CurrentWeather;

src/components/currentWeatherAbout/CurrentWeatherAbout.module.scss

@@ -1,7 +1,7 @@
 .content{
-  padding: 24px;
-  width: 38%;
-  box-shadow: 7px 7px 10px 0 var(--foreground-color);
+  padding: 25px;
+  width: 37%;
+  box-shadow: 7px 7px 10px 0 rgba(0,0,0,0.5);
   border-radius: 30px;
   background: var(--background-color);
   display: flex;

src/components/currentWeatherAbout/CurrentWeatherAbout.tsx

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import s from './CurrentWeatherAbout.module.scss'
 import {useAppSelector} from "../../hooks/hooks";
+import {toast} from "react-toastify";
 
 const CurrentWeatherAbout = () => {
-    const {name, weather} = useAppSelector(state => state.currentWeather)
+    const name = useAppSelector(state => state.currentWeather.name)
+    const weather = useAppSelector(state => state.currentWeather.weather)
+    const error = useAppSelector(state => state.currentWeather.error)
+
+    useEffect(() => {
+        error && toast.error(error)
+    }, [error]);
     return (
         <div className={s.content}>
             <div className={s.city}>

src/components/currentWeatherInfo/CurrentWeatherInfo.module.scss

@@ -24,8 +24,8 @@
       }
     }
     svg{
-      height: 60px;
-      width: 60px;
+      height: 54px;
+      width: 54px;
       path{
         fill: var(--foreground-color);
         stroke: var(--foreground-color);
@@ -38,7 +38,7 @@
       font-size: 16px;
       span{
         display: block;
-        font-size: 1.1em;
+        font-size: 1em;
         font-weight: 600;
       }
     }

src/components/footer/Footer.module.scss

@@ -0,0 +1,12 @@
+.footer{
+  margin-top: 2em;
+  position: relative;
+  z-index: 10;
+  padding: 1.2em 0;
+  color: var(--primary-color);
+}
+.items{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/components/footer/Footer.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import s from './Footer.module.scss'
+
+const Footer = React.memo(() => {
+    return (
+        <footer className={s.footer}>
+            <div className={'container'}>
+                Footer
+            </div>
+        </footer>
+    );
+});
+
+export default Footer;

src/components/header/Header.module.scss

@@ -1,10 +1,11 @@
 .header{
   position: relative;
   z-index: 10;
-  padding: 2em 0;
+  padding: 1.2em 0;
   color: var(--primary-color);
 }
 .items{
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }

src/components/header/Header.tsx

@@ -5,18 +5,15 @@ import ToggleTheme from "../toggleTheme/ToggleTheme";
 
 interface IHeader {
     isDark: boolean,
-    setIsDark: any
+    setIsDark: (isDark: boolean) => void
 }
 
 const Header: FC<IHeader> = ({isDark, setIsDark}) => {
-
     return (
         <header className={s.header}>
-            <div className="container">
-                <div className={s.items}>
-                    <ToggleTheme toggleChange={() => setIsDark(!isDark)} isChecked={isDark} />
-                    <SearchBlock />
-                </div>
+            <div className={`container ${s.items}` }>
+                <ToggleTheme toggleChange={() => setIsDark(!isDark)} isChecked={isDark} />
+                <SearchBlock />
             </div>
         </header>
     );

src/components/searchBlock/SearchBlock.module.scss

@@ -18,5 +18,8 @@
     background-color: var(--foreground-color);
     border: 2px solid var(--foreground-color);
     color: #ffffff;
+    &[disabled] {
+      cursor: default;
+    }
   }
 }

src/components/searchBlock/SearchBlock.tsx

@@ -5,16 +5,16 @@ import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk";
 
 const SearchBlock = () => {
     const [data, setData] = useState('')
-    const changeData = (e: ChangeEvent<HTMLInputElement>) => setData(e.target.value)
     const dispatch = useAppDispatch()
+    const changeData = (e: ChangeEvent<HTMLInputElement>) => setData(e.target.value)
     const send = () => {
         if (data.length > 0){
             dispatch(currentWeatherThunk(data))
             setData('')
         }
     }
     const sendEnter = (e:  React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter' && data.length){
+        if (e.key === 'Enter' && data.length > 0){
             dispatch(currentWeatherThunk(data))
             setData('')
         }
@@ -23,7 +23,7 @@ const SearchBlock = () => {
     return (
         <div className={s.searchBlock}>
             <input onKeyPress={sendEnter} placeholder={'Search Location...'} onChange={changeData} value={data} type="text"/>
-            <button onClick={send} type={'submit'}>Find</button>
+            <button disabled={!data.length} onClick={send} type={'submit'}>Find</button>
         </div>
     );
 };

src/components/toggleTheme/ToggleTheme.module.scss

@@ -36,4 +36,7 @@
     transform: translateX(100%);
     transition: all .3s;
   }
+}
+.toggleContainer input{
+  display: none;
 }

src/components/toggleTheme/ToggleTheme.tsx

@@ -1,8 +1,8 @@
-import React, {FC} from 'react';
+import React, {ChangeEventHandler, FC} from 'react';
 import s from './ToggleTheme.module.scss'
 
 interface IToggleTheme {
-    toggleChange: any,
+    toggleChange: ChangeEventHandler,
     isChecked: boolean
 }
 

src/index.scss

@@ -46,7 +46,11 @@ p {
 body{
 	margin: 0;
 }
+main{
+	unicode-bidi: normal;
+}
 .wrapper {
+	min-height: 100vh;
 	transition: all .3s;
 	margin: 0;
 	padding: 0;

src/pages/home/HomePage.module.scss

@@ -1,10 +1,7 @@
-.homePage{
-  position: relative;
-  overflow-x: hidden;
-}
+
 .items{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  row-gap: 2.77em;
+  row-gap: 1.3em;
 }

src/pages/home/HomePage.tsx

@@ -1,40 +1,25 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import s from './HomePage.module.scss'
-import {useAppDispatch, useAppSelector} from "../../hooks/hooks";
-import {currentWeatherThunk} from "../../store/thunks/currentWeather.thunk";
 import CurrentWeather from "../../components/currentWeather/CurrentWeather";
 import CurrentWeatherAbout from "../../components/currentWeatherAbout/CurrentWeatherAbout";
 import HourlyForecast from "../../components/HourlyForecast/HourlyForecast";
-import {toast, ToastContainer} from "react-toastify";
+import {ToastContainer} from "react-toastify";
 
-const HomePage = () => {
-    const dispatch: any = useAppDispatch()
-    const currentWeatherError = useAppSelector(state => state.currentWeather.error)
-    const hourlyWeatherError = useAppSelector(state => state.hourlyWeather.error)
-    useEffect(() => {
-        dispatch(currentWeatherThunk('astana'))
-    }, []);
-
-    useEffect(() => {
-        currentWeatherError && toast.error(currentWeatherError)
-        hourlyWeatherError && toast.error(hourlyWeatherError)
-    }, [currentWeatherError, hourlyWeatherError]);
+const HomePage = React.memo(() => {
+    console.log('HomePage')
     return (
         <>
-            <div className={s.homePage}>
+            <ToastContainer position="top-left" autoClose={5000}/>
+            <main>
                 <div className={`container ${s.items}`}>
-                    <ToastContainer
-                        position="top-left"
-                        autoClose={5000}
-                    />
                     <CurrentWeatherAbout />
                     <CurrentWeather />
-                    {/*<DailyForecast />*/}
                     <HourlyForecast />
+                    {/*<DailyForecast />*/}
                 </div>
-            </div>
+            </main>
         </>
     );
-};
+});
 
 export default HomePage;