djunicode · asmisavla · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,15 +5,23 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource/poppins": "^5.0.13",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
+    "bootstrap": "^5.3.3",
+    "debug": "^4.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-pdf": "^9.0.0",
     "react-router-dom": "^6.22.3",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPmk6InX-g50iAvpAya1awOTz4BhIUfgeCavlw8S2rVSkIjkUsxMfbVgOpLosVaRLQ-hQ&usqp=CAU" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Noteng</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,66 @@
-import './App.css'
-import Home from './Pages/Home'
-import {BrowserRouter,Route,Routes} from 'react-router-dom'
+import React, { useState, useEffect } from 'react';
+import './App.css';
+import Home from './Pages/Home';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import ViewJob from './Pages/ViewJob';
+import NewPost from './Pages/NewPostPage';
+import UploadNewPosts from './Pages/UploadNewPosts';
+import SignUp from './Pages/SignUp';
+import Profile from './Pages/profile';
+import NewNotes from './Components/Notes/NewNotes';
+import ViewNote from './Components/Notes/ViewNote';
+import UploadVideo from './Pages/UploadVideo';
+import DiscoverPage from './Pages/DiscoverPage';
+import Splash from './Pages/Splash';
+import LoginPage from './Pages/LoginPage';
+import PostDetails from './Pages/PostDetails';
+import NewJob from './Components/Jobs/NewJob';
+
+
 function App() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [checkedLogin, setCheckedLogin] = useState(false);
+
+  useEffect(() => {
+    // Check local storage for login state
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loggedIn);
+    setCheckedLogin(true);
+  }, []); // Run only once on component mount
+
+  const handleLogin = () => {
+    setIsLoggedIn(true);
+    localStorage.setItem('isLoggedIn', 'true'); // Persist login state
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    localStorage.removeItem('isLoggedIn'); // Clear login state
+  };
+
   return (
-   <BrowserRouter>
-      <Routes>
-        <Route path='/' element={<Home/>}/>
-      </Routes>
-   </BrowserRouter>
+    <Router>
+      {checkedLogin && ( // Render the routes only after checking the login status
+        <Routes>
+          <Route path='/Home' element={isLoggedIn ? <Home /> : <Navigate to="/Splash" />} />
+          <Route path='/Splash' element={<Splash />} />
+          <Route path='/LoginPage' element={<LoginPage onLoginChange={handleLogin} />} />
+          <Route path='/SignUp' element={<SignUp />} />
+          <Route path='/CreatePost' element={isLoggedIn ? <NewPost /> : <Navigate to="/LoginPage" />} />
+          <Route path='/CreateJob' element={isLoggedIn ? <NewJob /> : <Navigate to="/LoginPage" />} />
+          <Route path='/ViewJob/:jobId' element={isLoggedIn ? <ViewJob /> : <Navigate to="/LoginPage" />} />
+          <Route path='/ViewNote/:noteId' element={isLoggedIn ? <ViewNote /> : <Navigate to="/LoginPage" />} />
+          <Route path='/UploadNewPosts' element={isLoggedIn ? <UploadNewPosts /> : <Navigate to="/LoginPage" />} />
+          <Route path='/PostDetails/:postId' element={isLoggedIn ? <PostDetails /> : <Navigate to="/LoginPage" />} />
+          <Route path='/Profile' element={isLoggedIn ? <Profile /> : <Navigate to="/LoginPage" />} />
+          <Route path='/CreateNote' element={isLoggedIn ? <NewNotes /> : <Navigate to="/LoginPage" />} />
+          <Route path='/UploadVideo' element={isLoggedIn ? <UploadVideo /> : <Navigate to="/LoginPage" />} />
+          <Route path='/DiscoverPage' element={isLoggedIn ? <DiscoverPage /> : <Navigate to="/LoginPage" />} />
+          <Route path='/' element={isLoggedIn ? <Home /> : <Navigate to="/Splash" />} />
+          <Route path='/post/:postId' element={isLoggedIn ? <PostDetails /> : <Navigate to="/LoginPage" />} />
+        </Routes>
+      )}
+    </Router>
   );
 }
 

