Feature/add multi modality

package.json

@@ -59,9 +59,11 @@
     "react-apollo": "3.1.5",
     "react-bootstrap": "^1.6.0",
     "react-dom": "17.0.2",
+    "react-icons": "^4.2.0",
     "react-notifications-component": "^3.1.0",
     "react-render-html": "0.6.0",
-    "url": "0.11.0"
+    "url": "0.11.0",
+    "use-sound": "^3.0.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.11.10",

pages/_app.tsx

@@ -0,0 +1,11 @@
+import { SoundProvider } from "../src/context/state";
+
+function MyApp({ Component, pageProps }) {
+    return (
+        <SoundProvider>
+            <Component {...pageProps} />
+        </SoundProvider>
+    );
+}
+
+export default MyApp;

pages/forgot.tsx

@@ -4,20 +4,35 @@ import React, { useState } from 'react';
 import { withDataAndRouter } from '../src/helpers/with-data';
 import { LoginLayout } from '../src/layouts/login-layout';
 
+import useSound from 'use-sound';
+import { useSoundContext } from '../src/context/state';
+
 export interface IForgotPageProps {
   router: NextRouter; // { how: UserLoginErrorCode }
 }
 
 function ForgotPage(props: IForgotPageProps): JSX.Element {
   const [username, setUsername] = useState<string>('');
 
+  const { state } = useSoundContext();
+  const [playActive] = useSound(
+    '/click.mp3',
+    { volume: 0.5 }
+  );
+  const handleSubmit = (form) => {
+    if (state) {
+      playActive();
+    }
+    form.submit();
+  };
+
   return (
     <LoginLayout>
       <div>
         <b style={{display: 'flex',  justifyContent:'center', alignItems:'center'}}>Reset your password</b>
         <br />
         <br />
-        <form method="post" action="/x" >
+        <form method="post" action="/x" onSubmit={handleSubmit}>
           <input type="hidden" name="fnid" value="SW3mxENlH7rdjgxwWaobR5" />
           <input type="hidden" name="fnop" value="forgot-password" />
           <div style={{display: 'flex',  justifyContent:'center', alignItems:'center'}} > username:{' '} 

pages/index.tsx

@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import React, { ReactDOM, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 
 import { NewsFeed, newsFeedNewsItemFragment } from '../src/components/news-feed';

pages/login.tsx

@@ -12,8 +12,8 @@ import {
 import { withDataAndRouter } from '../src/helpers/with-data';
 import { LoginLayout } from '../src/layouts/login-layout';
 
-import { store } from 'react-notifications-component';
-
+import useSound from 'use-sound';
+import { useSoundContext } from '../src/context/state';
 
 export interface ILoginPageProps {
   router?: NextRouter;
@@ -35,17 +35,30 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
   const [registerValidationMessage, setRegisterValidationMessage] = useState<string>('');
   //const alert = useAlert();
 
+  const { state } = useSoundContext();
+  const [playError] = useSound(
+    '/tap2.mp3',
+    { volume: 0.5 }
+  );
+  const [playClick] = useSound(
+    '/click.mp3',
+    { volume: 0.5 }
+  );
+
   const validateLogin = (e: React.FormEvent<HTMLFormElement>): void => {
     if (data?.me) {
       e.preventDefault();
       Router.push('/login?how=loggedin');
     } else {
       try {
         validateNewUser({ id: loginId, password: loginPassword });
-
+        if (state) { playClick(); }
       } catch (err) {
         e.preventDefault();
         setLoginValidationMessage(err.message);
+        if (state) {
+          playError();
+        }
       }
     }
   };
@@ -57,9 +70,11 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
     } else {
       try {
         validateNewUser({ id: registerId, password: registerPassword });
+        if (state) { playClick(); }
       } catch (err) {
         e.preventDefault();
         setRegisterValidationMessage(err.message);
+        if (state) { playError(); }
       }
     }
   };
@@ -75,7 +90,9 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
         <form
           method="post"
           action="/login"
-          onSubmit={(e): void => validateLogin(e)}
+          onSubmit={(e): void => {
+            validateLogin(e);
+          }}
           style={{ marginBottom: '2em' }}
         >
           <input type="hidden" name="goto" value={routerQuery.goto || 'news'} />
@@ -88,7 +105,9 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
                     autoCapitalize="off"
                     autoCorrect="off"
                     name="id"
-                    onChange={(e): void => setLoginId(e.target.value)}
+                    onChange={(e): void => {
+                      setLoginId(e.target.value);                      
+                    }}
                     size={20}
                     spellCheck={false}
                     type="text"
@@ -128,7 +147,9 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
         <form
           method="post"
           action={`/register`}
-          onSubmit={(e): void => validateRegister(e)}
+          onSubmit={(e): void => {
+            validateRegister(e);
+          }}
           style={{ marginBottom: '2em' }}
         >
           <table style={{ display: 'flex',  justifyContent:'center', alignItems:'center', border: '0px' }}>

pages/reply.tsx

@@ -104,7 +104,7 @@ function ReplyPage(props: IReplyPageProps): JSX.Element {
               <tr>
                 <td colSpan={2} />
                 <td>
-                  <form method="post" action="comment">
+                  <form method="post" action="comment" >
                     <input type="hidden" name="parent" value="15260438" />
                     <input type="hidden" name="goto" value="item?id=15260384#15260438" />
                     <input

pages/submit.tsx

@@ -12,6 +12,9 @@ import { MainLayout } from '../src/layouts/main-layout';
 
 import { ErrorAction } from '../src/components/error-action';
 
+import useSound from 'use-sound';
+import { useSoundContext } from '../src/context/state';
+
 interface ISubmitPageProps {
   router;
 }
@@ -41,6 +44,7 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
       } catch (err) {
         console.log(err.message);
         setSubmitValidationMessage(err.message);
+        if (state) { playError(); }
         e.preventDefault();
       }
     }
@@ -59,6 +63,16 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
     },
   });
 
