From 9c73b4e6de7da541c8f224c71aeb3c410eb9ab1f Mon Sep 17 00:00:00 2001 From: Subru-37 Date: Thu, 28 Mar 2024 18:34:07 +0530 Subject: [PATCH] fixed: drawer closed on backdropClick and removed redundant useEffect --- src/Firebase/firebase.js | 3 +- src/Pages/Developers/Developers.js | 33 ++++++------ src/Pages/Developers/Drawer.js | 87 ++++++++++++------------------ src/Pages/Projects/Projects.js | 19 ++----- src/contexts/ProjectContext.js | 34 ++++++++++-- 5 files changed, 89 insertions(+), 87 deletions(-) diff --git a/src/Firebase/firebase.js b/src/Firebase/firebase.js index 37fd6aa..6361a0a 100644 --- a/src/Firebase/firebase.js +++ b/src/Firebase/firebase.js @@ -502,7 +502,7 @@ export const getProjects = async () => { const response = await axios.get( `${process.env.REACT_APP_BACKEND_URL}/api/project?key=${Math.random()}` ); - // // console.log(response.data) + // console.log(response.data) return response.data; }; export const getDevelopers = async () => { @@ -730,6 +730,7 @@ export const addSkills = async (skill) => { export const getTags = async () => { const data = []; const tags = await firebase.firestore().collection("tags").doc("tags").get(); + console.log(tags) // .then((snapshot) => { // if (snapshot.docs.length > 0) { // snapshot.docs.forEach((doc) => { diff --git a/src/Pages/Developers/Developers.js b/src/Pages/Developers/Developers.js index 6a8ad73..45e41bb 100644 --- a/src/Pages/Developers/Developers.js +++ b/src/Pages/Developers/Developers.js @@ -63,9 +63,9 @@ const Developers = () => { setBranch, yop, setYop, - width, + // width, currentWidth, - setcurrentWidth, + // setcurrentWidth, } = useContext(ThemeContext); const [selectedSkills, setSelectedSkills] = useState([]); const [pages, setPages] = useState(0); @@ -94,15 +94,15 @@ const Developers = () => { setBranch(oldBranch); }; - useEffect(() => { - window.addEventListener("resize", changedWidth); - function changedWidth(e) { - setcurrentWidth(window.innerWidth); - } - return () => { - window.removeEventListener("resize", changedWidth); - }; - }, [width, setcurrentWidth]); + // useEffect(() => { + // window.addEventListener("resize", changedWidth); + // function changedWidth(e) { + // setcurrentWidth(window.innerWidth); + // } + // return () => { + // window.removeEventListener("resize", changedWidth); + // }; + // }, [width, setcurrentWidth]); // const getDevs = async () => { // // await getDevelopers().then(async function (snapshot) { // // let messageObject = snapshot.docs(); @@ -142,7 +142,7 @@ const Developers = () => { developers === null ) { // console.log(developers) - console.log("loading"); + // console.log("loading"); } else { filterDevelopers( developers, @@ -155,7 +155,7 @@ const Developers = () => { setLoading1 ); } - console.log("running"); + // console.log("running"); }, [selectedSkills, branch, yop, page]); const history = useHistory(); @@ -163,6 +163,7 @@ const Developers = () => { const handleClick = (u) => { history.push(`/developers/${u.id}`); }; + const [open, setOpen] = React.useState(false); if (loading || loading1 || users === null) { return ( @@ -178,7 +179,7 @@ const Developers = () => {
@@ -186,7 +187,7 @@ const Developers = () => {
1000 ? `calc(100vw - ${width}px)` : "100vw", + width: "100vw", transition: "0.2s", }} > @@ -195,6 +196,8 @@ const Developers = () => { setSelectedSkills={setSelectedSkills} addBranch={addBranch} addYop={addYop} + open={open} + setOpen={setOpen} />

diff --git a/src/Pages/Developers/Drawer.js b/src/Pages/Developers/Drawer.js index 0368139..f6955b5 100644 --- a/src/Pages/Developers/Drawer.js +++ b/src/Pages/Developers/Drawer.js @@ -4,8 +4,7 @@ import Drawer from "@mui/material/Drawer"; import Buttons from "./Buttons"; import Divider from "@mui/material/Divider"; import IconButton from "@mui/material/IconButton"; -import MenuIcon from "@mui/icons-material/Menu"; -import FilterAltIcon from '@mui/icons-material/FilterAlt'; +import FilterAltIcon from "@mui/icons-material/FilterAlt"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import useMediaQuery from "@mui/material/useMediaQuery"; @@ -14,9 +13,8 @@ import "./Developers.scss"; import { TextField, Typography } from "@mui/material"; import Autocomplete from "@mui/material/Autocomplete"; import { ThemeContext } from "../../App"; -import { useRef } from "react"; - -const typeDevs = ["Skills", "Projects", "Developers"]; +import { ProjectContext } from "../../contexts/ProjectContext"; +import { useContext } from "react"; const DrawerHeader = styled("div")(({ theme }) => ({ display: "flex", alignItems: "center", @@ -52,13 +50,13 @@ export default function PersistentDrawerLeft({ addBranch, addYop, page, + open, + setOpen, }) { - const [skills, setSkills] = React.useState([]); - const [tags, setTags] = React.useState([]); const { branch, setBranch, yop, setYop, setWidth } = React.useContext( ThemeContext ); - const widthRef = useRef(); + const {tags, skills} = useContext(ProjectContext) // const [branch, setBranch] = React.useState('') // const [yop, setYop] = React.useState('') @@ -68,23 +66,7 @@ export default function PersistentDrawerLeft({ "Javascript", "C++", ]); - const getAbilities = async () => { - await getSkills().then(async (snapshot) => { - setSkills(Object.values(snapshot.data())); - }); - }; - const getTagDetails = async () => { - await getTags().then(async (snapshot) => { - setTags(Object.values(snapshot.data())); - }); - }; - React.useEffect(() => { - getAbilities(); - }, []); - React.useEffect(() => { - getTagDetails(); - }, []); // const [renderedFilters, setRenderedFilters] = useState([]); // useEffect(() => { @@ -111,21 +93,16 @@ export default function PersistentDrawerLeft({ : "25vw"; const theme = useTheme(); - const [open, setOpen] = React.useState(false); const [search, setSearch] = React.useState(""); const handleDrawerOpen = () => { setOpen(true); }; - React.useEffect(() => { - if (open) { - setWidth(widthRef.current.offsetWidth); - } else { - setWidth(0); - } - }, [drawerWidth, open, setWidth]); - const handleDrawerClose = () => { + const handleDrawerClose = (event, reason) => { + if (reason === "backdropClick") { + setOpen(false); + } setOpen(false); }; const addSkill = (skill) => { @@ -160,10 +137,10 @@ export default function PersistentDrawerLeft({ setSelectedTags(oldTags); }; - const clearFilter= () => { + const clearFilter = () => { setCleared(!cleared); // // console.log(selectedSkills) - const page = window.location.href.split("/")[3] + const page = window.location.href.split("/")[3]; // // console.log(page) if (page === "projects") { setSelectedSkills([]); @@ -180,36 +157,37 @@ export default function PersistentDrawerLeft({ return ( <> - - Filter + + Filter + - - + { + if (reason === "backdropClick") { + setOpen(false); + } + }} > @@ -264,8 +247,8 @@ export default function PersistentDrawerLeft({ fontSize: "16px", borderRadius: "5px", backgroundColor: "transparent", - border:'2px solid white', - fontStyle:'Nunito', + border: "2px solid white", + fontStyle: "Nunito", // hover: "#9e0000", }} onClick={() => { diff --git a/src/Pages/Projects/Projects.js b/src/Pages/Projects/Projects.js index 4389d71..b264d79 100644 --- a/src/Pages/Projects/Projects.js +++ b/src/Pages/Projects/Projects.js @@ -30,17 +30,6 @@ const Projects = () => { // useEffect(() => { // getWorks(); - // }, [projects]); - const { currentWidth, setcurrentWidth, width } = useContext(ThemeContext); - useEffect(() => { - window.addEventListener("resize", changedWidth); - function changedWidth(e) { - setcurrentWidth(window.innerWidth); - } - return () => { - window.removeEventListener("resize", changedWidth); - }; - }, [width, setcurrentWidth]); const filterProjects = () => { let filteredProjects = projects; if (selectedSkills.length > 0 && selectedTags.length > 0) { @@ -98,7 +87,7 @@ const Projects = () => { const handleClick = (p) => { history.push(`/projects/${p.id}`); }; - + const [open, setOpen] = useState(false); if (loading) { return (
@@ -112,7 +101,7 @@ const Projects = () => {
@@ -120,7 +109,7 @@ const Projects = () => {
1000 ? `calc(100vw - ${width}px)` : "100vw", + width: "100vw", transition: "0.2s", }} > @@ -130,6 +119,8 @@ const Projects = () => { selectedTags={selectedTags} setSelectedTags={setSelectedTags} page={"Projects"} + open={open} + setOpen={setOpen} />

{ - const history = useHistory() + const history = useHistory(); const [projects, setProjects] = useState([]); const [selectedProject, setSelectedProject] = useState(); const [allProjects, setAllProjects] = useState([]); const [developers, setDevelopers] = useState(null); const [jobs, setJobs] = useState(null); - const [allJobs, setAllJobs] = useState([]) + const [allJobs, setAllJobs] = useState([]); const [selectedDevelopers, setSelectedDevelopers] = useState(); const [profile, setProfile] = useState(null); const [allDevelopers, setAllDevelopers] = useState([]); @@ -26,6 +28,8 @@ export const ProjectProvider = ({ children }) => { const [requestsRecieved, setRequestsRecieved] = useState([]); const [loading, setLoading] = useState(false); const [devHash, setDevHash] = useState({}); + const [skills, setSkills] = useState([]); + const [tags, setTags] = useState([]); const [companyDetails, setCompanyDetails] = useState({ // name: profile?.name || "", description: "", @@ -107,14 +111,13 @@ export const ProjectProvider = ({ children }) => { getUser(currentUser?.uid).then((profile) => { setProfile(profile); // // console.log(snapshot.data()) - if (profile?.role === "Organization"){ - history.push('/profile') + if (profile?.role === "Organization") { + history.push("/profile"); } }); } // setProfile(profileUser); setLoading(false); - } }; let devMap = {}; @@ -179,6 +182,16 @@ export const ProjectProvider = ({ children }) => { setLoading(false); }); }; + const getAbilities = async () => { + await getSkills().then(async (snapshot) => { + setSkills(Object.values(snapshot.data())); + }); + }; + const getTagDetails = async () => { + await getTags().then(async (snapshot) => { + setTags(Object.values(snapshot.data())); + }); + }; useEffect(() => { fetchData(); fetchDevelpersData(); @@ -190,6 +203,13 @@ export const ProjectProvider = ({ children }) => { fetchRequestsRecieved(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentUser]); + useEffect(() => { + getAbilities(); + }, []); + + useEffect(() => { + getTagDetails(); + }, []); const fetchRequests = async () => { if (currentUser) { setLoading(true); @@ -261,6 +281,10 @@ export const ProjectProvider = ({ children }) => { setCompanyDetails, allJobs, setJobs, + skills, + setSkills, + tags, + setTags }} > {children}