From e849394fd0d4f6aaabb8cf65a10d7ed917efc534 Mon Sep 17 00:00:00 2001 From: SeniorDev Date: Sun, 26 May 2024 21:40:09 -0400 Subject: [PATCH 1/5] I complete draggable modal --- components/Core/DraggableModal.tsx | 4 +- components/Core/Icon/resolver.tsx | 3 + components/Navbar/Navbar.tsx | 13 +++- .../Pages/ContactPage/ContactContent.tsx | 2 +- .../Pages/EmployeePage/EmployeeContent.tsx | 69 +++++++++++++++++++ .../Pages/EmployeePage/EmployeePage.tsx | 17 +++++ components/Pages/EmployeePage/index.tsx | 3 + hooks/useClickOutsideSelect.tsx | 28 ++++++++ lib/screens.tsx | 6 ++ pages/employee/index.tsx | 5 ++ 10 files changed, 145 insertions(+), 5 deletions(-) create mode 100644 components/Pages/EmployeePage/EmployeeContent.tsx create mode 100644 components/Pages/EmployeePage/EmployeePage.tsx create mode 100644 components/Pages/EmployeePage/index.tsx create mode 100644 hooks/useClickOutsideSelect.tsx create mode 100644 pages/employee/index.tsx diff --git a/components/Core/DraggableModal.tsx b/components/Core/DraggableModal.tsx index fa630d37..7f32fede 100644 --- a/components/Core/DraggableModal.tsx +++ b/components/Core/DraggableModal.tsx @@ -21,7 +21,7 @@ const DraggableModal = ({ children, href, handleClose, isVisible = null }) => { absolute left-0 top-0 z-[1]" onClick={handleClose} /> - +
+
+
diff --git a/components/Pages/ContactPage/ContactContent.tsx b/components/Pages/ContactPage/ContactContent.tsx index 80bf82b0..1930be40 100644 --- a/components/Pages/ContactPage/ContactContent.tsx +++ b/components/Pages/ContactPage/ContactContent.tsx @@ -22,7 +22,7 @@ const ContactContent = ({ isPopup = false }) => { {screenStatus === SCREEN.INPUT_MODE && } {screenStatus === SCREEN.SUCCESS && }
- +
) diff --git a/components/Pages/EmployeePage/EmployeeContent.tsx b/components/Pages/EmployeePage/EmployeeContent.tsx new file mode 100644 index 00000000..921dc738 --- /dev/null +++ b/components/Pages/EmployeePage/EmployeeContent.tsx @@ -0,0 +1,69 @@ +import Media from "@/components/Core/Media" +import useClickOutsideSelect from "@/hooks/useClickOutsideSelect" +import { useState } from "react" +import Icon from "@/components/Core/Icon" +import RecBar from "../../RecBar" + +const EmployeeContent = ({ isPopup = false }) => { + const { selectRef, setIsVisibleSelect, isVisibleSelect } = useClickOutsideSelect() + + const milestones = ["#Milestone 1", "#Milestone 2", "#Milestone 3"] + + const [selectedValue, setSelectedValue] = useState(milestones[0]) + + const handleClick = (value) => { + setSelectedValue(value) + setIsVisibleSelect(!isVisibleSelect) + } + + return ( +
+
+
+ +

Employee ID: heno.eth

+

Points: 111

+
+ + {isVisibleSelect && ( +
+ {milestones.map((milestone) => ( + + ))} +
+ )} +
+
+ +
+
+ ) +} + +export default EmployeeContent diff --git a/components/Pages/EmployeePage/EmployeePage.tsx b/components/Pages/EmployeePage/EmployeePage.tsx new file mode 100644 index 00000000..4720411a --- /dev/null +++ b/components/Pages/EmployeePage/EmployeePage.tsx @@ -0,0 +1,17 @@ +import useIsMobile from "../../../hooks/useIsMobile" +import Layout from "../../Layout" +import SeoHead from "../../SeoHead" +import EmployeeContent from "./EmployeeContent" + +const EmployeePage = () => { + const isMobile = useIsMobile() + + return ( + + + + + ) +} + +export default EmployeePage diff --git a/components/Pages/EmployeePage/index.tsx b/components/Pages/EmployeePage/index.tsx new file mode 100644 index 00000000..cdf96171 --- /dev/null +++ b/components/Pages/EmployeePage/index.tsx @@ -0,0 +1,3 @@ +import EmployeePage from "./EmployeePage" + +export default EmployeePage diff --git a/hooks/useClickOutsideSelect.tsx b/hooks/useClickOutsideSelect.tsx new file mode 100644 index 00000000..8f98701f --- /dev/null +++ b/hooks/useClickOutsideSelect.tsx @@ -0,0 +1,28 @@ +import { useEffect, useRef, useState } from "react" + +const useClickOutsideSelect = () => { + const selectRef = useRef() as any + const [isVisibleSelect, setIsVisibleSelect] = useState(false) + + useEffect(() => { + const handleClose = (e) => { + if (selectRef.current && !selectRef.current.contains(e.target)) setIsVisibleSelect(false) + } + + document.addEventListener("mousedown", handleClose) + document.addEventListener("touchstart", handleClose) + + return () => { + document.removeEventListener("mousedown", handleClose) + document.removeEventListener("touchstart", handleClose) + } + }, [selectRef]) + + return { + isVisibleSelect, + setIsVisibleSelect, + selectRef, + } +} + +export default useClickOutsideSelect diff --git a/lib/screens.tsx b/lib/screens.tsx index 6a3936df..531ee7c8 100644 --- a/lib/screens.tsx +++ b/lib/screens.tsx @@ -1,3 +1,4 @@ +import EmployeeContent from "@/components/Pages/EmployeePage/EmployeeContent" import MusicContent from "../components/Pages/MusicPage/MusicContent" import AboutContent from "../components/Pages/AboutPage/AboutContent" import PressContent from "../components/Pages/PressPage/PressContent" @@ -30,4 +31,9 @@ export const SCREENS = { href: "/contact", screen: , }, + EMPLOYEE_SCREEN: { + screenName: "EMPLOYEE_SCREEN", + href: "/employee", + screen: , + }, } diff --git a/pages/employee/index.tsx b/pages/employee/index.tsx new file mode 100644 index 00000000..a15826c4 --- /dev/null +++ b/pages/employee/index.tsx @@ -0,0 +1,5 @@ +import EmployeePage from "@/components/Pages/EmployeePage" + +const Employee = () => + +export default Employee From b594d13a0213c6e8aa2adf7cd66ac5afd7226218 Mon Sep 17 00:00:00 2001 From: SeniorDev Date: Sun, 26 May 2024 21:45:50 -0400 Subject: [PATCH 2/5] I add employee provider --- components/Layout/index.tsx | 5 +++- .../Pages/EmployeePage/EmployeeContent.tsx | 8 +++--- hooks/useEmployeeData.tsx | 14 ++++++++++ providers/EmployeeProvider.tsx | 27 +++++++++++++++++++ 4 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 hooks/useEmployeeData.tsx create mode 100644 providers/EmployeeProvider.tsx diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index 37989e3e..76b004b0 100644 --- a/components/Layout/index.tsx +++ b/components/Layout/index.tsx @@ -1,6 +1,7 @@ import LoadingPage from "@/components/LoadingPage" import ContactProvider from "@/providers/ContactProvider" import { usePageLoad } from "@/providers/PageLoadProvider" +import EmployeeProvider from "@/providers/EmployeeProvider" import BaseLayout from "./BaseLayout" import MobileLayout from "./MobileLayout" import { ILayout } from "./types" @@ -20,7 +21,9 @@ function Layout({ children, type }: ILayoutFactory) { return ( - {entered ? {children} : } + + {entered ? {children} : } + ) } diff --git a/components/Pages/EmployeePage/EmployeeContent.tsx b/components/Pages/EmployeePage/EmployeeContent.tsx index 921dc738..fbb72c0f 100644 --- a/components/Pages/EmployeePage/EmployeeContent.tsx +++ b/components/Pages/EmployeePage/EmployeeContent.tsx @@ -1,15 +1,13 @@ import Media from "@/components/Core/Media" import useClickOutsideSelect from "@/hooks/useClickOutsideSelect" -import { useState } from "react" import Icon from "@/components/Core/Icon" +import { useEmployee } from "@/providers/EmployeeProvider" +import { milestones } from "@/hooks/useEmployeeData" import RecBar from "../../RecBar" const EmployeeContent = ({ isPopup = false }) => { const { selectRef, setIsVisibleSelect, isVisibleSelect } = useClickOutsideSelect() - - const milestones = ["#Milestone 1", "#Milestone 2", "#Milestone 3"] - - const [selectedValue, setSelectedValue] = useState(milestones[0]) + const { selectedValue, setSelectedValue } = useEmployee() const handleClick = (value) => { setSelectedValue(value) diff --git a/hooks/useEmployeeData.tsx b/hooks/useEmployeeData.tsx new file mode 100644 index 00000000..7813ef7a --- /dev/null +++ b/hooks/useEmployeeData.tsx @@ -0,0 +1,14 @@ +import { useState } from "react" + +export const milestones = ["#Milestone 1", "#Milestone 2", "#Milestone 3"] + +const useEmployeeData = () => { + const [selectedValue, setSelectedValue] = useState(milestones[0]) + + return { + setSelectedValue, + selectedValue, + } +} + +export default useEmployeeData diff --git a/providers/EmployeeProvider.tsx b/providers/EmployeeProvider.tsx new file mode 100644 index 00000000..ba6b107e --- /dev/null +++ b/providers/EmployeeProvider.tsx @@ -0,0 +1,27 @@ +import { createContext, useContext, useMemo } from "react" +import useEmployeeData from "@/hooks/useEmployeeData" + +const EmployeeContext = createContext(null) + +const EmployeeProvider = ({ children }) => { + const employeeData = useEmployeeData() + + const value = useMemo( + () => ({ + ...employeeData, + }), + [employeeData], + ) + + return {children} +} + +export const useEmployee = () => { + const context = useContext(EmployeeContext) + if (!context) { + throw new Error("useEmployee must be used within a EmployeeProvider") + } + return context +} + +export default EmployeeProvider From dad574f0f0a0ed87f6b11c7b3a9e25353bbcab41 Mon Sep 17 00:00:00 2001 From: SeniorDev Date: Mon, 27 May 2024 09:05:33 -0400 Subject: [PATCH 3/5] I use absolute import --- components/Pages/EmployeePage/EmployeePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Pages/EmployeePage/EmployeePage.tsx b/components/Pages/EmployeePage/EmployeePage.tsx index 4720411a..16953f87 100644 --- a/components/Pages/EmployeePage/EmployeePage.tsx +++ b/components/Pages/EmployeePage/EmployeePage.tsx @@ -1,4 +1,4 @@ -import useIsMobile from "../../../hooks/useIsMobile" +import useIsMobile from "@/hooks/useIsMobile" import Layout from "../../Layout" import SeoHead from "../../SeoHead" import EmployeeContent from "./EmployeeContent" From 0ae52f3cc5f550283dd38f9494ca46208aec4c3e Mon Sep 17 00:00:00 2001 From: SeniorDev Date: Mon, 27 May 2024 09:14:13 -0400 Subject: [PATCH 4/5] I refactor the code --- components/Pages/EmployeePage/EmployeePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Pages/EmployeePage/EmployeePage.tsx b/components/Pages/EmployeePage/EmployeePage.tsx index 16953f87..a3a5a093 100644 --- a/components/Pages/EmployeePage/EmployeePage.tsx +++ b/components/Pages/EmployeePage/EmployeePage.tsx @@ -1,6 +1,6 @@ import useIsMobile from "@/hooks/useIsMobile" -import Layout from "../../Layout" -import SeoHead from "../../SeoHead" +import Layout from "@/components/Layout" +import SeoHead from "@/components/SeoHead" import EmployeeContent from "./EmployeeContent" const EmployeePage = () => { From d6551a7bd5e6cffb9d2c128f9b00069c3942d3e0 Mon Sep 17 00:00:00 2001 From: SeniorDev Date: Mon, 27 May 2024 09:15:06 -0400 Subject: [PATCH 5/5] I fix imports --- components/Pages/EmployeePage/EmployeeContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Pages/EmployeePage/EmployeeContent.tsx b/components/Pages/EmployeePage/EmployeeContent.tsx index fbb72c0f..170234ca 100644 --- a/components/Pages/EmployeePage/EmployeeContent.tsx +++ b/components/Pages/EmployeePage/EmployeeContent.tsx @@ -3,7 +3,7 @@ import useClickOutsideSelect from "@/hooks/useClickOutsideSelect" import Icon from "@/components/Core/Icon" import { useEmployee } from "@/providers/EmployeeProvider" import { milestones } from "@/hooks/useEmployeeData" -import RecBar from "../../RecBar" +import RecBar from "@/components/RecBar" const EmployeeContent = ({ isPopup = false }) => { const { selectRef, setIsVisibleSelect, isVisibleSelect } = useClickOutsideSelect()