Merge pull request #3 from Achintha444/HCI-madhavi

Hci madhavi

Author: mpmadhavig

package-lock.json

@@ -35,6 +35,7 @@
     "@apollo/client": "3.3.16",
     "apollo-server-express": "2.22.2",
     "body-parser": "1.19.0",
+    "bootstrap": "^4.6.0",
     "cookie": "0.4.1",
     "cookie-parser": "1.4.5",
     "cross-env": "7.0.3",
@@ -56,6 +57,7 @@
     "react-alert-template-basic": "^1.0.1",
     "react-alert-template-oldschool-dark": "^1.0.1",
     "react-apollo": "3.1.5",
+    "react-bootstrap": "^1.6.0",
     "react-dom": "17.0.2",
     "react-notifications-component": "^3.1.0",
     "react-render-html": "0.6.0",

package.json

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import Modal from 'react-bootstrap/Modal'
+import "bootstrap/dist/css/bootstrap.min.css";
+
+export interface IErrorActionProps {
+    currentUrl: string;
+}
+
+export function ErrorAction(props: IErrorActionProps): JSX.Element {
+    const { currentUrl } = props;
+
+    const [show, setShow] = React.useState(true);
+
+    const router = useRouter();
+  
+    const handleClose = () => setShow(false);
+
+    const handleLogin = () => {
+        router.push(`/login?goto=${currentUrl}`);       
+    }
+  
+    return (
+      <React.Fragment>
+        <Modal show={show} onHide={handleClose} style={{fontFamily: "Verdana, Geneva, sans-serif", fontSize: "10pt"}}>    
+          <Modal.Body>      
+            <p>You have not logged in yet. Please login to continue!</p>
+            <div className="float-right" style={{display: 'flex',  justifyContent:'center', alignItems:'center'}} >
+                <input type="submit" value="login" onClick={handleLogin} />
+            </div>
+            <div className="float-right mr-1" style={{display: 'flex',  justifyContent:'center', alignItems:'center'}} >
+                <input type="submit" value="cancel"  onClick={handleClose} />
+            </div>            
+          </Modal.Body>
+        </Modal>
+      </React.Fragment>
+    );
+  }

src/components/error-action.spec.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { parse } from 'url';
 
 import { UPVOTE_NEWS_ITEM_MUTATION } from '../data/mutations/upvote-news-item-mutation';
+import { ErrorAction } from './error-action';
 
 export interface INewsTitleProps {
   id: number;
@@ -27,8 +28,12 @@ export const newsTitleFragment = `
 export function NewsTitle(props: INewsTitleProps): JSX.Element {
   const { id, isRankVisible = true, isUpvoteVisible = true, rank, title, upvoted, url } = props;
 
+  const [notLoggedIn, setNotLoggedIn] = React.useState(false);
+
   const [upvoteNewsItem] = useMutation(UPVOTE_NEWS_ITEM_MUTATION, {
-    onError: () => Router.push('/login', `/vote?id=${id}&how=up&goto=news`),
+    onError: () => {     
+      setNotLoggedIn(true);
+    },
     variables: { id },
   });
 
@@ -48,7 +53,8 @@ export function NewsTitle(props: INewsTitleProps): JSX.Element {
               <div className="votearrow" title="upvote" />
             </a>
           )}
-        </div>
+        </div>            
+        <div>{ notLoggedIn && (<ErrorAction currentUrl="news" />) }</div>
       </td>
       <td className="title">
         <a className="storylink" href={url || `item?id=${id}`}>