#12 remove post button if user is not logged in

michaelboyles · Apr 6, 2021 · 5a0bf6b · 5a0bf6b
1 parent d7ca97e
commit 5a0bf6b
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 47 deletions.
diff --git a/client/components/CommentForm.tsx b/client/components/CommentForm.tsx
@@ -4,11 +4,13 @@ import LoadingSpinner from './LoadingSpinner'
 import type { Comment, CommentId } from '../../common/types/comment'
 import type { AddCommentRequest } from '../../common/types/add-comment-request'
 import type { EditCommentRequest } from '../../common/types/edit-comment-request'
-import { AWS_GET_URL, MAX_COMMENT_LENGTH } from '../../config';
+import { AWS_GET_URL, GOOGLE_CLIENT_ID, MAX_COMMENT_LENGTH } from '../../config';
 import { normalizeUrl } from '../../common/util';
 import ReactMde from 'react-mde';
 import Markdown from './Markdown';
 import { AuthContext } from '../context/AuthContext';
+import { SignIn } from './SignIn';
+import { useGoogleLogout } from 'react-google-login';
 
 import 'react-mde/lib/styles/css/react-mde-all.css';
 
@@ -82,10 +84,6 @@ const CommentForm = (props: Props) => {
 
     const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        if (!authorization) {
-            setError('Please sign in first');
-            return;
-        }
         if (!text || text.trim().length === 0) {
             setError('Comment cannot be blank');
             return;
@@ -132,6 +130,7 @@ const CommentForm = (props: Props) => {
             );
         }
     };
+
     return (
         <form className='reply-form' onSubmit={onSubmit}>
             <ReactMde
@@ -147,11 +146,17 @@ const CommentForm = (props: Props) => {
                     }
                 }}
             />
-            <SubmitButton
-                disabled={isSubmitting || text.length > MAX_COMMENT_LENGTH}
-                label={props.buttonLabel}
-                isSubmitting={isSubmitting}
-            />
+            {
+                authorization ?
+                    (
+                        <SubmitButton
+                            disabled={isSubmitting || text.length > MAX_COMMENT_LENGTH}
+                            label={props.buttonLabel}
+                            isSubmitting={isSubmitting}
+                        />
+                    )
+                    : <SignIn />
+            }
             <CommentLengthMessage length={text.length} />
             { error ? <p>{error}</p> : null }
         </form>

diff --git a/client/components/FwComments.tsx b/client/components/FwComments.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { AWS_GET_URL } from '../../config';
+import { AWS_GET_URL, GOOGLE_CLIENT_ID } from '../../config';
 import { Comment, GetAllCommentsResponse } from '../../common/types/get-all-comments-response';
 import FwComment from './FwComment';
 import CommentForm from './CommentForm';
-import { LocalAuthorization, SignIn } from './SignIn';
+import { LocalAuthorization } from './SignIn';
 import { AuthContext } from '../context/AuthContext';
+import { useGoogleLogout } from 'react-google-login';
 
 const FwComments = () => {
     const [comments, setComments] = useState([] as Comment[]);
@@ -19,9 +20,14 @@ const FwComments = () => {
       }, []
     );
 
