Merge pull request #310 from DonaldReddy/preloader

[Feat]: Add Preloader till BackGround Renders

src/App.jsx

@@ -5,11 +5,18 @@ import Footer from './components/Footer/Footer.jsx'
 import Toast from "./components/Toast/Toast.jsx"
 import BackGround from './components/BackGround/BackGround.jsx'
 import ScrollToTop from './components/ScrollToTop/ScrollToTop.jsx'
+import PreLoader from './components/PreLoader/PreLoader.jsx'
+import { useState } from 'react'
+
 
 function App() {
+
+  const [isPreLoading, setIsPreLoading] = useState(true)
+
   return (
     <>
-      <BackGround />
+      {isPreLoading && <PreLoader />}
+      <BackGround setIsPreLoading={setIsPreLoading} />
       <Toast />
       <Navbar />
       <Outlet />

src/components/Apod/Apod.jsx

@@ -22,14 +22,10 @@ function Apod() {
 
       response = await response.json();
 
-      console.log(response);
-
       setApodInfo((prev) => {
         return { ...prev, url: response.url, explanation: response.explanation, title: response.title, date: response.date, copyright: response.copyright, media_type: response.media_type }
       })
 
-      console.log(apodInfo);
-
     } catch (error) {
       console.log(error.message);
     }

src/components/BackGround/BackGround.jsx

@@ -13,7 +13,7 @@ function Star({ position }) {
   );
 };
 
-function StarField({ numberOfStars = 100 }) {
+function StarField({ numberOfStars = 100, setIsPreLoading }) {
 
   const starFieldRef = useRef();
 
@@ -25,6 +25,7 @@ function StarField({ numberOfStars = 100 }) {
   const [positions, setPositions] = useState([])
 
   const addStars = useCallback(() => {
+    setIsPreLoading(true);
     const starsPosition = [];
     for (let i = 0; i < numberOfStars; i++) {
       let x = (Math.random() * 2 - 1) * 10; // Ensure x is within -5 to 5 range
@@ -33,10 +34,12 @@ function StarField({ numberOfStars = 100 }) {
       starsPosition.push([x, y, z]);
     }
     setPositions((prev) => [...starsPosition]);
+    setTimeout(() => setIsPreLoading(false), 2000)
   }, [numberOfStars])
 
   useEffect(addStars, []);
   return (
+
     <group ref={starFieldRef} rotation={[0, 0, -1]}>
       {
         positions.map((position, index) => (
@@ -48,13 +51,13 @@ function StarField({ numberOfStars = 100 }) {
 }
 
 
-function Background() {
+function Background({ setIsPreLoading }) {
 
   return (
     <div id={Styles['container']}>
-      <Canvas id={Styles['background']} camera={{ fov: 80, position: [0, 0, 7] }} >
+      <Canvas id={Styles['background']} camera={{ fov: 80, position: [0, 0, 10], near: 1, far: 1000 }} >
         <ambientLight intensity={1} />
-        <StarField numberOfStars={5000} />
+        <StarField numberOfStars={5000} setIsPreLoading={setIsPreLoading} />
       </Canvas>
     </div>
   );

src/components/Navbar/Navbar.jsx

@@ -50,6 +50,7 @@ function Navbar() {
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#apod">APOD</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="/mars-rover">MartianImagery</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/nasa-projects">NASA's Projects</NavLink></li>
+              <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/about">About us</NavLink></li>
             </ul>
             <a href="#contact" className="sidebar-contact rem-default rem">
               <button className="btn btn-outline-light rounded-pill" type="submit">Contact Us</button>
@@ -73,6 +74,9 @@ function Navbar() {
             <li className="nav-item">
               <NavLink className="nav-link text-light" to="/nasa-projects">NASA's Projects</NavLink>
             </li>
+            <li className="nav-item">
+              <NavLink className="nav-link text-light" to="/about">About us</NavLink>
+            </li>
             <li className="nav-item">
               <a href="#contact">
                 <button className="btn btn-outline-light rounded-pill" type="submit">Contact Us</button>

src/components/PreLoader/PreLoader.jsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react'
+import Styles from "./PreLoader.module.css"
+import preloader from "../../assets/preloader.svg"
+
+function PreLoader() {
+
+    return (
+        <div id={Styles.container}>
+            <object type='image/svg+xml' data={preloader} width="500px" />
+        </div>
+    )
+}
+
+export default PreLoader

src/components/PreLoader/PreLoader.module.css

@@ -0,0 +1,12 @@
+#container {
+    position: fixed;
+    z-index: 11000;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000000;
+}

src/components/Toast/Toast.jsx

@@ -14,7 +14,6 @@ function Toast() {
     const [isSuccess, setIsSuccess] = useState(false);
 
     toastify = (message = "", isSuccess = true) => {
-        console.log(timeOut);
         if (timeOut) {
             setMessage(message);
             setIsSuccess(isSuccess);

src/main.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom"
+import './index.css'
 import App from './App.jsx'
 import Home from "./pages/Home/Home.jsx"
 import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx"
-import './index.css'
-import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom"
+import About from "./pages/About/About.jsx"
 import MarsRover from './pages/MarsRover/MarsRover.jsx'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<App />}>
       <Route index element={<Home />} />
       <Route path='nasa-projects' element={<NasaProjects />} />
+      <Route path='about' element={<About />} />
       <Route path='mars-rover' element={<MarsRover/>}/>
     </Route>
   )

src/pages/About/About.jsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react'
+import Styles from "./About.module.css"
+import vision from "../../assets/vision.svg"
+import method from "../../assets/method.svg"
+import { FaAnglesRight, FaAnglesLeft, FaAngleLeft, FaAngleRight, FaGithub, FaLinkedin } from "react-icons/fa6";
+import Pagination from "../../utils/Pagination.js"
+
+
+
+
+function About() {
+
+    const FOUNDER_NAME = "PranavBarthwal"
+    const FOUNDER_LINKEDIN_URL = "https://www.linkedin.com/in/pranavbarthwal03/"
+    const CARDS_PER_PAGE = 8;
+    const repoName = "cosmoXplore";
+
+    const [contributors, setContributors] = useState([]);
+    const [founder, setFounder] = useState({});
+    const [currentPage, setCurrentPage] = useState(1); // to store pagination number.
+    const [pageinatedContributors, setPageinatedContributors] = useState([]);
+
+
+    useEffect(() => {
+        fetchContributors()
+    }, [])
+
+    useEffect(() => {
+        setPageinatedContributors(Pagination.Paginate(contributors, currentPage, CARDS_PER_PAGE));
+    }, [contributors, currentPage])
+
+    async function fetchContributors() {
+        try {
+
+            const response = await fetch(`https://api.github.com/repos/${FOUNDER_NAME}/${repoName}/contributors`)
+
+            const data = await response.json();
+
+            setContributors((prev) => {
+                return data.filter((user, idx) => user.login != FOUNDER_NAME);
+            })
+
+            setFounder(data.find((user) => user.login == FOUNDER_NAME));
+
+        } catch (error) {
+            console.log(error.message);
+        }
+    }
+
+
+    return (
+        <div id={Styles.container}>
+
+            <section id={Styles.section_1}>
+                <h1>About CosmoXplore</h1>
+                <p><b>
+                    “CosmoXplore is your portal to the universe's wonders, Making space exploration accessible and exciting for everyone.”
+                </b></p>
+            </section>
+
+            <section id={Styles.section_2}>
+                <h1><u>Our Vision </u></h1>
+                <div>
+                    <p>Explore the cosmos with CosmoXplore and stay informed about the innovations driving humanity's journey into the final frontier. Join us in discovering the beauty and mysteries of space, one photo and breakthrough at a time.As an open source organization, we are committed to transparency, collaboration, and community-driven development.</p>
+                    <img src={vision} width='400px' height='400px' />
+                </div>
+            </section>
+
+            <section id={Styles.section_3}>
+                <h1><u>Our Methods</u></h1>
+                <div>
+                    <img src={method} width='400px' height='400px' />
+                    <p>Our platform brings you stunning Astronomy Picture of the Day (APOD) images, fascinating photos of Mars, and updates on the latest technological breakthroughs at NASA. Utilizing NASA's open API, we deliver a seamless and engaging experience for space enthusiasts and curious minds alike.</p>
+                </div>
+            </section>
+
+            <section id={Styles.section_4}>
+
+                <div id={Styles.founder}>
+                    <h1><u>Our Founder</u></h1>
+                    <div>
+                        <img src={founder.avatar_url} />
+                        <h3>{founder.login}</h3>
+                        <div id={Styles.social}>
+                            <a href={founder.html_url} target='_blank'><FaGithub size={30} /></a>
+                            <a href={FOUNDER_LINKEDIN_URL} target='_blank'><FaLinkedin size={30} /></a>
+                        </div>
+                    </div>
+                </div>
+
+                <div id={Styles.contributors}>
+                    <h2><u>Our Contributors</u></h2>
+
+                    <div id={Styles.cards}>
+                        {
+                            pageinatedContributors.map((user, idx) => (
+                                <div key={idx} className={Styles.card}>
+                                    <img src={user.avatar_url} />
+                                    <h3>{user.login}</h3>
+                                    <div id={Styles.social}>
+                                        <a href={user.html_url} target='_blank'><FaGithub size={30} /></a>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+
+                    <div id={Styles['page-btns']}>
+                        <FaAnglesLeft className={Styles['page-icons']} size={30} onClick={() => setCurrentPage(Pagination.StartPage(contributors, currentPage, CARDS_PER_PAGE))} />
+                        <FaAngleLeft className={Styles['page-icons']} size={25} onClick={() => setCurrentPage(Pagination.PrevPage(contributors, currentPage, CARDS_PER_PAGE))} />
+
+                        <span id={Styles['page-num']}>{currentPage}</span>
+
+                        <FaAngleRight className={Styles['page-icons']} size={25} onClick={() => setCurrentPage(Pagination.NextPage(contributors, currentPage, CARDS_PER_PAGE))} />
+                        <FaAnglesRight className={Styles['page-icons']} size={30} onClick={() => setCurrentPage(Pagination.LastPage(contributors, currentPage, CARDS_PER_PAGE))} />
+                    </div>
+                </div>
+
+            </section>
+
+
+        </div>
+    )
+}
+
+export default About