diff --git a/src/Components/Discover/Cards.jsx b/src/Components/Discover/Cards.jsx
@@ -0,0 +1,89 @@
+import React,{useState,useEffect} from 'react';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
+import SmartphoneOutlinedIcon from '@mui/icons-material/SmartphoneOutlined';
+import axios from 'axios';
+
+
+
+function Cards() {
+    const[cardData,setCardData]=useState([]);
+  useEffect(()=>{
+    const fetchData=async()=>{
+      try{
+
+        const response=await axios.get('https://monilmeh.pythonanywhere.com//api/jobboard/',{
+          headers:{
+            'Authorization':'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzE4MjY5MzkxLCJpYXQiOjE3MTgyNDc3OTEsImp0aSI6ImI1NDU5NTYyOThhMDQwNGY4ZTkzN2JkYWM0MjRiNjYyIiwidXNlcl9pZCI6IjYwMDA0MjIwMjA3In0.3Tap7Xk9toixMMOwbnkgegqcg4vBZ-3WJvLlyoST97g'
+          }
+        });
+        const data=response.data.map((item)=>({
+          heading1:item.company,
+          heading2:item.job_title,
+          heading3:item.subtype,
+          body:item.requirements,
+          body1:item.description,
+          contact:item.contact_no,
+          icon:<CalendarTodayIcon className=" text-custom-blue " style={{width:'20px',height:'20px'}}  />,
+          time:item.duration_in_months,
+          timeicon:<AccessTimeOutlinedIcon className=" text-custom-blue  " style={{width:'20px',height:'20px'}}  />,
+          timelimit:item.location,
+          mobile:<SmartphoneOutlinedIcon className="h-2 w-2 text-custom-blue " style={{width:'20px',height:'20px'}} />,
+          mode:item.mode,
+          date:item.upload_time,
+
+
+        }));
+        setCardData(data);
+
+
+      }catch(error){
+        console.log('Error in fetching',error);
+      }
+    };
+    fetchData();
+  },[]);
+  return (
+    <div className='flex flex-col'>
+    <p className=' md:ml-6 md:justify-start mt-5 flex justify-center items-center'>
+      <span className='font-bold text-[35px]'>Explore Latest Job Opportunities</span>
+    </p>
+    <div className='ml-6  border-b-2'></div>
+    <div className='grid grid-cols-1 gap-5 m-10 md:grid-cols-2 md:gap-10'>
+      {cardData.map((data, i) => {
+        return <div className='flex justify-evenly mr-1 ml-1 md:mr-2 md:ml-2 ' key={i}>
+          <div className='border p-3 rounded-lg bg-gray-200 md:w-[100%]'>
+            <p className='font-bold '>{data.heading1}</p>
+            <p className='text-sm md:text-[18px]'>{data.heading2}</p>
+            <p className='text-sm md:text-[18px]'>{data.heading3}</p>
+            <p className=' text-sm border-b-[1px]  md:text-[16px]'>{data.body}</p>
+            <p className=' text-sm border-b-[1px]  md:text-[16px]'>{data.body1}</p>
+            <p className=' text-sm border-b-[1px] pb-3 border-custom-blue md:text-[16px]'>{data.contact}</p>
+            <div className='flex justify-between'>
+              <div className='flex items-center'>
+                {data.icon }
+                <p className='text-custom-blue text-[8px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{data.time}</p>
+              </div>
+              <div className='flex items-center'>
+                {data.timeicon}
+                <p className='text-custom-blue text-[8px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{data.timelimit}</p>
+              </div>
+              <div className='flex items-center'>
+                {data.mobile}
+                <p className='text-custom-blue text-[9px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{data.mode}</p>
+              </div>
+              <div className='flex items-center'>
+                <p className='text-custom-blue text-[9px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{data.date}</p>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      })}
+    </div>
+
+  </div>
+  );
+}
+
+export default Cards;
diff --git a/src/Components/Discover/Discover.jsx b/src/Components/Discover/Discover.jsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import Jobs from './Jobs';
+import Notes from './Notes';
+import Videos from './Videos';
+import Posts from './Posts';
+import { ReactComponent as BriefcaseIcon } from '../../assets/briefcase-alt_svgrepo.com.svg';
+import { ReactComponent as NotesIcon } from '../../assets/doc_svgrepo.com.svg';
+import { ReactComponent as VideosIcon } from '../../assets/video_svgrepo.com.svg';
+import { ReactComponent as PostsIcon } from '../../assets/post_svgrepo.com.svg';
+
+function Discover() {
+  const [selectedCategory, setSelectedCategory] = useState('Jobs');
+
+  const handleCategoryClick = (category) => {
+    setSelectedCategory(category);
+  };
+
+  return (
+    <div className='w-full'>
+      <div className='flex flex-col items-center'>
+        <p className='ml-24 font-bold text-[45px] border-b-2 w-full'>Discover {selectedCategory}</p>
+        <hr></hr>
+        <div className='flex flex-col md:flex-row w-full pb-4 justify-center'> 
+          <button
+            className={`flex items-center ml-3 mt-4 px-10 py-1 rounded-lg ${selectedCategory === 'Jobs' ? 'bg-custom-blue text-white' : 'bg-custom-gray'}`}
+            onClick={() => handleCategoryClick('Jobs')}
+          >
+            <BriefcaseIcon className="mr-2" />
+            Jobs
+          </button>
+          <button
+            className={`flex items-center ml-3 mt-4 px-10 py-1 rounded-lg ${selectedCategory === 'Notes' ? 'bg-custom-blue text-white' : 'bg-custom-gray'}`}
+            onClick={() => handleCategoryClick('Notes')}
+          >
+            <NotesIcon className="mr-2" />
+            Notes
+          </button>
+          <button
+            className={`flex items-center ml-3 mt-4 px-10 py-1 rounded-lg ${selectedCategory === 'Videos' ? 'bg-custom-blue text-white' : 'bg-custom-gray'}`}
+            onClick={() => handleCategoryClick('Videos')}
+          >
+            <VideosIcon className="mr-2" />
+            Videos
+          </button>
+          <button
+            className={`flex items-center ml-3 mt-4 px-10 py-1 rounded-lg ${selectedCategory === 'Posts' ? 'bg-custom-blue text-white' : 'bg-custom-gray'}`}
+            onClick={() => handleCategoryClick('Posts')}
+          >
+            <PostsIcon className="mr-2" />
+            Posts
+          </button>
+        </div>
+      </div>
+
+      <div className='flex-grow w-full'>
+        {selectedCategory === 'Jobs' && <Jobs />}
+        {selectedCategory === 'Notes' && <Notes />}
+        {selectedCategory === 'Videos' && <Videos />}
+        {selectedCategory === 'Posts' && <Posts />}
+      </div>
+    </div>
+  );
+}
+
+export default Discover;
diff --git a/src/Components/Discover/JobCard.jsx b/src/Components/Discover/JobCard.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
+import SmartphoneOutlinedIcon from '@mui/icons-material/SmartphoneOutlined';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+function JobCard({ job, onDelete }) {
+  const navigate = useNavigate();
+
+  const handleCardClick = () => {
+    navigate(`/ViewJob/${job.job_id}`);
+  };
+
+  const handleDeleteClick = (e) => {
+    e.stopPropagation(); // Prevent navigation when delete icon is clicked
+    onDelete(job.job_id);
+  };
+
+  return (
+    <div className='border p-4 rounded-lg shadow bg-gray-300 max-w-full cursor-pointer' onClick={handleCardClick}>
+      <div className='relative'>
+        <div className='absolute top-0 right-0 z-10'>
+          <DeleteIcon className='text-[#394dfd] cursor-pointer hover:text-red-500' onClick={handleDeleteClick} />
+        </div>
+        <h2 className='font-bold'>{job.company}</h2>
+        <p className='text-sm md:text-[18px]'>{job.job_title}</p>
+        <p className='mt-2 text-sm border-b-[1px] pb-3 border-custom-blue md:text-[16px]'>{job.description.substring(0, 60)}...</p>
+        <div className='flex justify-between mt-2'>
+          <div className='flex items-center'>
+            <CalendarTodayIcon className='text-custom-blue' style={{ width: '20px', height: '20px' }} />
+            <p className='text-custom-blue text-[8px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{job.duration_in_months} months</p>
+          </div>
+          <div className='flex items-center'>
+            <AccessTimeOutlinedIcon className='text-custom-blue' style={{ width: '20px', height: '20px' }} />
+            <p className='text-custom-blue text-[8px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{job.subtype}</p>
+          </div>
+          <div className='flex items-center'>
+            <SmartphoneOutlinedIcon className='text-custom-blue' style={{ width: '20px', height: '20px' }} />
+            <p className='text-custom-blue text-[9px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{job.mode}</p>
+          </div>
+          <div className='flex items-center'>
+            <p className='text-custom-blue text-[9px] md:text-[10px] lg:text-[12px] font-bold md:font-normal'>{new Date(job.upload_time).toLocaleDateString()}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default JobCard;
diff --git a/src/Components/Discover/Jobs.jsx b/src/Components/Discover/Jobs.jsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import JobCard from './JobCard';
+
+function Jobs() {
+  const [jobs, setJobs] = useState([]);
+  const token = localStorage.getItem('token');
+  console.log(token);
+  useEffect(() => {
+    fetch('https://monilmeh.pythonanywhere.com/api/jobboard/', {
+      headers: {
+        'Authorization': `Bearer ${token}` 
+      }
+    })
+      .then(response => response.json())
+      .then(data => setJobs(data))
+      .catch(error => console.error('Error fetching jobs:', error));
+  }, [token]);
+
+  const handleDelete = (jobId) => {
+    fetch(`https://monilmeh.pythonanywhere.com/api/jobboard/${jobId}/`, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Bearer ${token}` 
+      }
+    })
+      .then(response => {
+        if (response.ok) {
+          setJobs(jobs.filter(job => job.job_id !== jobId));
+        } else {
+          console.error('Error deleting job');
+        }
+      })
+      .catch(error => console.error('Error deleting job:', error));
+  };
+  console.log(jobs);
+
+  return (
+    <div className='m-6 grid grid-cols-1 md:grid-cols-2 gap-4'>
+      {jobs.length === 0 ? (
+        <h1 className='flex justify-center items-center self-center font-semibold text-xl md:text-2xl lg:text-3xl'>Please wait jobs openings migth be loading...</h1>
+      ) : (
+        jobs.map((job) => (
+          <JobCard key={job.job_id} job={job} onDelete={handleDelete} />
+        ))
+      )}
+    </div>
+  );
+}
+export default Jobs;