+    const { signOut: googleSignOut } = useGoogleLogout({clientId: GOOGLE_CLIENT_ID});
+    const signOut = () => { googleSignOut(); setAuthorization(null); }
+
     return (
         <AuthContext.Provider value={{authorization, setAuthorization}}>
-            <SignIn />
+            {
+                authorization ? <span>Signed in as {authorization.name} <a onClick={signOut}>(sign out)</a></span> : null
+            }
             <CommentForm afterSubmit={(comment: Comment) => setComments(comments.concat(comment))} type='ADD' />
             <ul className='comments'>
                 { comments

diff --git a/client/components/GoogleIcon.tsx b/client/components/GoogleIcon.tsx
@@ -1,8 +1,8 @@
 import React = require('react');
 
-const GoogleIcon = (props: {color?: string}) => {
+const GoogleIcon = (props: {color?: string, className?: string}) => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3">
+        <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3">
             <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill={props.color ? props.color : "#4285f4"}/>
             <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill={props.color ? props.color : "#34a853" }/>
             <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill={props.color ? props.color : "#fbbc04"}/>

diff --git a/client/components/SignIn.tsx b/client/components/SignIn.tsx
@@ -1,13 +1,12 @@
 import React = require('react');
 import { useContext } from 'react';
-import GoogleLogin, { GoogleLoginResponse, useGoogleLogout } from 'react-google-login';
+import GoogleLogin, { GoogleLoginResponse } from 'react-google-login';
 import type { Authorization } from '../../common/types/add-comment-request';
 import { GOOGLE_CLIENT_ID } from '../../config'
 import { AuthContext } from '../context/AuthContext';
 import GoogleIcon from './GoogleIcon';
 
-export interface LocalAuthorization extends Authorization
-{
+export interface LocalAuthorization extends Authorization {
     name: string;
     id: string;
 }
@@ -20,28 +19,28 @@ export function onlyAuthorization(localAuth: LocalAuthorization): Authorization
 }
 
 export const SignIn = () => {
-    const { authorization, setAuthorization } = useContext(AuthContext);
+    const { setAuthorization } = useContext(AuthContext);
 
-    const { signOut: googleSignOut } = useGoogleLogout({clientId: GOOGLE_CLIENT_ID});
-    const signOut = () => { googleSignOut(); setAuthorization(null); }
-
-    return authorization ? 
-        <span>Signed in as {authorization.name} <a onClick={signOut}>(sign out)</a></span>
-        :
-        <>
-            Sign in via: 
-            <GoogleLogin 
-                clientId={GOOGLE_CLIENT_ID}
-                onSuccess={resp => setAuthorization({
-                    token: (resp as GoogleLoginResponse).tokenId,   //TODO how to remove 'as'?
-                    tokenProvider: 'Google',
-                    name: (resp as GoogleLoginResponse).getBasicProfile().getName(),
-                    id: (resp as GoogleLoginResponse).getId()
-                })} 
-                isSignedIn={true}
-                render={renderProps => (
-                    <a className='sign-in-icon' onClick={renderProps.onClick} title='Google'><GoogleIcon color='#222' /></a>
-                )}
-            />
-        </>
+    return (
+        <div className='sign-in'>
+            <span className='label'>Sign in to comment:</span>
+            <ul className='choices'>
+                <GoogleLogin 
+                    clientId={GOOGLE_CLIENT_ID}
+                    onSuccess={resp => setAuthorization({
+                        token: (resp as GoogleLoginResponse).tokenId, //TODO how to remove 'as'?
+                        tokenProvider: 'Google',
+                        name: (resp as GoogleLoginResponse).getBasicProfile().getName(),
+                        id: (resp as GoogleLoginResponse).getId()
+                    })} 
+                    isSignedIn={true}
+                    render={renderProps => (
+                        <li>
+                            <button className='sign-in-button' onClick={renderProps.onClick}><GoogleIcon className='icon' />Google</button>
+                        </li>
+                    )}
+                />
+            </ul>
+        </div>
+    );
 }
diff --git a/client/style.scss b/client/style.scss
@@ -9,12 +9,48 @@ $accent-dark: #3d7e9a;
     color: $almost-black;
     white-space: pre-line;
 
-    .sign-in-icon {
-        display: inline-block;
-        margin-left: 8px;
-        height: 18px;
-        width: 18px;
-        cursor: pointer;
+    .sign-in {
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+
+        .label {
+            margin-right: 10px;
+        }
+
+        .choices {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                display: flex;
+            }
+        }
+
+        .sign-in-button {
+            display: flex;
+            align-items: center;
+
+            background: $almost-white;
+            outline: none;
+            border: 1px solid lightgrey;
+            padding: 8px 12px;
+            border-radius: 3px;
+            cursor: pointer;
+
+            &:hover, &:focus {
+                border-color: $accent-dark;
+                background: white;
+            }
+
+            .icon {
+                display: inline-block;
+                margin-right: 5px;
+                height: 18px;
+                width: 18px;
+            }
+        }
     }
 }