+  const { state } = useSoundContext();
+  const [playError] = useSound(
+    '/tap2.mp3',
+    { volume: 0.5 }
+  );
+  const [playClick] = useSound(
+    '/click.mp3',
+    { volume: 0.5 }
+  );
+
   return (
     <MainLayout
       currentUrl={router.pathname}
@@ -70,7 +84,9 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
     <div><ErrorAction onNotLoggedIn={notLoggedIn} onCancel={onCancel} /></div>
       <tr>
         <td>
-          <form onSubmit={(e): void => validateSubmit(e)}>
+          <form onSubmit={(e): void => {
+              validateSubmit(e);
+            }}>
             <input type="hidden" name="fnid" value="GvyHFpy11L26dCAIgGQ9rv" />
             <input type="hidden" name="fnop" value="submit-page" />
             <script type="text/javascript">
@@ -147,7 +163,7 @@ function SubmitPage(props: ISubmitPageProps): JSX.Element {
                       <input
                         type="submit"
                         value="submit"
-                        onClick={(): Promise<any> => submitNewsItem()}
+                        onClick={(): Promise<any> =>  {if (state) { playClick(); } return submitNewsItem();}}
                       />
                     </div>
                   </td>

pages/user.tsx

@@ -11,6 +11,9 @@ import { BlankLayout } from '../src/layouts/blank-layout';
 import { MainLayout } from '../src/layouts/main-layout';
 import { logoutSuccessMessage } from './../src/data/validation/user';
 
+import useSound from 'use-sound';
+import { useSoundContext } from '../src/context/state';
+
 const query = gql`
   query User($id: String!) {
     user(id: $id) {
@@ -38,12 +41,21 @@ export interface IUserPageQuery {
 }
 
 function UserPage(props: IUserPageProps): JSX.Element {
+
   const { router } = props;
-
+  console.log(router.query);
   const userId = (router.query && router.query.id) || '';
 
   const { data } = useQuery<IUserPageQuery>(query, { variables: { id: userId } });
 
+  useEffect(() => {
+    if (router.query.logout) {
+      logoutSuccessMessage();
+    }
+
+    window.history.replaceState(null, '', `/user?id=${router.query.id}`);
+  }, [router.query.login]);
+
   if (data?.error) {
     return <BlankLayout>Error loading news items.</BlankLayout>;
   }
@@ -63,22 +75,26 @@ function UserPage(props: IUserPageProps): JSX.Element {
     email = e.target.value;
   };
 
-  useEffect(() => {
-    if (router.query.logout) {
-      logoutSuccessMessage();
-    }
+  const url = `/user?id=${router.query.id}`;
 
-    window.history.replaceState(null, '', `/user?id=${router.query.id}`);
-  }, [router.query.login]);
+  const { state } = useSoundContext();
+  const [playClick] = useSound(
+    '/click.mp3',
+    { volume: 0.5 }
+  );
 
-  console.log(data);
+  const handleSubmit = (e: React.FormEvent<HTMLInputElement>): void => {
+      if (state) {
+        playClick();
+      }
+  };
 
   if (data?.me && data?.user.id === data.me.id)
     return (
       <MainLayout currentUrl={router.pathname} isFooterVisible={true}>
         <tr>
           <td>
-            <form className="profileform" method="post" action="/xuser">
+            <form className="profileform" method="post" action="/xuser" >
               <input type="hidden" name="id" value="clintonwoo" />
               <input type="hidden" name="hmac" value="71104445c3c41b4167c38db67a656e610d5fbad9" />
               <br/>
@@ -114,11 +130,11 @@ function UserPage(props: IUserPageProps): JSX.Element {
                         style={{ fontSize: '-2' }}
                         wrap="virtual"
                       />
-                      <Link href="/formatdoc">
+                      {/* <Link href="/formatdoc">
                         <a tabIndex={-1} style={{ color: '#afafaf' }}>
                           help
                         </a>
-                      </Link>
+                      </Link> */}
                     </td>
                   </tr>
                   <tr>
@@ -182,7 +198,7 @@ function UserPage(props: IUserPageProps): JSX.Element {
                   <tr>
                     <td />
                     <td>
-                      <Link href="/submitted?id=clintonwoo">
+                      <Link href={`/submitted?id=${data?.user.id}`}>
                         <a>
                           <u>submissions</u>
                         </a>
@@ -192,7 +208,7 @@ function UserPage(props: IUserPageProps): JSX.Element {
                   <tr>
                     <td />
                     <td>
-                      <Link href="/threads?id=clintonwoo">
+                      <Link href={`/threads?id=${data?.user.id}`}>
                         <a>
                           <u>comments</u>
                         </a>
@@ -250,7 +266,7 @@ function UserPage(props: IUserPageProps): JSX.Element {
               <br />
               <br/>
               <div style={{display: 'flex',  justifyContent:'center', alignItems:'center'}}>
-                <input type="submit" value="update" />
+                <input type="submit" value="update" onClick={handleSubmit}/>
               </div>
             </form>
             <br />

server/services/user-service.ts

@@ -27,7 +27,7 @@ export class UserService {
     if (user) {
       return (
         (await createHash(password, user.passwordSalt!, passwordIterations)) === user.hashedPassword
-      );
+      );  
     }
 
     return false;

src/components/comment-box.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 export function CommentBox(): JSX.Element {
+
   return (
     <tr>
       <td colSpan={2} />

src/components/error-action.tsx

@@ -3,6 +3,9 @@ import { useRouter } from 'next/router';
 import Modal from 'react-bootstrap/Modal'
 import "bootstrap/dist/css/bootstrap.min.css";
 
+import useSound from 'use-sound';
+import { useSoundContext } from '../context/state';
+
 export interface IErrorActionProps {
   onCancel: any;
   onNotLoggedIn: boolean;
@@ -18,13 +21,21 @@ export function ErrorAction(props: IErrorActionProps): JSX.Element {
     }, [onNotLoggedIn]);
 
     const handleClose = () => {
+      if(state) { playClick(); }
       setShow(false);
       onCancel();
     };
 
     const handleLogin = () => {
+        if(state) { playClick(); }
         router.push(`/login?goto=${router.pathname}`);       
     }
+
+    const { state } = useSoundContext();
+    const [playClick] = useSound(
+      '/click.mp3',
+      { volume: 0.5 }
+    );
 
     return (
       <React.Fragment>

src/components/footer.tsx

@@ -45,7 +45,7 @@ export function Footer(props): JSX.Element {
           </span>
           <br />
           <br />
-          {isFooterNotVisible?
+          {/* {isFooterNotVisible?
             (null):
             (<form method="get" action="//hn.algolia.com/" style={{ marginBottom: '1em' }}>
               Search:
@@ -59,7 +59,7 @@ export function Footer(props): JSX.Element {
                 autoComplete="false"
               />
             </form>)
-          }
+          } */}
 
         </div>
       </td>