From 118a55fed9cb2bb1a8844cd433ead8064d20c82d Mon Sep 17 00:00:00 2001 From: hippoz Date: Sun, 28 Mar 2021 21:05:52 +0300 Subject: [PATCH] ui overhaul + integrate gateway better --- bfrontend/src/Components/Auth/Login.js | 2 +- .../src/Components/Channels/ChannelButton.js | 4 +- .../src/Components/Channels/ChannelList.js | 4 +- .../Components/Channels/ChannelListLoader.js | 56 ++-- .../Components/Channels/ChannelUserList.js | 25 ++ .../src/Components/Channels/ChannelView.js | 60 ++-- bfrontend/src/Components/Main/App.js | 13 +- bfrontend/src/Components/Messages/Message.js | 4 +- bfrontend/src/Components/UI/ProfileLink.js | 6 +- .../ProfileLinkLoader.js} | 4 +- bfrontend/src/Components/UI/Sidebar.js | 8 +- bfrontend/src/Components/Users/UserButton.js | 19 ++ .../Images/defaultprofile_256px-256px.png | Bin 645 -> 1912 bytes bfrontend/src/Styles/App.scss | 279 +----------------- bfrontend/src/Styles/Components/Button.scss | 43 +++ bfrontend/src/Styles/Components/Card.scss | 67 +++++ .../src/Styles/Components/Containers.scss | 38 +++ bfrontend/src/Styles/Components/Message.scss | 23 ++ .../src/Styles/Components/ProfileLink.scss | 48 +++ bfrontend/src/Styles/Components/Textbox.scss | 15 + bfrontend/src/Styles/colors.scss | 34 +++ bfrontend/src/Styles/mixins.scss | 4 + bfrontend/src/Styles/root.scss | 32 ++ 23 files changed, 446 insertions(+), 342 deletions(-) create mode 100644 bfrontend/src/Components/Channels/ChannelUserList.js rename bfrontend/src/Components/{Channels/ChannelViewLoader.js => UI/ProfileLinkLoader.js} (85%) create mode 100644 bfrontend/src/Components/Users/UserButton.js create mode 100644 bfrontend/src/Styles/Components/Button.scss create mode 100644 bfrontend/src/Styles/Components/Card.scss create mode 100644 bfrontend/src/Styles/Components/Containers.scss create mode 100644 bfrontend/src/Styles/Components/Message.scss create mode 100644 bfrontend/src/Styles/Components/ProfileLink.scss create mode 100644 bfrontend/src/Styles/Components/Textbox.scss create mode 100644 bfrontend/src/Styles/colors.scss create mode 100644 bfrontend/src/Styles/mixins.scss create mode 100644 bfrontend/src/Styles/root.scss diff --git a/bfrontend/src/Components/Auth/Login.js b/bfrontend/src/Components/Auth/Login.js index 3e53b3f..974f3d3 100644 --- a/bfrontend/src/Components/Auth/Login.js +++ b/bfrontend/src/Components/Auth/Login.js @@ -49,7 +49,7 @@ export default function Login() { } return ( -
+

setUsernameInput(target.value) } /> diff --git a/bfrontend/src/Components/Channels/ChannelButton.js b/bfrontend/src/Components/Channels/ChannelButton.js index e5b2e76..66d790d 100644 --- a/bfrontend/src/Components/Channels/ChannelButton.js +++ b/bfrontend/src/Components/Channels/ChannelButton.js @@ -6,8 +6,8 @@ import { useHistory } from 'react-router-dom'; export default function ChannelButton({ channel, selected }) { const history = useHistory(); - let buttonClasses = 'button channel-button'; - if (selected) buttonClasses += ' pressed'; + let buttonClasses = 'button button-channel'; + if (selected) buttonClasses += ' button-pressed'; const handleClick = () => { if (gatewayConnection.handshakeCompleted) { diff --git a/bfrontend/src/Components/Channels/ChannelList.js b/bfrontend/src/Components/Channels/ChannelList.js index d750ab2..8d217f9 100644 --- a/bfrontend/src/Components/Channels/ChannelList.js +++ b/bfrontend/src/Components/Channels/ChannelList.js @@ -6,9 +6,9 @@ import { connect } from 'react-redux' function ChannelList({ selectedChannelId, channels }) { if (!channels) { return ( -
+ <> -
+ ); } else { return ( diff --git a/bfrontend/src/Components/Channels/ChannelListLoader.js b/bfrontend/src/Components/Channels/ChannelListLoader.js index ebc7111..90dfcf3 100644 --- a/bfrontend/src/Components/Channels/ChannelListLoader.js +++ b/bfrontend/src/Components/Channels/ChannelListLoader.js @@ -5,39 +5,39 @@ export default function ChannelListLoader(props) { const lessThan600 = useMediaPredicate("(max-width: 600px)"); if (lessThan600) { - return ( - - - - - - + + + + + ); } else { - return ( - - - - - - + + + + + ); } diff --git a/bfrontend/src/Components/Channels/ChannelUserList.js b/bfrontend/src/Components/Channels/ChannelUserList.js new file mode 100644 index 0000000..cffe0f8 --- /dev/null +++ b/bfrontend/src/Components/Channels/ChannelUserList.js @@ -0,0 +1,25 @@ +import UserProfileButton from '../Users/UserButton'; + +import { connect } from 'react-redux'; + +function Sidebar({ channelPresenceClientList }) { + const users = [ + { username: "thgitrhiorg" }, + { username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" }, + { username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM" } + ]; + + return ( +
+ { users.map((user) => ) } +
+ ) +} + +const stateToProps = (state) => { + return { + channelPresenceClientList: state?.channelPresenceClientList + }; +}; + +export default connect(stateToProps)(Sidebar); \ No newline at end of file diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js index 2424390..621df78 100644 --- a/bfrontend/src/Components/Channels/ChannelView.js +++ b/bfrontend/src/Components/Channels/ChannelView.js @@ -1,28 +1,28 @@ -import ChannelViewLoader from './ChannelViewLoader'; +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'; -function ChannelView({ channels, messages }) { + +const ChannelView = ({ channels, messages, channel, selectedChannelId }) => { const { id } = useParams(); const [ textInput, setTextInput ] = useState(''); - const [ channel, setChannel ] = useState(); const textInputRef = useRef(null); const invisibleBottomMessageRef = useRef(null); const dispatch = useDispatch(); - const scrollToBottom = () => { + useEffect(() => { if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) { invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' }); } - } - useEffect(scrollToBottom, [messages]); + }, [messages]); const handleTextboxKeydown = (e) => { if (e.key === 'Enter') { @@ -34,15 +34,11 @@ function ChannelView({ channels, messages }) { useEffect(() => { if (!channels) return; - - setChannel(channels.find(x => x._id === id)); - }, [channels, id]); - - useEffect(() => { if (!channel) return; + if (channel._id === selectedChannelId) return; dispatch({ type: 'channels/selectchannel', channelId: channel._id }); - }, [channel, dispatch]); + }, [channels, id, dispatch, channel, selectedChannelId]); if (channel) { let messagesView = messages.map(m => ); @@ -50,49 +46,57 @@ function ChannelView({ channels, messages }) { if (messagesView === undefined || messagesView.length <= 0) { messagesView = (
- A bit empty in here... + Wow, such empty!
); } return ( -
-
- +
+
+
-
- { messagesView } -
-
-
- setTextInput(target.value) }> + +
+
+
+ { messagesView } +
+
+ +
+ setTextInput(target.value) }> +
+
+
) } else { return ( -
-
+
+
-
+
-
+
) } - -} +}; const stateToProps = (state, ownProps) => { const channelId = ownProps.match.params.id; // NOTE(hippoz): kind of a hack, but it works and idk if theres any other solution return { channels: state?.channels, + channel: state?.channels?.find(x => x._id === channelId), messages: state?.messages[channelId] || [], + selectedChannelId: state?.selectedChannelId, }; }; diff --git a/bfrontend/src/Components/Main/App.js b/bfrontend/src/Components/Main/App.js index 5c508c6..3799f27 100644 --- a/bfrontend/src/Components/Main/App.js +++ b/bfrontend/src/Components/Main/App.js @@ -33,12 +33,21 @@ function App({ user }) {
- { user && } - + { + return ( + <> + + + + ); + }} + /> + { user && } diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js index a2a1f98..c2c56a2 100644 --- a/bfrontend/src/Components/Messages/Message.js +++ b/bfrontend/src/Components/Messages/Message.js @@ -3,8 +3,8 @@ import UserProfileLink from '../Users/UserProfileLink'; export default function Message({ message }) { return (
-

a

 - { message.content } + + { message.content }
); } \ No newline at end of file diff --git a/bfrontend/src/Components/UI/ProfileLink.js b/bfrontend/src/Components/UI/ProfileLink.js index e1e3628..5b57d45 100644 --- a/bfrontend/src/Components/UI/ProfileLink.js +++ b/bfrontend/src/Components/UI/ProfileLink.js @@ -1,9 +1,9 @@ import defaultProfile from '../../Content/Images/defaultprofile_256px-256px.png' -export default function ProfileLink({ object, size=32, type, offset=true, children=null }) { +export default function ProfileLink({ object, size, type, offset=true, children=null }) { let picture; - if (size !== 0) { + if (size !== "0") { // TODO: Make a debug error message for then the size does not exist const pictureClass = `profile-picture profile-picture-${size}`; @@ -28,4 +28,4 @@ export default function ProfileLink({ object, size=32, type, offset=true, childr { bottomInfo }
); -} \ No newline at end of file +}; \ No newline at end of file diff --git a/bfrontend/src/Components/Channels/ChannelViewLoader.js b/bfrontend/src/Components/UI/ProfileLinkLoader.js similarity index 85% rename from bfrontend/src/Components/Channels/ChannelViewLoader.js rename to bfrontend/src/Components/UI/ProfileLinkLoader.js index 535c8a0..63eaa85 100644 --- a/bfrontend/src/Components/Channels/ChannelViewLoader.js +++ b/bfrontend/src/Components/UI/ProfileLinkLoader.js @@ -7,8 +7,8 @@ export default function ChannelViewLoader(props) { width={100} height={46} viewBox="0 0 100 46" - backgroundColor="#434c5e" - foregroundColor="#4c566a" + backgroundColor="#423f3f" + foregroundColor="#4d4a4a" {...props} > diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js index adaf3a5..65ffff5 100644 --- a/bfrontend/src/Components/UI/Sidebar.js +++ b/bfrontend/src/Components/UI/Sidebar.js @@ -1,13 +1,15 @@ import ChannelList from '../Channels/ChannelList'; import UserProfileLink from '../Users/UserProfileLink'; +import ProfileLinkLoader from "../UI/ProfileLinkLoader"; import { connect } from 'react-redux'; function Sidebar({ user }) { return ( -
-
- +
+
+ { user && } + { !user && }
diff --git a/bfrontend/src/Components/Users/UserButton.js b/bfrontend/src/Components/Users/UserButton.js new file mode 100644 index 0000000..ea6fca4 --- /dev/null +++ b/bfrontend/src/Components/Users/UserButton.js @@ -0,0 +1,19 @@ +import UserProfile from './UserProfileLink'; + +import { useHistory } from 'react-router-dom'; + +export default function ChannelUserButton({ user }) { + const history = useHistory(); + + let buttonClasses = 'button button-channel'; + + const handleClick = () => { + history.push(`/user/${user._id}`); + }; + + return ( + + ); +} \ No newline at end of file diff --git a/bfrontend/src/Content/Images/defaultprofile_256px-256px.png b/bfrontend/src/Content/Images/defaultprofile_256px-256px.png index 0ace865910a9f928c5ac52945e6c440c12ae05dd..3851142beeec42e9d46d47fa907cc82d76ad421b 100644 GIT binary patch literal 1912 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&t&wwUqN(1_s8KOlRi+PiJR^f};Gi%$!sP z291fe6Ky>X2Z*%#2QOVD%5L3Zm9oN5%*9n^E0^mEfvnarS)aIH?7mWyM8w?>Zhi3J zeA3l}MQpq(g-ZJ|8W#b8EPucVUI)x$hevoA@<6FfLfS{m)b@ zgU_B-YnQtAH|)!O@Mzak&FTYB`3yd!oLKh8%TY^lKKs4%FJ^CY_^*3m@3XUOEBh|9 zEBJ2qy2rrYejuZ9)AibWcdy!QuYYgy{5!M9uA*s%XAM|^(ZX5a5n0T@pr;JNj1^1m z%NQ6~XL-6fhE&{od)1JUfq{j=af{)Lcz^cQyE*pP_?0t!@b_d$U|^77U|?ftU?ht< zu-bu+ro{1-YX^Ft?4W~$IEC6J$c;Eye8Xt+{V}jfAb~+>fYShlDR49iv5{5sASGN1 jQy|bJ3geJu?FY^>9ZX=U_sERB$p8eNu6{1-oD!M<-_TZ} literal 645 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911L)MWvCLm?NMQuIx`4Sp`%WrL?+(fkKict`Q~9`MJ5Nc_j?aMX8A;sVNHOnI#zt?w-B@;f;La zK$HJ_x;TbZ+d_wI2!Ei4vLLFks4Yq