diff --git a/src/client/chat--leftFriends.jsx b/src/client/chat--leftFriends.jsx index 026d64e..e504c53 100644 --- a/src/client/chat--leftFriends.jsx +++ b/src/client/chat--leftFriends.jsx @@ -1,13 +1,10 @@ import './chat--leftFriends.scss'; -import classnames from 'classnames'; import React from 'react'; -import {useParams} from 'react-router-dom'; import Channel from './channel'; export default function ChatLeftRooms() { - const {type, name} = useParams(); const favorites = ['BabeHasHiccups']; const friends = ['BabeHasHiccups', 'mystifired'].filter((channel) => -1 === favorites.indexOf(channel)); const favoritesActions = [ diff --git a/src/client/chat--leftRooms.jsx b/src/client/chat--leftRooms.jsx index ee0654e..be020e8 100644 --- a/src/client/chat--leftRooms.jsx +++ b/src/client/chat--leftRooms.jsx @@ -1,13 +1,10 @@ import './chat--leftRooms.scss'; -import classnames from 'classnames'; import React from 'react'; -import {useParams} from 'react-router-dom'; import Channel from './channel'; export default function ChatLeftRooms() { - const {type, name} = useParams(); const favorites = ['reddichat']; const recent = ['reddichat', 'anonymous'].filter((channel) => -1 === favorites.indexOf(channel)); const favoritesActions = [ diff --git a/src/client/chat.jsx b/src/client/chat.jsx index 6e4e92e..2478176 100644 --- a/src/client/chat.jsx +++ b/src/client/chat.jsx @@ -1,9 +1,10 @@ import './chat.scss'; import React, {useEffect, useRef} from 'react'; -import {useHistory} from 'react-router-dom'; +import {useSelector} from 'react-redux'; +import {useHistory, useParams} from 'react-router-dom'; -import hydration from '~/common/hydration'; +import {userSelector} from '~/common/state/user'; import useBreakpoints from './hooks/useBreakpoints'; import ChatCenter from './chat--center'; @@ -12,14 +13,17 @@ import ChatRight from './chat--right'; export default function Chat() { const history = useHistory(); + const {type, name} = useParams(); const ref = useRef(null); const {tablet} = useBreakpoints(); + const user = useSelector(userSelector); + const allowedUser = !user.isAnonymous || ('r' === type && 'anonymous' === name); useEffect(() => { - if (!hydration('user')) { + if (!allowedUser) { history.goBack(); } }); - if (!hydration('user')) { + if (!allowedUser) { return null; } let origin; @@ -81,9 +85,9 @@ export default function Chat() { {...(tablet ? {} : onPointerEvents)} ref={ref} > - + {!user.isAnonymous && } - + {!user.isAnonymous && } ); } diff --git a/src/client/home.jsx b/src/client/home.jsx index 6cc15b1..e7df864 100644 --- a/src/client/home.jsx +++ b/src/client/home.jsx @@ -16,6 +16,12 @@ export default function Home() { reddit will simply confirm your reddichat login and send you back here. Then you can chat!

+

+ If you are exceptionally brave, you may choose to + {' '} + chat anonymously + . +

diff --git a/src/client/home.scss b/src/client/home.scss index a7c76bf..08ddfae 100644 --- a/src/client/home.scss +++ b/src/client/home.scss @@ -67,3 +67,11 @@ font-size: 2em; } } + +.home__anonymous { + line-height: 1.5em; + text-align: center; + a { + color: lighten($color-active, 20%); + } +} diff --git a/src/common/hydration.js b/src/common/state/hydration.js similarity index 100% rename from src/common/hydration.js rename to src/common/state/hydration.js diff --git a/src/common/state/user.js b/src/common/state/user.js index 6e6e56e..8be46bc 100644 --- a/src/common/state/user.js +++ b/src/common/state/user.js @@ -4,7 +4,7 @@ import { createSlice, } from '@reduxjs/toolkit'; -import hydration from '../hydration'; +import hydration from './hydration'; export const userSelector = (state) => state.user; @@ -32,6 +32,7 @@ const slice = createSlice({ name: 'user', initialState: hydration('user') || { friends: {}, + isAnonymous: true, redditUsername: 'anonymous', }, reducers: {