feat: anonymous

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 = [

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 = [

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}
     >
-      <ChatLeft />
+      {!user.isAnonymous && <ChatLeft />}
       <ChatCenter />
-      <ChatRight />
+      {!user.isAnonymous && <ChatRight />}
     </div>
   );
 }

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!
           </p>
+          <p className="home__anonymous">
+            If you are exceptionally brave, you may choose to
+            {' '}
+            <a href="/chat/r/anonymous">chat anonymously</a>
+            .
+          </p>
         </div>
       </div>
     </div>

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%);
+  }
+}

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: {