diff --git a/dependency-graph.svg b/dependency-graph.svg new file mode 100644 index 00000000..19f70394 --- /dev/null +++ b/dependency-graph.svg @@ -0,0 +1,707 @@ + + + + + + +dependency-cruiser output + + +cluster_src + +src + + +cluster_src/Components + +Components + + +cluster_src/Components/AppShell + +AppShell + + +cluster_src/Components/Auth + +Auth + + +cluster_src/Components/Gaming + +Gaming + + +cluster_src/Components/Input + +Input + + +cluster_src/Components/Map + +Map + + +cluster_src/Components/Map/Subcomponents + +Subcomponents + + +cluster_src/Components/Map/hooks + +hooks + + +cluster_src/Components/Profile + +Profile + + +cluster_src/Components/Templates + +Templates + + +cluster_src/Components/Typography + +Typography + + +cluster_src/SampleData + +SampleData + + +cluster_src/Utils + +Utils + + + +src/Components/AppShell/AppShell.tsx + + +AppShell.tsx + + + + + +src/Components/AppShell/NavBar.tsx + + +NavBar.tsx + + + + + +src/Components/AppShell/AppShell.tsx->src/Components/AppShell/NavBar.tsx + + + + + +src/Components/AppShell/Content.tsx + + +Content.tsx + + + + + +src/Components/AppShell/SideBar.tsx + + +SideBar.tsx + + + + + +src/Components/AppShell/SidebarSubmenu.tsx + + +SidebarSubmenu.tsx + + + + + +src/Components/AppShell/SideBar.tsx->src/Components/AppShell/SidebarSubmenu.tsx + + + + + +src/Components/AppShell/index.tsx + + +index.tsx + + + + + +src/Components/AppShell/index.tsx->src/Components/AppShell/AppShell.tsx + + + + + +src/Components/AppShell/index.tsx->src/Components/AppShell/Content.tsx + + + + + +src/Components/AppShell/index.tsx->src/Components/AppShell/SideBar.tsx + + + + + +src/Components/Auth/index.tsx + + +index.tsx + + + + + +src/Components/Auth/useAuth.tsx + + +useAuth.tsx + + + + + +src/Components/Auth/index.tsx->src/Components/Auth/useAuth.tsx + + + + + +src/Components/Gaming/Modal.tsx + + +Modal.tsx + + + + + +src/Components/Gaming/Quests.tsx + + +Quests.tsx + + + + + +src/Components/Gaming/index.tsx + + +index.tsx + + + + + +src/Components/Gaming/index.tsx->src/Components/Gaming/Modal.tsx + + + + + +src/Components/Gaming/index.tsx->src/Components/Gaming/Quests.tsx + + + + + +src/Components/Input/InputText.tsx + + +InputText.tsx + + + + + +src/Components/Input/TextAreaInput.tsx + + +TextAreaInput.tsx + + + + + +src/Components/Map/Layer.tsx + + +Layer.tsx + + + + + +src/Utils/MarkerIconFactory.ts + + +MarkerIconFactory.ts + + + + + +src/Components/Map/Layer.tsx->src/Utils/MarkerIconFactory.ts + + + + + +src/Components/Map/hooks/useItems.tsx + + +useItems.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/hooks/useItems.tsx + + + + + +src/Components/Map/hooks/useLayers.tsx + + +useLayers.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/hooks/useLayers.tsx + + + + + +src/Components/Map/hooks/useTags.tsx + + +useTags.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/hooks/useTags.tsx + + + + + +src/Components/Map/Subcomponents/ItemFormPopup.tsx + + +ItemFormPopup.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/Subcomponents/ItemFormPopup.tsx + + + + + +src/Components/Map/Subcomponents/ItemViewPopup.tsx + + +ItemViewPopup.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/Subcomponents/ItemViewPopup.tsx + + + + + +src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Components/Map/hooks/useItems.tsx + + + + + +src/types.ts + + +types.ts + + + + + +src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/types.ts + + + + + +src/Components/Map/Subcomponents/ItemViewPopup.tsx->src/Components/Map/hooks/useItems.tsx + + + + + +src/Components/Map/Subcomponents/ItemViewPopup.tsx->src/Components/Map/hooks/useTags.tsx + + + + + +src/Utils/HeighlightTags.ts + + +HeighlightTags.ts + + + + + +src/Components/Map/Subcomponents/ItemViewPopup.tsx->src/Utils/HeighlightTags.ts + + + + + +src/Utils/ReplaceURLs.ts + + +ReplaceURLs.ts + + + + + +src/Components/Map/Subcomponents/ItemViewPopup.tsx->src/Utils/ReplaceURLs.ts + + + + + +src/Components/Map/Subcomponents/AddButton.tsx + + +AddButton.tsx + + + + + +src/Components/Map/Subcomponents/AddButton.tsx->src/Components/Map/hooks/useLayers.tsx + + + + + +src/Utils/DynamicHeroIcon.tsx + + +DynamicHeroIcon.tsx + + + + + +src/Components/Map/Subcomponents/AddButton.tsx->src/Utils/DynamicHeroIcon.tsx + + + + + +src/Components/Map/Tags.tsx + + +Tags.tsx + + + + + +src/Components/Map/Tags.tsx->src/Components/Map/hooks/useTags.tsx + + + + + +src/Components/Map/UtopiaMap.css + + +UtopiaMap.css + + + + + +src/Components/Map/UtopiaMap.tsx + + +UtopiaMap.tsx + + + + + +src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useItems.tsx + + + + + +src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useLayers.tsx + + + + + +src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useTags.tsx + + + + + +src/Components/Map/UtopiaMap.tsx->src/Components/Map/Subcomponents/AddButton.tsx + + + + + +src/Components/Map/UtopiaMap.tsx->src/types.ts + + + + + +src/Components/Map/UtopiaMap.tsx->src/Components/Map/UtopiaMap.css + + + + + +src/Components/Map/index.tsx + + +index.tsx + + + + + +src/Components/Map/index.tsx->src/Components/Map/Layer.tsx + + + + + +src/Components/Map/index.tsx->src/Components/Map/Tags.tsx + + + + + +src/Components/Map/index.tsx->src/Components/Map/UtopiaMap.tsx + + + + + +src/Components/Profile/Settings.tsx + + +Settings.tsx + + + + + +src/Components/Profile/Settings.tsx->src/Components/Input/InputText.tsx + + + + + +src/Components/Profile/Settings.tsx->src/Components/Input/TextAreaInput.tsx + + + + + +src/Components/Templates/TitleCard.tsx + + +TitleCard.tsx + + + + + +src/Components/Profile/Settings.tsx->src/Components/Templates/TitleCard.tsx + + + + + +src/Components/Typography/Subtitle.tsx + + +Subtitle.tsx + + + + + +src/Components/Templates/TitleCard.tsx->src/Components/Typography/Subtitle.tsx + + + + + +src/Components/Profile/index.tsx + + +index.tsx + + + + + +src/Components/Profile/index.tsx->src/Components/Profile/Settings.tsx + + + + + +src/Components/Templates/CardPage.tsx + + +CardPage.tsx + + + + + +src/Components/Templates/CardPage.tsx->src/Components/Templates/TitleCard.tsx + + + + + +src/Components/Templates/index.tsx + + +index.tsx + + + + + +src/Components/Templates/index.tsx->src/Components/Templates/TitleCard.tsx + + + + + +src/Components/Templates/index.tsx->src/Components/Templates/CardPage.tsx + + + + + +src/SampleData/data.js + + +data.js + + + + + +src/index.css + + +index.css + + + + + +src/index.tsx + + +index.tsx + + + + + +src/index.tsx->src/Components/AppShell/index.tsx + + + + + +src/index.tsx->src/Components/Auth/index.tsx + + + + + +src/index.tsx->src/Components/Gaming/index.tsx + + + + + +src/index.tsx->src/Components/Map/index.tsx + + + + + +src/index.tsx->src/Components/Profile/index.tsx + + + + + +src/index.tsx->src/Components/Templates/index.tsx + + + + + +src/index.tsx->src/index.css + + + + + diff --git a/src/Components/AppShell/DialogModal.tsx b/src/Components/AppShell/DialogModal.tsx new file mode 100644 index 00000000..05c7e93d --- /dev/null +++ b/src/Components/AppShell/DialogModal.tsx @@ -0,0 +1,63 @@ +import * as React from "react"; +import { MouseEvent, useEffect, useRef } from "react"; + + +const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => { + const r = element.getBoundingClientRect(); + + return ( + e.clientX > r.left && + e.clientX < r.right && + e.clientY > r.top && + e.clientY < r.bottom + ); +}; + +type Props = { + title: string; + isOpened: boolean; + onClose: () => void; + children: React.ReactNode; +}; + +const DialogModal = ({ + title, + isOpened, + onClose, + children, +}: Props) => { + const ref = useRef(null); + + useEffect(() => { + if (isOpened) { + ref.current?.showModal(); + document.body.classList.add("modal-open"); // prevent bg scroll + } else { + ref.current?.close(); + document.body.classList.remove("modal-open"); + } + }, [isOpened]); + + + return ( + + ref.current && !isClickInsideRectangle(e, ref.current) && onClose() + } + > +
+ + +

{title}

+ + {children} + +
+ + ); +}; + +export default DialogModal; diff --git a/src/Components/Auth/LoginPage.tsx b/src/Components/Auth/LoginPage.tsx new file mode 100644 index 00000000..0f19c1e4 --- /dev/null +++ b/src/Components/Auth/LoginPage.tsx @@ -0,0 +1,66 @@ +import {useState, useRef} from 'react' +import {Link} from 'react-router-dom' +import ErrorText from '../Typography/ErrorText' +import InputText from '../Input/InputText' +import * as React from 'react' + +export function LoginPage(){ + + const INITIAL_LOGIN_OBJ = { + password : "", + emailId : "" + } + + const [loading, setLoading] = useState(false) + const [errorMessage, setErrorMessage] = useState("") + const [loginObj, setLoginObj] = useState(INITIAL_LOGIN_OBJ) + + const submitForm = (e) =>{ + e.preventDefault() + setErrorMessage("") + + if(loginObj.emailId.trim() === "")return setErrorMessage("Email Id is required! (use any value)") + if(loginObj.password.trim() === "")return setErrorMessage("Password is required! (use any value)") + else{ + setLoading(true) + // Call API to check user credentials and save token in localstorage + localStorage.setItem("token", "DumyTokenHere") + setLoading(false) + window.location.href = '/app/welcome' + } + } + + const updateFormValue = (val: string) => { + console.log(val) + } + + return( +
+
+
+
+

Login

+
submitForm(e)}> + +
+ + updateFormValue(v)}/> + + updateFormValue(v)}/> + +
+ +
Forgot Password? +
+ + {errorMessage} + + +
Don't have an account yet? Sign Up
+
+
+
+
+
+ ) +} diff --git a/src/Components/Auth/SignupPage.tsx b/src/Components/Auth/SignupPage.tsx new file mode 100644 index 00000000..cc91c0d1 --- /dev/null +++ b/src/Components/Auth/SignupPage.tsx @@ -0,0 +1,67 @@ +import { useState, useRef } from 'react' +import { Link } from 'react-router-dom' +import ErrorText from '../Typography/ErrorText' +import InputText from '../Input/InputText' +import * as React from 'react' + +export function SignupPage() { + + const INITIAL_REGISTER_OBJ = { + name : "", + password : "", + emailId : "" + } + + const [loading, setLoading] = useState(false) + const [errorMessage, setErrorMessage] = useState("") + const [registerObj, setRegisterObj] = useState(INITIAL_REGISTER_OBJ) + + const submitForm = (e) =>{ + e.preventDefault() + setErrorMessage("") + + if(registerObj.name.trim() === "")return setErrorMessage("Name is required! (use any value)") + if(registerObj.emailId.trim() === "")return setErrorMessage("Email Id is required! (use any value)") + if(registerObj.password.trim() === "")return setErrorMessage("Password is required! (use any value)") + else{ + setLoading(true) + // Call API to check user credentials and save token in localstorage + localStorage.setItem("token", "DumyTokenHere") + setLoading(false) + window.location.href = '/app/welcome' + } + } + + const updateFormValue = (val: string) => { + console.log(val) + } + + return ( +
+
+
+
+

Sign Up

+
submitForm(e)}> + +
+ + + + + + + +
+ + {errorMessage} + + +
Already have an account? Login
+
+
+
+
+
+ ) +} diff --git a/src/Components/Typography/ErrorText.tsx b/src/Components/Typography/ErrorText.tsx new file mode 100644 index 00000000..ccdfea48 --- /dev/null +++ b/src/Components/Typography/ErrorText.tsx @@ -0,0 +1,9 @@ +import * as React from "react" + +function ErrorText({styleClass, children}){ + return( +

{children}

+ ) +} + +export default ErrorText \ No newline at end of file