Prompting Unauthenticated Users to sign in first to upvote a story

package.json

@@ -21,6 +21,7 @@
     "react-dropzone": "^11.5.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.25.0",
+    "react-hot-toast": "^2.2.0",
     "react-i18next": "^11.15.3",
     "react-image-gallery": "^1.2.7",
     "react-loading-skeleton": "^3.0.2",
@@ -80,4 +81,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/App.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useReducer } from 'react'
 import { Router } from '@reach/router'
 import './assets/scss/index.scss'
+import { Toaster } from 'react-hot-toast'
 
 import Home from './pages/Home'
 import Login from './pages/Login'
@@ -75,6 +76,7 @@ const App = () => {
         <Page404 default />
       </Router>
       <Footer />
+      <Toaster />
     </Context.Provider>
   )
 }

src/assets/scss/components/modal.scss

@@ -23,7 +23,7 @@
   background-color: $eos-white;
   margin: auto;
   max-height: 70vh;
-  overflow-y: scroll;
+  overflow-y: auto;
   position: relative;
 }
 

src/assets/scss/components/vote.scss

@@ -27,18 +27,21 @@
 
 .vote-button {
   color: $eos-white;
+  cursor: pointer;
   font-weight: bold;
   margin: 4px 8px;
 
-  &-clickable {
-    cursor: pointer;
-  }
-
   .eos-icons {
     margin: 0px 4px 0px 4px;
   }
 }
 
