-
-
+
+
+
|
Blank lines separate paragraphs.
diff --git a/pages/index.tsx b/pages/index.tsx
index dda2894..6c414e8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
import gql from 'graphql-tag';
-import * as React from 'react';
+import React, { useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { NewsFeed, newsFeedNewsItemFragment } from '../src/components/news-feed';
@@ -8,6 +8,10 @@ import { MainLayout } from '../src/layouts/main-layout';
import { FeedType } from '../src/data/models';
import { POSTS_PER_PAGE } from '../src/config';
+
+import { BlankLayout } from '../src/layouts/blank-layout';
+import { logoutSuccessMessage } from './../src/data/validation/user';
+
const query = gql`
query topNewsItems($type: FeedType!, $first: Int!, $skip: Int!) {
feed(type: $type, first: $first, skip: $skip) {
@@ -17,12 +21,15 @@ const query = gql`
${newsFeedNewsItemFragment}
`;
+
+
export interface ITopNewsFeedProps {
options: {
currentUrl: string;
first: number;
skip: number;
};
+
}
export function IndexPage(props): JSX.Element {
@@ -35,10 +42,24 @@ export function IndexPage(props): JSX.Element {
const { data } = useQuery(query, { variables: { first, skip, type: FeedType.TOP } });
+
+ useEffect(() => {
+ if (router.query.logout) {
+ logoutSuccessMessage();
+ }
+
+ window.history.replaceState(null, '', '/');
+ }, [router.query.logout, router.query.login]);
+
+ router.pathname = "/";
+
+
return (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/login.tsx b/pages/login.tsx
index 50a8cae..1afbde5 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -10,7 +10,10 @@ import {
UserLoginErrorCode,
} from '../src/helpers/user-login-error-code';
import { withDataAndRouter } from '../src/helpers/with-data';
-import { BlankLayout } from '../src/layouts/blank-layout';
+import { LoginLayout } from '../src/layouts/login-layout';
+
+import useSound from 'use-sound';
+import { useSoundContext } from '../src/context/state';
export interface ILoginPageProps {
router?: NextRouter;
@@ -28,7 +31,19 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
const [loginPassword, setLoginPassword] = useState('');
const [registerId, setRegisterId] = useState('');
const [registerPassword, setRegisterPassword] = useState('');
- const [validationMessage, setValidationMessage] = useState('');
+ const [loginValidationMessage, setLoginValidationMessage] = useState('');
+ const [registerValidationMessage, setRegisterValidationMessage] = useState('');
+ //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): void => {
if (data?.me) {
@@ -37,9 +52,13 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
} else {
try {
validateNewUser({ id: loginId, password: loginPassword });
+ if (state) { playClick(); }
} catch (err) {
e.preventDefault();
- setValidationMessage(err.message);
+ setLoginValidationMessage(err.message);
+ if (state) {
+ playError();
+ }
}
}
};
@@ -51,106 +70,129 @@ function LoginPage(props: ILoginPageProps): JSX.Element {
} else {
try {
validateNewUser({ id: registerId, password: registerPassword });
+ if (state) { playClick(); }
} catch (err) {
e.preventDefault();
- setValidationMessage(err.message);
+ setRegisterValidationMessage(err.message);
+ if (state) { playError(); }
}
}
};
return (
-
- {message && {message} }
- {validationMessage && {validationMessage} }
- Login
-
-
- | |