Weather UI

README.md

@@ -15,13 +15,13 @@
 For Install dependencies only for server use : 
 
 ```bash
-  pnpm recursive install <package> --filter server
+  pnpm add <package> --filter=server
 ```
 
 For Install dependencies only for web use : 
 
 ```bash
-  pnpm recursive install <package> --filter web
+  pnpm add <package> --filter=web
 ```
 
 

apps/web/context/AuthContext.tsx

@@ -37,7 +37,7 @@ export const AuthContextProvider = ({ children }: LoginProviderProps) => {
 
   return (
     <AuthContext.Provider value={{user}} >
-      {loading ? <Main/> : children}
+      {children}
     </AuthContext.Provider>
   );
 }

apps/web/package.json

@@ -20,6 +20,7 @@
     "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-modal": "^3.16.1",
     "tailwindcss": "3.3.2",
     "typescript": "^5.1.3"
   }

apps/web/src/app/main/page.tsx

@@ -3,18 +3,75 @@
 import { AuthContextProps, useAuthContext } from 'apps/web/context/AuthContext';
 import signOutFunction from 'apps/web/firebase/auth/signout';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+import Modal from 'react-modal';
+
+
+import Feed from '../../components/Feed';
+import TemperatureSwitch from '../../components/TemperatureSwitch';
 
 export default function Main() {
   const authContext = useAuthContext();
-  const  user = authContext?.user
+  const user = authContext?.user
 
   const router = useRouter()
 
-  useEffect(() => {
-    if (user == null) return router.push("/");
-  }, [user])
+  // useEffect(() => {
+  //   if (user == null) return router.push("/");
+  // }, [user])
 
+  const [states, setStates] = useState([
+    { state: 'Adrar', number: 1 },
+    { state: 'Chlef', number: 2 },
+    { state: 'Laghouat', number: 3 },
+    { state: 'Oum El Bouaghi', number: 4 },
+    { state: 'Batna', number: 5 },
+    { state: 'Béjaïa', number: 6 },
+    { state: 'Biskra', number: 7 },
+    { state: 'Béchar', number: 8 },
+    { state: 'Blida', number: 9 },
+    { state: 'Bouira', number: 10 },
+    { state: 'Tamanrasset', number: 11 },
+    { state: 'Tébessa', number: 12 },
+    { state: 'Tlemcen', number: 13 },
+    { state: 'Tiaret', number: 14 },
+    { state: 'Tizi Ouzou', number: 15 },
+    { state: 'Alger', number: 16 },
+    { state: 'Djelfa', number: 17 },
+    { state: 'Jijel', number: 18 },
+    { state: 'Sétif', number: 19 },
+    { state: 'Saïda', number: 20 },
+    { state: 'Skikda', number: 21 },
+    { state: 'Sidi Bel Abbès', number: 22 },
+    { state: 'Annaba', number: 23 },
+    { state: 'Guelma', number: 24 },
+    { state: 'Constantine', number: 25 },
+    { state: 'Médéa', number: 26 },
+    { state: 'Mostaganem', number: 27 },
+    { state: 'M\'Sila', number: 28 },
+    { state: 'Mascara', number: 29 },
+    { state: 'Ouargla', number: 30 },
+    { state: 'Oran', number: 31 },
+    { state: 'El Bayadh', number: 32 },
+    { state: 'Illizi', number: 33 },
+    { state: 'Bordj Bou Arréridj', number: 34 },
+    { state: 'Boumerdès', number: 35 },
+    { state: 'El Tarf', number: 36 },
+    { state: 'Tindouf', number: 37 },
+    { state: 'Tissemsilt', number: 38 },
+    { state: 'El Oued', number: 39 },
+    { state: 'Khenchela', number: 40 },
+    { state: 'Souk Ahras', number: 41 },
+    { state: 'Tipasa', number: 42 },
+    { state: 'Mila', number: 43 },
+    { state: 'Aïn Defla', number: 44 },
+    { state: 'Naâma', number: 45 },
+    { state: 'Aïn Témouchent', number: 46 },
+    { state: 'Ghardaïa', number: 47 },
+    { state: 'Relizane', number: 48 }
+  ]);
 
   const logout = async () => {
     const { result, error } = await signOutFunction();
@@ -26,17 +83,88 @@ export default function Main() {
     return router.push("/")
   };
 
+  // popup modal
+  const customStyles = {
+    content: {
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)',
+      width: "50vw",
+    },
+  };
+
+  let subtitle;
+  const [modalIsOpen, setIsOpen] = useState(false);
 
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  // function afterOpenModal() {
+  //   // references are now sync'd and can be accessed.
+  //   subtitle.style.color = '#f00';
+  // }
+
+  function closeModal() {
+    setIsOpen(false);
+  }
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-[#3A3A3A]">
-      <p className=' text-white text-2xl'>Weathero</p>
-      <p className=' text-white text-2xl'>Only logged in users can view this page hello {user?.email}</p>
-      <button type="button" onClick={logout} className='rounded bg-[#C4FCB7] p-2 text-black'>Logout</button>
+    <main className="bg-[#3A3A3A] h-screen w-full">
+      <Modal
+        isOpen={modalIsOpen}
+        // onAfterOpen={afterOpenModal}
+        onRequestClose={closeModal}
+        style={customStyles}
+        contentLabel="Example Modal"
+      >
+        <div className=' flex flex-wrap gap-2'>
+          {states.map((element)=>{
+            return (
+              <button
+                className='text-white bg-[#3A3A3A] p-1 px-3 rounded'
+                key={element.number}
+                >
+                  {element.number} {element.state}
+                </button>
+            );
+          })}
+        </div>
+      </Modal>
+      <Image
+        src="/logout.svg"
+        alt="logo"
+        width={27}
+        height={27}
+        className=' absolute top-10 right-10 bg-[#C4FCB7] p-1 rounded'
+      />
+      <section className='p-8 flex flex-col gap-y-2'>
+        <p className='text-3xl font-bold'>Weather</p>
+        <div onClick={openModal} className=' flex gap-3 bg-[#C4FCB7] rounded p-1 cursor-pointer w-fit'>
+          <p className=' text-black'>Select your city</p>
+          <Image
+            src="/plus.svg"
+            width={25}
+            height={25}
+            alt="btn"
+          />
+        </div>
+        <TemperatureSwitch />
+      </section>
+      <section className='p-8 flex flex-col gap-y-2'>
+        <Feed />
+      </section>
+
     </main>
   )
 }
 
