From 6d2581c072f8b14c4883e75785652d0594e4eb19 Mon Sep 17 00:00:00 2001 From: Pavel <14926950+prichodko@users.noreply.github.com> Date: Thu, 31 Mar 2022 15:34:32 +0200 Subject: [PATCH] Use react-router-dom for routing (#246) * feat(react): move chat and new-chat to routes * feat(react): setup react router * feat(react): use links in sidebar * feat(react): add link to IconButton component * feat(react): add router to config --- .../components/main-sidebar/channel-group.tsx | 4 +- .../main-sidebar/community-dialog.tsx | 58 +++ .../src/components/main-sidebar/index.tsx | 33 +- .../components/main-sidebar/sidebar-item.tsx | 25 +- .../status-react/src/contexts/app-context.tsx | 23 +- packages/status-react/src/index.tsx | 4 +- .../src/modules/community/index.tsx | 62 ++- .../src/modules/community/messenger.tsx | 15 +- .../chat/chat-input.tsx | 0 .../chat/chat-message.tsx | 0 .../src/{components => routes}/chat/index.tsx | 2 +- .../{components => routes}/chat/navbar.tsx | 0 .../src/routes/new-chat/index.tsx | 432 ++++++++++++++++ .../src/system/icon-button/icon-button.tsx | 19 + packages/status-react/src/types/config.tsx | 2 + yarn.lock | 478 +++++++++++++++++- 16 files changed, 1049 insertions(+), 108 deletions(-) create mode 100644 packages/status-react/src/components/main-sidebar/community-dialog.tsx rename packages/status-react/src/{components => routes}/chat/chat-input.tsx (100%) rename packages/status-react/src/{components => routes}/chat/chat-message.tsx (100%) rename packages/status-react/src/{components => routes}/chat/index.tsx (96%) rename packages/status-react/src/{components => routes}/chat/navbar.tsx (100%) create mode 100644 packages/status-react/src/routes/new-chat/index.tsx diff --git a/packages/status-react/src/components/main-sidebar/channel-group.tsx b/packages/status-react/src/components/main-sidebar/channel-group.tsx index 1b860cfe..6103d189 100644 --- a/packages/status-react/src/components/main-sidebar/channel-group.tsx +++ b/packages/status-react/src/components/main-sidebar/channel-group.tsx @@ -20,7 +20,7 @@ export const ChannelGroup = (props: Props) => { - + {name} @@ -28,7 +28,7 @@ export const ChannelGroup = (props: Props) => { {children} - }> + }> For 15 min For 1 hour For 8 hours diff --git a/packages/status-react/src/components/main-sidebar/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/community-dialog.tsx new file mode 100644 index 00000000..ed7ab423 --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/community-dialog.tsx @@ -0,0 +1,58 @@ +import React from 'react' + +import { Button, Dialog, Text, TextInput } from '~/src/system' + +interface Props { + title: string + description: string +} + +export const CommunityDialog = (props: Props) => { + const { title, description } = props + + return ( + + + {description} + + + + + + To access this community, paste community public key in Status desktop + or mobile app + + + + + + + + + + + + + Cancel + Submit + + + ) +} diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx index e30f154c..fa0f9915 100644 --- a/packages/status-react/src/components/main-sidebar/index.tsx +++ b/packages/status-react/src/components/main-sidebar/index.tsx @@ -1,20 +1,19 @@ import React from 'react' -import { useAppState } from '~/src/contexts/app-context' import { EditIcon } from '~/src/icons/edit-icon' import { styled } from '~/src/styles/config' -import { Box, Button } from '~/src/system' +import { Box } from '~/src/system' import { Avatar } from '~/src/system/avatar' -import { Dialog, DialogTrigger } from '~/src/system/dialog' +import { DialogTrigger } from '~/src/system/dialog' import { Grid } from '~/src/system/grid' import { Heading } from '~/src/system/heading' import { IconButton } from '~/src/system/icon-button' import { Text } from '~/src/system/text' -import { TextInput } from '~/src/system/text-input' import { ChannelGroup } from './channel-group' import { ChannelItem } from './channel-item' import { ChatItem } from './chat-item' +import { CommunityDialog } from './community-dialog' const CHANNELS = { Public: ['welcome', 'general', 'random'], @@ -24,8 +23,6 @@ const CHANNELS = { const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change'] export const MainSidebar = () => { - const { dispatch } = useAppState() - return ( @@ -38,15 +35,10 @@ export const MainSidebar = () => { - - A community of cat lovers, meow! - - - To access this community, paste community public key in Status - desktop or mobile app - - - + {Object.entries(CHANNELS).map(([group, channels]) => ( @@ -54,9 +46,9 @@ export const MainSidebar = () => { {channels.map(channel => ( {channel} @@ -73,16 +65,13 @@ export const MainSidebar = () => { justify="between" css={{ marginBottom: 16 }} > - Messages - dispatch({ type: 'NEW_CHAT' })} - > + Messages + {CHATS.map(chat => ( - + {chat} ))} diff --git a/packages/status-react/src/components/main-sidebar/sidebar-item.tsx b/packages/status-react/src/components/main-sidebar/sidebar-item.tsx index 1196dfd2..c9570ec7 100644 --- a/packages/status-react/src/components/main-sidebar/sidebar-item.tsx +++ b/packages/status-react/src/components/main-sidebar/sidebar-item.tsx @@ -1,30 +1,31 @@ import React, { forwardRef } from 'react' +import { NavLink } from 'react-router-dom' + import { styled } from '~/src/styles/config' import { Avatar } from '~/src/system' import type { Ref } from 'react' interface Props { + to: string muted: boolean unread: boolean - active: boolean children: React.ReactNode } -const SidebarItem = (props: Props, ref: Ref) => { - const { muted, unread, active, children, ...buttonProps } = props +const SidebarItem = (props: Props, ref: Ref) => { + const { muted, unread, children, ...buttonProps } = props return ( - + ) } @@ -33,7 +34,7 @@ const _SidebarItem = forwardRef(SidebarItem) export { _SidebarItem as SidebarItem } export type SidebarItemProps = Omit -const Button = styled('button', { +const Link = styled(NavLink, { position: 'relative', fontFamily: '$sans', fontWeight: '$500', @@ -50,12 +51,11 @@ const Button = styled('button', { background: '#E9EDF1', }, + '&.active': { + background: 'rgba(233, 237, 241, 1)', + }, + variants: { - active: { - true: { - background: 'rgba(233, 237, 241, 1)', - }, - }, state: { muted: { color: 'rgba(0, 0, 0, 0.4)', @@ -64,6 +64,7 @@ const Button = styled('button', { fontWeight: '$600', '&::after': { content: '"1"', + textAlign: 'center', position: 'absolute', right: 8, width: 22, diff --git a/packages/status-react/src/contexts/app-context.tsx b/packages/status-react/src/contexts/app-context.tsx index 26517a73..3e6e84f5 100644 --- a/packages/status-react/src/contexts/app-context.tsx +++ b/packages/status-react/src/contexts/app-context.tsx @@ -10,27 +10,14 @@ type Context = { const AppContext = createContext(undefined) interface State { - view: 'loading' | 'error' | 'chat' | 'group-chat' | 'channel' | 'new-chat' + state: 'loading' | 'error' showMembers: boolean } -type Action = - | { type: 'NEW_CHAT' } - | { type: 'SET_CHANNEL'; channelId: string } - | { type: 'SET_CHAT'; chatId: string } - | { type: 'TOGGLE_MEMBERS' } +type Action = { type: 'TOGGLE_MEMBERS' } const reducer: Reducer = (state, action) => { switch (action.type) { - case 'NEW_CHAT': { - return { ...state, view: 'new-chat' } - } - case 'SET_CHAT': { - return { ...state, view: 'chat' } - } - case 'SET_CHANNEL': { - return { ...state, view: 'channel' } - } case 'TOGGLE_MEMBERS': { return { ...state, showMembers: !state.showMembers } } @@ -38,8 +25,8 @@ const reducer: Reducer = (state, action) => { } const initialState: State = { - view: 'channel', - showMembers: true, + state: 'loading', + showMembers: false, } interface Props { @@ -55,7 +42,7 @@ export const AppProvider = (props: Props) => { return {children} } -export function useAppState() { +export const useAppState = () => { const context = useContext(AppContext) if (!context) { diff --git a/packages/status-react/src/index.tsx b/packages/status-react/src/index.tsx index 7106ae8e..03b8cb54 100644 --- a/packages/status-react/src/index.tsx +++ b/packages/status-react/src/index.tsx @@ -1,3 +1,5 @@ -export { type CommunityProps, Community } from './modules/community' +export type { CommunityProps } from './modules/community' +export { Community } from './modules/community' export { darkTheme, lightTheme } from './styles/themes' export type { Config } from './types/config' +export { HashRouter, MemoryRouter } from 'react-router-dom' diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx index 9af1c363..3a13f2e6 100644 --- a/packages/status-react/src/modules/community/index.tsx +++ b/packages/status-react/src/modules/community/index.tsx @@ -1,5 +1,6 @@ import React, { useRef } from 'react' +import { BrowserRouter } from 'react-router-dom' import styled, { ThemeProvider } from 'styled-components' import { AppProvider } from '~/src/contexts/app-context' @@ -19,37 +20,44 @@ import type { Config } from '~/src/types/config' type Props = Config export const Community = (props: Props) => { - const { theme, environment, publicKey } = props + const { + theme, + environment, + publicKey, + router: Router = BrowserRouter, + } = props const ref = useRef(null) return ( - - - - - - - - - - - - -