added checkSession

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<HTMLElement>) => any;
   onConfirm?: (e: React.MouseEvent<HTMLElement>) => any;
   title?: string;
-  content: React.ElementType;
   icon?: IconDefinition;
   autoWidth?: boolean;
   showButtons?: boolean;
@@ -21,6 +22,7 @@ interface ModalProps {
 const Modal: React.FC<ModalProps> = ({
   autoWidth,
   content: Content,
+  contentProps,
   handleClose,
   noHeader,
   onCancel: cancelEvent,
@@ -92,7 +94,7 @@ const Modal: React.FC<ModalProps> = ({
               </header>
             }
             <div className="modal-body">
-              { Content && <Content {...{ handleClose }} /> }
+              { Content && <Content {...{ ...contentProps, handleClose }} /> }
             </div>
             {showButtons && (
               <div className="modal-footer">

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 }) => <div {...{ className:
   <Spinner />
 </div>;
 
-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 <AniMod {...{ render: SignupView, signupProps, signup, ...sharedProps }}/>;

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
         <span {...{ className: "login-modal-subtitle" }}>Log into your account</span>
         <span {...{
           className: `login-modal-login-link`,
-          onClick: () => { if (!animating) viewLoginSet(false); } 
+          onClick: () => { if (!animating) viewSwitch(); } 
         }}>Signup instead</span>
       </div>
     </header>

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 <div {...{ className: `fy-modal-page${ animating ? " animating-modal-page" : ""}` }}>
     <header>
       <div {...{ className: "login-modal-title-row" }}>
@@ -19,7 +19,7 @@ export default function LoginView({ animating, handleClose, signupProps, signup,
       </div>
       <div {...{ className: "login-modal-subtitle-row" }}>
         <span {...{ className: "login-modal-subtitle" }}>Create a new account</span>
-        <span {...{ className: "login-modal-login-link", onClick: () => { if (!animating) viewLoginSet(true); } }}>Or login instead</span>
+        <span {...{ className: "login-modal-login-link", onClick: () => { if (!animating) viewSwitch(); } }}>Or login instead</span>
       </div>
     </header>
     <TempInput {...{ icon: faUser, label: "Username", placeholder: "Username", ...signupProps("username") }}/>

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 <AccountModalContext.Provider {...{ value: { show, close, open } }}>
+    return <AccountModalContext.Provider {...{ value: { view, close, open, sessionCheck } }}>
       {children}
       {
       	<Modal {...{
-      		// content: () => <div>hiiiii</div>,
+          content: AccountModal,
+          contentProps: { view, viewSwitch },
       		handleClose: close,
       		noHeader: true,
-      		show,
+      		show: view > 0,
       		showButtons: false,
-      		content: AccountModal
       		// title: "You need to login",
       	}}/>
       }

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<AccountModalContext>({
-	show: false,
 	close: () => {},
-	open: () => {}
+	open: () => {},
+	sessionCheck: () => false,
+	view: ModalView.Closed,
 });

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;
+        });
+      }
     }
   };