+.vote-link {
+  color: $eos-white;
+  font-weight: bold;
+  text-decoration: none;
+}
+
 @media (max-width: 900px) {
   .vote-wrapper {
     align-items: center;

src/assets/scss/modules/loadingIndicator.scss

@@ -2,6 +2,7 @@
   align-items: center;
   display: flex;
   justify-content: center;
+  min-height: 80vh;
 }
 
 .loader-image {

src/components/Comments.js

@@ -77,34 +77,37 @@ const Comments = (props) => {
     const formData = new FormData()
     data.user = id
     data.user_story = storyId
-    formData.append('data', JSON.stringify(data))
+    if (data.Comments.trim() !== '') {
+      formData.append('data', JSON.stringify(data))
 
-    attachFiles(formData, attachments)
+      attachFiles(formData, attachments)
 
-    await userStory.postComment(formData)
+      await userStory.postComment(formData)
 
-    setComment('')
-    setAttachments([])
+      setComment('')
+      setAttachments([])
 
-    fetchStoryComments()
+      fetchStoryComments()
+    }
   }
 
   const addCommentReply = async (e, data) => {
-    console.log(data)
     const formData = new FormData()
 
     data.user = id
     data.user_story_comment = commentId
-    formData.append('data', JSON.stringify(data))
+    if (data.Comments.trim() !== '') {
+      formData.append('data', JSON.stringify(data))
 
-    attachFiles(formData, replyAttachments)
+      attachFiles(formData, replyAttachments)
 
-    await userStory.postCommentReply(formData)
-    setCommentReply('')
-    setReplyAttachments([])
-    setRepliesToggled(null)
+      await userStory.postCommentReply(formData)
+      setCommentReply('')
+      setReplyAttachments([])
+      setRepliesToggled(null)
 
-    fetchStoryComments()
+      fetchStoryComments()
+    }
   }
 
   return (

src/components/Navigation.js

@@ -6,7 +6,7 @@ import {
   EOS_SETTINGS,
   EOS_EXIT_TO_APP
 } from 'eos-icons-react'
-
+import toast from 'react-hot-toast'
 import eosIcon from '../assets/images/user-story-logo.svg'
 import useAuth from '../hooks/useAuth'
 import Context from '../modules/Context'
@@ -45,6 +45,7 @@ const Navigation = (props) => {
     dispatch({
       type: 'DEAUTHENTICATE'
     })
+    toast.success('You are now logged out of the application')
     navigate('/')
   }
 

src/components/StoryPageTimeline.js

@@ -4,6 +4,7 @@ import { Link } from '@reach/router'
 import userStory from '../services/user_story'
 import Lists from '../utils/Lists'
 import { EOS_THUMB_UP } from 'eos-icons-react'
+import storyPagePattern from '../assets/images/story-page-pattern.svg'
 
 const StoryPageTimeline = (props) => {
   const { story, currentStatus } = props
@@ -24,6 +25,8 @@ const StoryPageTimeline = (props) => {
 
   const [isOpen, setIsOpen] = useState(false)
 
+  const [showLog, setShowLog] = useState(false)
+
   const [previousStatuses, setPreviousStatuses] = useState([])
 
   const togglePopup = () => {
@@ -88,11 +91,13 @@ const StoryPageTimeline = (props) => {
       >
         <div
           data-cy='story-vote-btn'
-          className={`story-vote-button ${
-            userId ? 'story-vote-button-clickable' : ''
-          }`}
+          className={`story-vote-button story-vote-button-clickable`}
           onClick={() => {
-            if (userId && !voteClicked) updateVote(story)
+            if (userId && !voteClicked) {
+              updateVote(story)
+            } else if (!userId) {
+              setShowLog(!showLog)
+            }
           }}
         >
           <EOS_THUMB_UP className='eos-icons' color='white' size='l' />
@@ -104,6 +109,26 @@ const StoryPageTimeline = (props) => {
         >
           {votes} Votes
         </div>
+        {showLog && (
+          <>
+            <Modal
+              content={
+                <>
+                  <h1>Oops! You're not signed In</h1>
+                  <h2>
+                    <Link className='btn' data-cy='btn-signin' to='/login'>
+                      Sign-In to UpVote :)
+                    </Link>
+                  </h2>
+                </>
+              }
+              handleClose={() => {
+                setShowLog(!showLog)
+              }}
+              active={showLog}
+            />
+          </>
+        )}
         {isOpen && (
           <Modal
             content={
@@ -165,10 +190,7 @@ const StoryPageTimeline = (props) => {
         })}
       </div>
       <div className='story-pattern'>
-        <img
-          src={require(`../assets/images/story-page-pattern.svg`)}
-          alt='pattern'
-        />
+        <img src={storyPagePattern} alt='pattern' />
       </div>
     </div>
   )

src/components/Vote.js

@@ -73,13 +73,24 @@ const Vote = (props) => {
         {votes}
       </div>
       <div
-        className={`vote-button ${userId ? 'vote-button-clickable' : ''}`}
+        className='vote-button'
         onClick={() => {
-          if (userId && !voteClicked) updateVote(story)
+          if (userId && !voteClicked) {
+            updateVote(story)
+          }
         }}
       >
-        <EOS_THUMB_UP className='eos-icons' color='white' />
-        Vote
+        {!userId ? (
+          <Link className='vote-link' to='/login'>
+            <EOS_THUMB_UP className='eos-icons' color='white' />
+            Vote
+          </Link>
+        ) : (
+          <>
+            <EOS_THUMB_UP className='eos-icons' color='white' />
+            Vote
+          </>
+        )}
       </div>
       {isOpen && (
         <Modal

src/modules/LoadingIndicator.js

@@ -1,13 +1,10 @@
 import React from 'react'
+import { ReactComponent as Loader } from '../assets/images/loading.svg'
 
 const LoadingIndicator = () => {
   return (
     <div className='loading-indicator'>
-      <img
-        className='loader-image'
-        src={require('../assets/images/loading.svg')}
-        alt='loader'
-      ></img>
+      <Loader className='loader-image' />
     </div>
   )
 }

src/pages/ChangePassword.js

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form'
 import { navigate } from '@reach/router'
 import { useTranslation } from 'react-i18next'
 import { Helmet } from 'react-helmet'
-
+import toast from 'react-hot-toast'
 import Button from '../components/Button'
 import useAuth from '../hooks/useAuth'
 import FormError from '../components/FormError'
@@ -38,7 +38,11 @@ const ChangePassword = () => {
         id: localStorage.getItem('id')
       })
       setResponse(reply)
-    } catch (e) {}
+      toast.success('Password changed successfully')
+    } catch (e) {
+      console.error(e.message)
+      toast.error(e.message)
+    }
   }
 
   const handleNavigateToLogin = async () => {

src/pages/Home.js

@@ -85,13 +85,6 @@ const Home = () => {
                 solutions that enhance your experience.
               </h2>
             </div>
-            <div className='img-wrap'>
-              <img
-                className='profile-picture'
-                src={require(`../assets/images/user-story-graphic.svg`)}
-                alt='profile pic'
-              />
-            </div>
           </div>
           <Stories />
         </div>

src/pages/Login.js

@@ -6,6 +6,7 @@ import { Link, navigate } from '@reach/router'
 import { useTranslation } from 'react-i18next'
 import useAuth from '../hooks/useAuth'
 import { Helmet } from 'react-helmet'
+import toast from 'react-hot-toast'
 
 import Button from '../components/Button'
 import FormError from '../components/FormError'
@@ -44,6 +45,7 @@ export const Login = (props) => {
       dispatch({
         type: 'AUTHENTICATE'
       })
+      toast.success(`Logged in successfully as ${payload.user.username}`)
       navigate('/', { replace: true })
     } catch (e) {}
   }

src/pages/MyProfile.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react'
 import { Helmet } from 'react-helmet'
-
+import toast from 'react-hot-toast'
 import Navigation from '../components/Navigation'
 import Context from '../modules/Context'
 import Login from './Login'
@@ -24,9 +24,15 @@ const MyProfile = () => {
   }
 
   const updateProfile = async () => {
-    const response = await userStory.updateUser({ id: userId, ...user })
-    if (response) {
-      setUpdated(true)
+    try {
+      const response = await userStory.updateUser({ id: userId, ...user })
+      if (response) {
+        toast.success('Profile updated successfully')
+        setUpdated(true)
+      }
+    } catch (err) {
+      console.error(err.message)
+      toast.error(err.message)
     }
   }
 

src/pages/NewStory.js

@@ -4,7 +4,7 @@ import MarkdownEditor from '../components/MarkdownEditor'
 import { filterDescriptionText } from '../utils/filterText'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
 import { Helmet } from 'react-helmet'
-
+import toast from 'react-hot-toast'
 import FormError from '../components/FormError'
 import Navigation from '../components/Navigation'
 import LoadingIndicator from '../modules/LoadingIndicator'
@@ -127,12 +127,13 @@ const NewStory = () => {
         })
       }
       await userStory.createStory(formData)
+      toast.success('New story created successfully')
       navigate('/')
     } catch (err) {
-      console.log(err.message)
+      console.error(err.message)
+      toast.error(err.message)
     }
   }
-
   return state.auth ? (
     <>
       <Helmet>

src/pages/Register.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { useForm } from 'react-hook-form'
 import { Helmet } from 'react-helmet'
-
+import toast from 'react-hot-toast'
 import { Link, navigate } from '@reach/router'
 import Button from '../components/Button'
 import useAuth from '../hooks/useAuth'
@@ -41,8 +41,12 @@ export const Register = () => {
       dispatch({
         type: 'AUTHENTICATE'
       })
+      toast.success(`Successfully registered as ${payload.user.username}`)
       navigate('/', { replace: true })
-    } catch (e) {}
+    } catch (e) {
+      console.error(e.message)
+      toast.error(e.message)
+    }
   }
 
   if (state.auth) {