+// flex min-h-screen flex-col items-center justify-between p-24 bg-[#3A3A3A]
+// <button type="button" onClick={logout} className='rounded bg-[#C4FCB7] p-2 text-black'>Logout</button>
+
 
 
 

apps/web/src/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
   const  user = authContext?.user
 
   useEffect(() => {
-    if (user == null) return router.push("/login");
+    if (user == null) return router.push("/main");
     else if(user != null) return router.push("/main");
   }, [user])
 

apps/web/src/components/Feed.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useState } from "react";
+import WeatherBar from "./WeatherBar";
+
+const Feed = () => {
+
+  const [data, setData] = useState([
+    {id: 1, cityName: "Tlemcen", temp: 30},
+    {id: 2, cityName: "Oran", temp: 29},
+    {id: 3, cityName: "Tiaret", temp: 40},
+  ]);
+
+  return (
+    <div>
+        {data.map((elements)=>{
+          return (
+            <WeatherBar
+              key={elements.id}
+              data={elements}
+            />
+          );
+        })}
+    </div>
+  )
+}
+
+export default Feed

apps/web/src/components/TemperatureSwitch.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+const TemperatureSwitch = () => {
+
+    const [isCelsius, setIsCelsius] = useState(true);
+
+    const handleSwitch = () => {
+        setIsCelsius(!isCelsius);
+    };
+
+
+    return (
+        <div className="flex items-center">
+            <span className={`${isCelsius ? 'mr-2' : 'mr-2'}`}>{isCelsius ? 'C°' : 'F°'}</span>
+            <label htmlFor="toggle" className="flex items-center cursor-pointer">
+                <div className="relative">
+                    <input
+                        type="checkbox"
+                        id="toggle"
+                        className="sr-only"
+                        checked={isCelsius}
+                        onChange={handleSwitch}
+                    />
+                    <div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
+                    <div className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform duration-300 ${isCelsius ? 'translate-x-0' : 'translate-x-4'}`}></div>
+                </div>
+            </label>
+        </div>
+    )
+}
+
+export default TemperatureSwitch

apps/web/src/components/WeatherBar.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react"
+
+const WeatherBar = ({ data }) => {
+
+    // const [isActive, setIsActive] = useState(true);
+
+    // const tempSwitchHandle = () => {
+    //     setIsActive((prevState) => !prevState);
+    // }
+
+    return (
+        <div className="bg-[#D9D9D9] flex justify-between text-center items-center p-3 rounded my-2">
+            <h1 className="text-black font-bold text-xl">
+                {data.cityName}
+            </h1>
+            <div className="flex gap-x-2 items-center">
+                <p className="text-black text-3xl">{data.temp}°</p>
+                {/* <div className="flex gap-x-1">
+                    <p className={`text-black text-2xl cursor-pointer ${isActive && "font-bold"}`} onClick={tempSwitchHandle}>°C</p>
+                    <p className="text-black">|</p>
+                    <p className={`text-black text-2xl cursor-pointer ${!isActive && "font-bold"}`} onClick={tempSwitchHandle}>°F</p>
+                </div> */}
+                <button
+                    className="bg-[#C4FCB7] p-1 px-5 rounded cursor-pointer text-black"
+                >
+                    Change city
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default WeatherBar

apps/web/src/customHook/useFetch.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+const useFetch = (url) => {
+  const [data, setData] = useState(null);
+  const [isPending, setIsPending] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      fetch(url)
+      .then(res => {
+        if (!res.ok) { // error coming back from server
+          throw Error('could not fetch the data for that city name');
+        } 
+        return res.json();
+      })
+      .then(data => {
+        setIsPending(false);
+        setData(data);
+        setError(null);
+      })
+      .catch(err => {
+        // auto catches network / connection error
+        setIsPending(false);
+        setError(err.message);
+      })
+    }, 1000);
+  }, [url])
+
+  return { data, isPending, error };
+}
+
+export default useFetch;

apps/web/tsconfig.json

@@ -9,6 +9,7 @@
     "allowJs": true,
     "strict": true,
     "noEmit": true,
+    "noImplicitAny": false,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",