submit page easy reversal of actions

pages/submit.tsx

@@ -10,6 +10,8 @@ import { SUBMIT_NEWS_ITEM_MUTATION } from '../src/data/mutations/submit-news-ite
 import { withDataAndRouter } from '../src/helpers/with-data';
 import { MainLayout } from '../src/layouts/main-layout';
 
+import { ErrorAction } from '../src/components/error-action';
+
 interface ISubmitPageProps {
   router;
 }
@@ -22,11 +24,16 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
   const [url, setUrl] = useState<string>('');
   const [text, setText] = useState<string>('');
   const [submitValidationMessage, setSubmitValidationMessage] = useState<string>('');
+  const [notLoggedIn, setNotLoggedIn] = React.useState(false);
+
+  const onCancel = () => {
+    setNotLoggedIn(false);
+  }
 
   const validateSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     if (!(data?.me)) {
       e.preventDefault();
-      Router.push('/login');
+      setNotLoggedIn(true);
     } else {
       try {
         validateTitle({title});
@@ -47,6 +54,7 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
       }
     },
     onError(err) {
+
       console.error(err);
     },
   });
@@ -58,6 +66,8 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
       isNavVisible={true}
       isFooterVisible={true}
     >
+    <React.Fragment>
+    <div><ErrorAction onNotLoggedIn={notLoggedIn} onCancel={onCancel} /></div>
       <tr>
         <td>
           <form onSubmit={(e): void => validateSubmit(e)}>
@@ -164,6 +174,7 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
           </form>
         </td>
       </tr>
+      </React.Fragment>
     </MainLayout>
   );
 }

pages/user.tsx

@@ -40,8 +40,6 @@ export interface IUserPageQuery {
 function UserPage(props: IUserPageProps): JSX.Element {
   const { router } = props;
 
-  console.log(router);
-
   const userId = (router.query && router.query.id) || '';
 
   const { data } = useQuery<IUserPageQuery>(query, { variables: { id: userId } });

src/components/error-action.tsx

@@ -3,13 +3,24 @@ import { useRouter } from 'next/router';
 import Modal from 'react-bootstrap/Modal'
 import "bootstrap/dist/css/bootstrap.min.css";
 
-export function ErrorAction(): JSX.Element {
-
-    const [show, setShow] = React.useState(true);
+export interface IErrorActionProps {
+  onCancel: any;
+  onNotLoggedIn: boolean;
+}
 
+export function ErrorAction(props: IErrorActionProps): JSX.Element {
+    const { onCancel, onNotLoggedIn } = props;
+    const [show, setShow] = React.useState(onNotLoggedIn);
     const router = useRouter();
+
+    React.useEffect(() => {
+      setShow(onNotLoggedIn);
+    }, [onNotLoggedIn]);
 
-    const handleClose = () => setShow(false);
+    const handleClose = () => {
+      setShow(false);
+      onCancel();
+    };
 
     const handleLogin = () => {
         router.push(`/login?goto=${router.pathname}`);       

src/components/news-title.tsx

@@ -30,6 +30,10 @@ export function NewsTitle(props: INewsTitleProps): JSX.Element {
 
   const [notLoggedIn, setNotLoggedIn] = React.useState(false);
 
+  const onCancel = () => {
+    setNotLoggedIn(false);
+  }
+
   const [upvoteNewsItem] = useMutation(UPVOTE_NEWS_ITEM_MUTATION, {
     onError: () => {     
       setNotLoggedIn(true);
@@ -54,7 +58,7 @@ export function NewsTitle(props: INewsTitleProps): JSX.Element {
             </a>
           )}
         </div>            
-        <div>{ notLoggedIn && (<ErrorAction />) }</div>
+        <div><ErrorAction onNotLoggedIn={notLoggedIn} onCancel={onCancel} /></div>
       </td>
       <td className="title">
         <a className="storylink" target="_blank" href={url || `item?id=${id}`}>