From 63fc9d7d50f460238565a0b761cb35d6c0a3a10f Mon Sep 17 00:00:00 2001 From: hippoz Date: Fri, 20 Aug 2021 21:31:56 +0300 Subject: [PATCH] major code clean-up: the ChannelView component is now smaller, main-card css class has been removed, among other changes --- bfrontend/src/Components/Auth/Create.js | 4 +- bfrontend/src/Components/Auth/Login.js | 2 +- .../Components/Channels/ChannelMessageView.js | 29 +++++++ .../Components/Channels/ChannelUserList.js | 2 +- .../src/Components/Channels/ChannelView.js | 86 ++++--------------- bfrontend/src/Components/Main/App.js | 11 +-- .../src/Components/Main/LoggedInMount.js | 11 +++ bfrontend/src/Components/UI/GradientBanner.js | 5 ++ bfrontend/src/Components/UI/Sidebar.js | 2 +- bfrontend/src/Styles/App.scss | 13 ++- bfrontend/src/Styles/Components/Button.scss | 1 - bfrontend/src/Styles/Components/Card.scss | 16 +--- .../src/Styles/Components/Containers.scss | 1 + bfrontend/src/Styles/Components/Message.scss | 2 - .../src/Styles/Components/ProfileLink.scss | 6 +- bfrontend/src/Styles/Components/Textbox.scss | 2 +- bfrontend/src/Styles/mixins.scss | 2 +- bfrontend/src/Styles/root.scss | 3 +- 18 files changed, 87 insertions(+), 111 deletions(-) create mode 100644 bfrontend/src/Components/Channels/ChannelMessageView.js create mode 100644 bfrontend/src/Components/Main/LoggedInMount.js create mode 100644 bfrontend/src/Components/UI/GradientBanner.js diff --git a/bfrontend/src/Components/Auth/Create.js b/bfrontend/src/Components/Auth/Create.js index e9e26d8..75a12e2 100644 --- a/bfrontend/src/Components/Auth/Create.js +++ b/bfrontend/src/Components/Auth/Create.js @@ -66,7 +66,7 @@ export default function Create() { } if (specialCodePrompt) return ( -
+

One more thing!

You need a special code to sign up here!

@@ -78,7 +78,7 @@ export default function Create() { ); return ( -
+

Create an account


diff --git a/bfrontend/src/Components/Auth/Login.js b/bfrontend/src/Components/Auth/Login.js index 4d79df2..2452df5 100644 --- a/bfrontend/src/Components/Auth/Login.js +++ b/bfrontend/src/Components/Auth/Login.js @@ -49,7 +49,7 @@ export default function Login() { } return ( -
+

Log in


diff --git a/bfrontend/src/Components/Channels/ChannelMessageView.js b/bfrontend/src/Components/Channels/ChannelMessageView.js new file mode 100644 index 0000000..f8a5056 --- /dev/null +++ b/bfrontend/src/Components/Channels/ChannelMessageView.js @@ -0,0 +1,29 @@ +import Message from "../Messages/Message"; +import { useRef, useEffect } from 'react'; + +export default function ChannelMessageView({messages}) { + const invisibleBottomMessageRef = useRef(null); + + useEffect(() => { + if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) { + invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' }); + } + }, [messages]); + + let messagesView = messages.map((m, i) => { + return ; + }); + + if (messagesView === undefined || messagesView.length <= 0) { + messagesView = ( +
+ No messages yet... +
+ ); + } + + return
+ { messagesView } +
+
; +} \ No newline at end of file diff --git a/bfrontend/src/Components/Channels/ChannelUserList.js b/bfrontend/src/Components/Channels/ChannelUserList.js index 81985be..3164070 100644 --- a/bfrontend/src/Components/Channels/ChannelUserList.js +++ b/bfrontend/src/Components/Channels/ChannelUserList.js @@ -2,7 +2,7 @@ import UserProfileButton from '../Users/UserButton'; function ChannelUserList({ presence }) { return ( -
+
{ Object.keys(presence).map((userId) => ) }
diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js index f98f505..59111dd 100644 --- a/bfrontend/src/Components/Channels/ChannelView.js +++ b/bfrontend/src/Components/Channels/ChannelView.js @@ -1,120 +1,64 @@ -import ChannelViewLoader from '../UI/ProfileLinkLoader'; import ChannelProfile from './ChannelProfileLink'; -import Message from '../Messages/Message'; import gatewayConnection from '../../API/Gateway/globalGatewayConnection'; import ChannelUserList from "./ChannelUserList"; -import { useParams } from 'react-router-dom'; import { connect, useDispatch } from 'react-redux'; import { useState, useRef, useEffect } from 'react'; +import ChannelMessageView from './ChannelMessageView'; - -const ChannelView = ({ channels, messages, channel, selectedChannelId, experiments, channelPresenceClientList, gradientBannerNotificationText }) => { - const { id } = useParams(); +const ChannelView = ({ messages, channel, channelPresenceClientList }) => { const [ textInput, setTextInput ] = useState(''); - const textInputRef = useRef(null); - const invisibleBottomMessageRef = useRef(null); - const dispatch = useDispatch(); - useEffect(() => { - if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) { - invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' }); - } - }, [messages]); - const handleTextboxKeydown = (e) => { if (e.key === 'Enter') { - gatewayConnection.sendMessage(textInput, id); + gatewayConnection.sendMessage(textInput, channel._id); textInputRef.current.value = ''; setTextInput(''); } } useEffect(() => { - if (!channels) return; if (!channel) return; - if (channel._id === selectedChannelId) return; dispatch({ type: 'channels/selectchannel', channelId: channel._id }); - }, [channels, id, dispatch, channel, selectedChannelId]); + }, [dispatch, channel]); if (channel) { - let messagesView = messages.map((m, i) => { - //if (messages[i-1] && messages[i-1].author.username === m.author.username) return - return ; - }); - - if (messagesView === undefined || messagesView.length <= 0) { - messagesView = ( -
-
-
- #? -
-
- No messages yet... -
- ); - } - return (
- { (experiments.voiceSFUTesting) && } + {/* + { (experiments.voiceSFUTesting) && } + */}
- {(gradientBannerNotificationText !== undefined) &&
dispatch({ type: "application/updatebannertext", text: undefined }) }> - { gradientBannerNotificationText } -
} - -
+
-
- { messagesView } -
-
- +
setTextInput(target.value) }>
- { (experiments.userListTest) && } +
- ) - } else { - return ( -
-
- -
-
- -
-
- -
-
- ) + ); } + return null; }; const stateToProps = (state, ownProps) => { - const channelId = ownProps.match.params.id; // NOTE: kind of a hack, but it works and idk if theres any other solution + const channelId = ownProps.channelId; return { - channels: state?.channels, channel: state?.channels?.find(x => x._id === channelId), messages: state?.messages[channelId] || [], - selectedChannelId: state?.selectedChannelId, - experiments: state?.experiments || {}, channelPresenceClientList: state?.channelPresenceClientList, - gradientBannerNotificationText: state?.gradientBannerNotificationText }; }; diff --git a/bfrontend/src/Components/Main/App.js b/bfrontend/src/Components/Main/App.js index 911de28..35469fb 100644 --- a/bfrontend/src/Components/Main/App.js +++ b/bfrontend/src/Components/Main/App.js @@ -4,12 +4,12 @@ import Root from '../Home/Root'; import Authenticator from '../../API/Authenticator'; import Notification from '../UI/Notification'; import './../../Styles/App.scss'; -import ChannelView from '../Channels/ChannelView'; import Sidebar from '../UI/Sidebar'; import { useEffect, useState } from 'react'; import { useDispatch, connect } from 'react-redux' import { BrowserRouter, Switch, Route } from 'react-router-dom'; +import LoggedInMount from './LoggedInMount'; function App({ user }) { const [ notificationText ] = useState(''); @@ -37,14 +37,7 @@ function App({ user }) { { - return ( - <> - - - - ); - }} + render={() => } /> diff --git a/bfrontend/src/Components/Main/LoggedInMount.js b/bfrontend/src/Components/Main/LoggedInMount.js new file mode 100644 index 0000000..2a897e9 --- /dev/null +++ b/bfrontend/src/Components/Main/LoggedInMount.js @@ -0,0 +1,11 @@ +import { useParams } from "react-router-dom"; +import Sidebar from "../UI/Sidebar"; +import ChannelView from "../Channels/ChannelView"; + +export default function LoggedInMount() { + const { id: channelId } = useParams(); + return <> + + + ; +} \ No newline at end of file diff --git a/bfrontend/src/Components/UI/GradientBanner.js b/bfrontend/src/Components/UI/GradientBanner.js new file mode 100644 index 0000000..1937b5e --- /dev/null +++ b/bfrontend/src/Components/UI/GradientBanner.js @@ -0,0 +1,5 @@ +export default function GradientBanner() { + return (gradientBannerNotificationText !== undefined) &&
dispatch({ type: "application/updatebannertext", text: undefined }) }> + { gradientBannerNotificationText } +
; +} diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js index b64f88e..09351d2 100644 --- a/bfrontend/src/Components/UI/Sidebar.js +++ b/bfrontend/src/Components/UI/Sidebar.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux'; function Sidebar({ user }) { return ( -
+
diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index 8095916..329c9e8 100644 --- a/bfrontend/src/Styles/App.scss +++ b/bfrontend/src/Styles/App.scss @@ -16,7 +16,7 @@ background: var(--accent-color-light); } ::-webkit-scrollbar-thumb { - background: var(--default-main-card-color); + background: var(--default-scrollbar-color); } body { @@ -29,6 +29,15 @@ body { padding: 0px; } +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; +} + * { - font-size: 18px !important; + font-size: 18px; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Button.scss b/bfrontend/src/Styles/Components/Button.scss index b7042dc..39a374b 100644 --- a/bfrontend/src/Styles/Components/Button.scss +++ b/bfrontend/src/Styles/Components/Button.scss @@ -14,7 +14,6 @@ &-channel { @extend .button; - box-shadow: none; border-radius: var(--channel-button-border-radius); width: 200px; min-height: 40px; diff --git a/bfrontend/src/Styles/Components/Card.scss b/bfrontend/src/Styles/Components/Card.scss index 51ab321..61766d9 100644 --- a/bfrontend/src/Styles/Components/Card.scss +++ b/bfrontend/src/Styles/Components/Card.scss @@ -1,9 +1,8 @@ @mixin card { padding: 0px; margin: 0px; - background-color: var(--default-main-card-color); + background-color: rgba(0, 0, 0, 0); border-radius: var(--default-border-radius); - box-shadow: 0px 1px 1px var(--card-box-shadow-color); } // hh @@ -23,7 +22,7 @@ align-items: center; justify-content: left; font-size: medium; - z-index: 100; + z-index: 10; &-accent { @extend .bar-card; @@ -37,23 +36,14 @@ @include fancy-scrollbar-firefox; background-color: var(--channel-message-list-background-color); - box-shadow: none; flex-basis: 100%; border-radius: 0px; overflow: auto; } -.main-card { - @include card; - - box-shadow: none; -} - .col-flex-card { @include card; - box-shadow: none; - flex-grow: 1; display: flex; flex-direction: column; @@ -62,8 +52,6 @@ .row-flex-card { @include card; - box-shadow: none; - flex-grow: 10; display: flex; flex-direction: row; diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss index 9b7e65b..2578242 100644 --- a/bfrontend/src/Styles/Components/Containers.scss +++ b/bfrontend/src/Styles/Components/Containers.scss @@ -10,6 +10,7 @@ .sidebar { @include fancy-scrollbar-firefox; + @include card; background-color: var(--channel-list-background-color); diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss index a3427db..bc54201 100644 --- a/bfrontend/src/Styles/Components/Message.scss +++ b/bfrontend/src/Styles/Components/Message.scss @@ -1,8 +1,6 @@ .message { @include card; - box-shadow: none; - display: flex; flex-direction: row; margin: 3px; diff --git a/bfrontend/src/Styles/Components/ProfileLink.scss b/bfrontend/src/Styles/Components/ProfileLink.scss index 9f1648c..9e02c86 100644 --- a/bfrontend/src/Styles/Components/ProfileLink.scss +++ b/bfrontend/src/Styles/Components/ProfileLink.scss @@ -79,17 +79,17 @@ } .default-channel-styled-text { - font-size: 24px !important; + font-size: 24px; filter: drop-shadow(2px 2px hsl(300, 60%, 25%)); user-select: none; &.no-messages-text { filter: drop-shadow(45px 0 hsl(300, 60%, 40%)); - font-size: 8em !important; + font-size: 8em; } } .default-user-styled-text { - font-size: 24px !important; + font-size: 24px; user-select: none; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Textbox.scss b/bfrontend/src/Styles/Components/Textbox.scss index e9f2893..1642a04 100644 --- a/bfrontend/src/Styles/Components/Textbox.scss +++ b/bfrontend/src/Styles/Components/Textbox.scss @@ -13,6 +13,6 @@ height: 32px; padding: 6px; padding-left: 16px; - font-size: 16px !important; + font-size: 16px; } } \ No newline at end of file diff --git a/bfrontend/src/Styles/mixins.scss b/bfrontend/src/Styles/mixins.scss index 22f9e70..a5d688f 100644 --- a/bfrontend/src/Styles/mixins.scss +++ b/bfrontend/src/Styles/mixins.scss @@ -1,4 +1,4 @@ @mixin fancy-scrollbar-firefox { scrollbar-width: none; - scrollbar-color: var(--default-main-card-color) var(--accent-color-light); + scrollbar-color: var(--default-scrollbar-color) var(--accent-color-light); } \ No newline at end of file diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss index a61a1cf..efe384a 100644 --- a/bfrontend/src/Styles/root.scss +++ b/bfrontend/src/Styles/root.scss @@ -5,8 +5,7 @@ --card-accent-color: hsl(0, 0%, 10%); --card-accent-color-dark: hsl(0, 0%, 5%); - --default-main-card-color: var(--background-color); - --card-box-shadow-color: 0 1px 0 #1d1a1abe; + --default-scrollbar-color: var(--background-color); --focus-accent-background: var(--card-accent-color); --focus-accent-background-deep: var(--card-accent-color-dark);