From a097c9f1c08dc161fd592f6bbbdfd0486cfb70f6 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 16 Jan 2024 16:19:08 -0800 Subject: [PATCH] added checkSession --- .../src/components/common/Modal/Modal.tsx | 6 ++- .../layout/AccountModal/AccountModal.tsx | 8 ++-- .../layout/AccountModal/LoginView.tsx | 6 +-- .../layout/AccountModal/SignupView.tsx | 6 +-- .../AccountModalProvider.tsx | 27 +++++++---- .../src/context/AccountModalContext.tsx | 13 +++-- .../hooks/useBatchContent/useBatchContent.tsx | 47 ++++++++++--------- 7 files changed, 68 insertions(+), 45 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx index 9ee784fbcb..dddf09cb1d 100644 --- a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx +++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx @@ -6,13 +6,14 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import "./Modal.scss"; interface ModalProps { + content: React.ElementType; + contentProps?: any; show: boolean; handleClose: () => void; noHeader?: boolean; onCancel?: (e: React.MouseEvent) => any; onConfirm?: (e: React.MouseEvent) => any; title?: string; - content: React.ElementType; icon?: IconDefinition; autoWidth?: boolean; showButtons?: boolean; @@ -21,6 +22,7 @@ interface ModalProps { const Modal: React.FC = ({ autoWidth, content: Content, + contentProps, handleClose, noHeader, onCancel: cancelEvent, @@ -92,7 +94,7 @@ const Modal: React.FC = ({ }
- { Content && } + { Content && }
{showButtons && (
diff --git a/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx b/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx index fa6f067ac9..dabdb4b5f9 100644 --- a/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx +++ b/packages/fakeyou.com/src/components/layout/AccountModal/AccountModal.tsx @@ -6,6 +6,7 @@ import useLogin from "./useLogin"; import useSignup from "./useSignup"; import LoginView from "./LoginView"; import SignupView from "./SignupView"; +import { ModalView } from "context/AccountModalContext"; import { Analytics } from "common/Analytics"; import "./AccountModal.scss"; @@ -30,9 +31,10 @@ const Loader = ({ viewLogin }: { viewLogin: boolean }) =>
; -export default function LoginModal({ handleClose }: { handleClose: any }) { +export default function LoginModal({ handleClose, view, viewSwitch }: { handleClose: any, view: ModalView, viewSwitch: () => void }) { + const viewLogin = view === ModalView.Login; const [status,statusSet] = useState(FetchStatus.paused); - const [viewLogin,viewLoginSet] = useState(false); + // const [viewLogin,viewLoginSet] = useState(false); const [animating,animatingSet] = useState(false); const { errorType, setProps: loginProps, login } = useLogin({ onSuccess: () => { @@ -68,7 +70,7 @@ export default function LoginModal({ handleClose }: { handleClose: any }) { { transitions((style: any, i: number, state: any) => { let isLeaving = state.phase === "leave"; - let sharedProps = { animating, handleClose, isLeaving, style, viewLogin, viewLoginSet }; + let sharedProps = { animating, handleClose, isLeaving, style, viewLogin, viewSwitch }; switch(i) { case 0: return ; diff --git a/packages/fakeyou.com/src/components/layout/AccountModal/LoginView.tsx b/packages/fakeyou.com/src/components/layout/AccountModal/LoginView.tsx index 3aee97dea8..03cecf63f9 100644 --- a/packages/fakeyou.com/src/components/layout/AccountModal/LoginView.tsx +++ b/packages/fakeyou.com/src/components/layout/AccountModal/LoginView.tsx @@ -13,10 +13,10 @@ interface Props { handleClose: (x:any) => any, login: (x:any) => any, loginProps: (x:any) => any, - viewLoginSet: (x:any) => void + viewSwitch: () => void } -export default function LoginView({ animating, errorType = "", handleClose, login, loginProps, viewLoginSet }: Props) { +export default function LoginView({ animating, errorType = "", handleClose, login, loginProps, viewSwitch }: Props) { const errorStrings = [ "Could not login, check credentials and try again.", "A sever error occured. Try again." @@ -32,7 +32,7 @@ export default function LoginView({ animating, errorType = "", handleClose, logi Log into your account { if (!animating) viewLoginSet(false); } + onClick: () => { if (!animating) viewSwitch(); } }}>Signup instead
diff --git a/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx b/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx index d906c95a6e..bb7a9cc933 100644 --- a/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx +++ b/packages/fakeyou.com/src/components/layout/AccountModal/SignupView.tsx @@ -7,10 +7,10 @@ interface Props { handleClose: (x:any) => any, signupProps: (x:any) => any, signup: (x:any) => any, - viewLoginSet: (x:any) => void + viewSwitch: () => void } -export default function LoginView({ animating, handleClose, signupProps, signup, viewLoginSet }: Props) { +export default function LoginView({ animating, handleClose, signupProps, signup, viewSwitch }: Props) { return
@@ -19,7 +19,7 @@ export default function LoginView({ animating, handleClose, signupProps, signup,
Create a new account - { if (!animating) viewLoginSet(true); } }}>Or login instead + { if (!animating) viewSwitch(); } }}>Or login instead
diff --git a/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx b/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx index e56fdcac14..3fdaa2d270 100644 --- a/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx +++ b/packages/fakeyou.com/src/components/providers/AccountModalProvider/AccountModalProvider.tsx @@ -1,28 +1,39 @@ import React, { useState } from 'react'; import { AccountModalContext } from 'context'; +import { useSession } from "hooks"; import { Modal } from "components/common"; import AccountModal from "components/layout/AccountModal"; +import { ModalView } from "context/AccountModalContext"; interface Props { children?: any; } - export default function AccountModalProvider({ children }: Props) { - const [show, showSet] = useState(false); - const open = () => showSet(true); - const close = () => { showSet(false); console.log("🍏",);}; + const { user } = useSession(); + const [view,viewSet] = useState(ModalView.Closed); + const open = () => viewSet(ModalView.Signup); + const close = () => { viewSet(ModalView.Closed); console.log("🍏",);}; + const viewSwitch = () => view === ModalView.Signup ? viewSet(ModalView.Login) : viewSet(ModalView.Signup); + const sessionCheck = () => { + if (user) { + return true; + } else { + open(); + return false; + } + }; - return + return {children} {
hiiiii
, + content: AccountModal, + contentProps: { view, viewSwitch }, handleClose: close, noHeader: true, - show, + show: view > 0, showButtons: false, - content: AccountModal // title: "You need to login", }}/> } diff --git a/packages/fakeyou.com/src/context/AccountModalContext.tsx b/packages/fakeyou.com/src/context/AccountModalContext.tsx index b07866638d..1ee46454cc 100644 --- a/packages/fakeyou.com/src/context/AccountModalContext.tsx +++ b/packages/fakeyou.com/src/context/AccountModalContext.tsx @@ -1,9 +1,16 @@ import { createContext } from 'react'; -interface AccountModalContext { show: boolean, close: () => void, open: () => void } +export enum ModalView { + Closed, + Signup, + Login +} + +interface AccountModalContext { close: () => void, open: () => void, sessionCheck: () => boolean, view: ModalView, } export default createContext({ - show: false, close: () => {}, - open: () => {} + open: () => {}, + sessionCheck: () => false, + view: ModalView.Closed, }); \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx b/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx index 52c3b03eb9..e5652f26b5 100644 --- a/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx +++ b/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx @@ -73,31 +73,32 @@ export default function useBatchContent({ }); const toggle = (entity_token: string, entity_type: string) => { - login.open(); - let inLibrary = library[entity_token]; - statusSet(FetchStatus.in_progress); - busyAdd(entity_token); + if (login.sessionCheck()) { + let inLibrary = library[entity_token]; + statusSet(FetchStatus.in_progress); + busyAdd(entity_token); - console.log(`⏳ toggling entity ${ entity_token }, in library?: ${ !!inLibrary }`); + console.log(`⏳ toggling entity ${ entity_token }, in library?: ${ !!inLibrary }`); - if (inLibrary && checker(inLibrary)) { - return onPass.fetch(entity_token, entity_type, library) - .then((res: any) => { - console.log("⭕️",res); - busyRemove(entity_token); - librarySet(onPass.modLibrary(res, entity_token, entity_type, library)); - statusSet(FetchStatus.ready); - return false; - }); - } else { - return onFail.fetch(entity_token, entity_type, library) - .then((res: any) => { - console.log("❌",res); - busyRemove(entity_token); - librarySet(onFail.modLibrary(res, entity_token, entity_type, library)); - statusSet(FetchStatus.ready); - return true; - }); + if (inLibrary && checker(inLibrary)) { + return onPass.fetch(entity_token, entity_type, library) + .then((res: any) => { + console.log("⭕️",res); + busyRemove(entity_token); + librarySet(onPass.modLibrary(res, entity_token, entity_type, library)); + statusSet(FetchStatus.ready); + return false; + }); + } else { + return onFail.fetch(entity_token, entity_type, library) + .then((res: any) => { + console.log("❌",res); + busyRemove(entity_token); + librarySet(onFail.modLibrary(res, entity_token, entity_type, library)); + statusSet(FetchStatus.ready); + return true; + }); + } } };