From a7e8842e6664cc66b4d29c553c5d91270d022118 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sat, 25 May 2024 10:32:08 +0530 Subject: [PATCH 1/6] created drop down menu for responsive devices and hide that menu in large screens --- src/components/Pages/MainPage.jsx | 160 +++++++++++++++++++----------- src/components/Pages/mainpage.css | 17 ++++ 2 files changed, 121 insertions(+), 56 deletions(-) diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx index 7340ed26..9c4a6050 100644 --- a/src/components/Pages/MainPage.jsx +++ b/src/components/Pages/MainPage.jsx @@ -1,66 +1,114 @@ -import React, { useEffect, useState } from 'react'; -import ProjectCards from '../Cards/ProjectCards'; -import './mainpage.css'; -import Dashboard from './Dashboard'; +import React, { useEffect, useState } from "react"; +import ProjectCards from "../Cards/ProjectCards"; +import "./mainpage.css"; +import Dashboard from "./Dashboard"; const MainPage = (props) => { - const { category, routes } = props; - if (category === '') return ; + const { category, routes } = props; + if (category === "") return ; - const [projectsData, setProjectsData] = useState([]); - const [tag, setTag] = useState('All'); + const [projectsData, setProjectsData] = useState([]); + const [tag, setTag] = useState("All"); - const getName = (category) => { - let filtered = routes.filter(obj => obj.path === `/${category}`); - return filtered[0].name; - } - const getTech = (category) => { - let filtered = routes.filter(obj => obj.path === `/${category}`); - return filtered[0].tech; - } + const getName = (category) => { + let filtered = routes.filter((obj) => obj.path === `/${category}`); + return filtered[0].name; + }; - useEffect(() => { - const fetchData = async () => { - props.setProgress(10); - try { - const response = await fetch(`https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json`); - if (!response.ok) { - throw new Error('Failed to fetch projects data'); - } - props.setProgress(30); - const data = await response.json(); - props.setProgress(50); - let filteredData = data; - if (tag !== 'All') { - filteredData = data.filter(project => project.tag === tag); - } - props.setProgress(80); - setProjectsData(filteredData); - } catch (error) { - console.error('Error fetching projects data:', error); - } - props.setProgress(100); - }; - fetchData(); - }, [tag]); + const getTech = (category) => { + let filtered = routes.filter((obj) => obj.path === `/${category}`); + return filtered[0].tech; + }; - const handleTagClick = (selectedTag) => { - setTag(selectedTag); - }; + useEffect(() => { + const fetchData = async () => { + props.setProgress(10); + try { + const response = await fetch( + `https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json` + ); + if (!response.ok) { + throw new Error("Failed to fetch projects data"); + } + props.setProgress(30); + const data = await response.json(); + props.setProgress(50); + let filteredData = data; + if (tag !== "All") { + filteredData = data.filter((project) => project.tag === tag); + } + props.setProgress(80); + setProjectsData(filteredData); + } catch (error) { + console.error("Error fetching projects data:", error); + } + props.setProgress(100); + }; + fetchData(); + }, [tag, category, props]); - return ( - <> -

{`${getName(category)} Projects`}

-
- - - - -
+ const handleTagClick = (selectedTag) => { + setTag(selectedTag); + }; - - - ); -} + return ( + <> +

{`${getName(category)} Projects`}

+ +
+
+ + + + +
+ +
+ +
+
+ + + + ); +}; export default MainPage; diff --git a/src/components/Pages/mainpage.css b/src/components/Pages/mainpage.css index e69de29b..e9d7043c 100644 --- a/src/components/Pages/mainpage.css +++ b/src/components/Pages/mainpage.css @@ -0,0 +1,17 @@ +/* mainpage.css */ +.button-group { + display: flex; +} + +.dropdown { + display: none; +} + +@media (max-width: 768px) { + .button-group { + display: none; + } + .dropdown { + display: block; + } +} From ccaf44b7ae1cd42a8cfc1694c9a541a88fa9368c Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sat, 25 May 2024 11:59:30 +0530 Subject: [PATCH 2/6] update style of the drop down and resolve multiple loading --- src/components/Pages/MainPage.jsx | 61 +++++++++++++++++++------------ src/components/Pages/mainpage.css | 49 +++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 24 deletions(-) diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx index 9c4a6050..56fcface 100644 --- a/src/components/Pages/MainPage.jsx +++ b/src/components/Pages/MainPage.jsx @@ -4,10 +4,11 @@ import "./mainpage.css"; import Dashboard from "./Dashboard"; const MainPage = (props) => { - const { category, routes } = props; + const { category, routes, setProgress } = props; if (category === "") return ; const [projectsData, setProjectsData] = useState([]); + const [filteredData, setFilteredData] = useState([]); const [tag, setTag] = useState("All"); const getName = (category) => { @@ -22,7 +23,7 @@ const MainPage = (props) => { useEffect(() => { const fetchData = async () => { - props.setProgress(10); + setProgress(10); try { const response = await fetch( `https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json` @@ -30,27 +31,45 @@ const MainPage = (props) => { if (!response.ok) { throw new Error("Failed to fetch projects data"); } - props.setProgress(30); + setProgress(30); const data = await response.json(); - props.setProgress(50); - let filteredData = data; - if (tag !== "All") { - filteredData = data.filter((project) => project.tag === tag); - } - props.setProgress(80); - setProjectsData(filteredData); + setProgress(50); + setProjectsData(data); + setFilteredData(data); + setProgress(80); } catch (error) { console.error("Error fetching projects data:", error); } - props.setProgress(100); + setProgress(100); }; fetchData(); - }, [tag, category, props]); + }, [category, setProgress]); + + useEffect(() => { + if (tag === "All") { + setFilteredData(projectsData); + } else { + setFilteredData(projectsData.filter((project) => project.tag === tag)); + } + }, [tag, projectsData]); const handleTagClick = (selectedTag) => { setTag(selectedTag); }; + useEffect(() => { + const dropdown = document.querySelector(".custom-dropdown"); + if (dropdown) { + const colorMap = { + Basic: "green", + Intermediate: "yellow", + Advanced: "red", + All: "blue", + }; + dropdown.style.backgroundColor = colorMap[tag] || "blue"; + } + }, [tag]); + return ( <>

{`${getName(category)} Projects`}

@@ -59,27 +78,21 @@ const MainPage = (props) => {
- + ); }; diff --git a/src/components/Pages/mainpage.css b/src/components/Pages/mainpage.css index e9d7043c..8b85047d 100644 --- a/src/components/Pages/mainpage.css +++ b/src/components/Pages/mainpage.css @@ -5,6 +5,55 @@ .dropdown { display: none; + background: none; +} + +/* Main Page Styles */ + +.text-end { + text-align: end; +} + +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.mx-3 { + margin-left: 1rem; + margin-right: 1rem; +} + +.d-flex { + display: flex; +} + +.justify-content-end { + justify-content: flex-end; +} + +.button-group button { + margin: 0 0.5rem; +} + +.custom-dropdown { + background-color: #222; + color: #fff; + border-radius: 4px; + padding: 0.5rem; + font-size: 1rem; + transition: all 0.3s ease; +} + +.custom-dropdown:focus { + border-color: #888; + outline: none; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); +} + +.custom-dropdown option { + background-color: #222; + color: #fff; } @media (max-width: 768px) { From 89c3c13ad94e3433672393fb9ea165ce79760f48 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sat, 25 May 2024 18:35:26 +0530 Subject: [PATCH 3/6] update dropdown --- src/components/Pages/MainPage.jsx | 48 +++++++------------------------ 1 file changed, 11 insertions(+), 37 deletions(-) diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx index 56fcface..95bd69c1 100644 --- a/src/components/Pages/MainPage.jsx +++ b/src/components/Pages/MainPage.jsx @@ -64,7 +64,7 @@ const MainPage = (props) => { Basic: "green", Intermediate: "yellow", Advanced: "red", - All: "blue", + All: "#1E90FF", }; dropdown.style.backgroundColor = colorMap[tag] || "blue"; } @@ -72,40 +72,17 @@ const MainPage = (props) => { return ( <> -

{`${getName(category)} Projects`}

- -
-
- - - - -
+ +

{`${getName(category)} Projects`}

+
+ + + + +
+ +
-
- - ); }; From 2c4123dcafee20458be51b1c7c734f548e2018a7 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sat, 25 May 2024 18:39:10 +0530 Subject: [PATCH 4/6] update style --- src/components/Pages/mainpage.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Pages/mainpage.css b/src/components/Pages/mainpage.css index 8b85047d..c10b8d22 100644 --- a/src/components/Pages/mainpage.css +++ b/src/components/Pages/mainpage.css @@ -6,6 +6,8 @@ .dropdown { display: none; background: none; + width: 150px; + margin-left: auto; } /* Main Page Styles */ From 450d17bf29a66e35c65b4da45327af99bb0ccfd1 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sun, 26 May 2024 14:00:08 +0530 Subject: [PATCH 5/6] filter working --- src/components/Pages/MainPage.jsx | 41 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx index 95bd69c1..cda0f9fa 100644 --- a/src/components/Pages/MainPage.jsx +++ b/src/components/Pages/MainPage.jsx @@ -72,28 +72,27 @@ const MainPage = (props) => { return ( <> - -

{`${getName(category)} Projects`}

-
- - - - -
+

{`${getName(category)} Projects`}

+
+ + + + +
- - -
- -
+ + +
+ +
); }; From de9b04f341518f7e12f508f7d67ab1ce915e75b6 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Fri, 31 May 2024 15:24:53 +0530 Subject: [PATCH 6/6] update dropdown style --- src/components/Pages/MainPage.jsx | 5 +++-- src/components/Pages/mainpage.css | 5 +++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx index cda0f9fa..e1a58a9c 100644 --- a/src/components/Pages/MainPage.jsx +++ b/src/components/Pages/MainPage.jsx @@ -66,13 +66,14 @@ const MainPage = (props) => { Advanced: "red", All: "#1E90FF", }; - dropdown.style.backgroundColor = colorMap[tag] || "blue"; + dropdown.style.border = '1px solid '+colorMap[tag] || "blue"; + dropdown.style.color = colorMap[tag] || "blue"; } }, [tag]); return ( <> -

{`${getName(category)} Projects`}

+

{`${getName(category)} Projects`}

diff --git a/src/components/Pages/mainpage.css b/src/components/Pages/mainpage.css index c10b8d22..eaf43175 100644 --- a/src/components/Pages/mainpage.css +++ b/src/components/Pages/mainpage.css @@ -66,3 +66,8 @@ display: block; } } + + +.dropdown select{ + background: none; +} \ No newline at end of file