From df22c68672da9df32eeb00b5778f02aa9f9080a5 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Wed, 15 Jul 2020 22:50:10 -0500
Subject: [PATCH] feat: anonymous

---
 src/client/chat--leftFriends.jsx    |  3 ---
 src/client/chat--leftRooms.jsx      |  3 ---
 src/client/chat.jsx                 | 16 ++++++++++------
 src/client/home.jsx                 |  6 ++++++
 src/client/home.scss                |  8 ++++++++
 src/common/{ => state}/hydration.js |  0
 src/common/state/user.js            |  3 ++-
 7 files changed, 26 insertions(+), 13 deletions(-)
 rename src/common/{ => state}/hydration.js (100%)

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