Skip to content

Commit

Permalink
chore: upgrade demo applications to stream-chat-react@11-rc (#85)
Browse files Browse the repository at this point in the history 
* Adjust social-messenger-ts to stream-chat-react v11

* Adjust team-ts to stream-chat-react v11

* Adjust virtual-event to stream-chat-react v11

* Adjust gaming-livestream to stream-chat-react v11

* Upgrade prettier

* Add deploy workflow

* Upgrade applications to stream-chat-react@11.0.0-rc.8
  • Loading branch information
@arnautov-anton
arnautov-anton committed Nov 22, 2023
1 parent 1636722 commit 9567b25
Show file tree
Hide file tree
Showing 35 changed files with 15,592 additions and 20,709 deletions.
50 changes: 50 additions & 0 deletions .github/workflows/deploy.yml
View file
@@ -0,0 +1,50 @@
name: Deploy Demo Apps
on:
push:
branches:
- master
paths:
- gaming-livestream/**
- social-messenger-ts/**
- team-ts/**
- virtual-event/**
- virtual-event-old/**
- customer-support/**

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- uses: actions/setup-node@v3
with:
node-version: 18

- name: Build Apps
run: yarn build:js:public

- name: Upload Pages Artifact
uses: actions/upload-pages-artifact@v1
with:
path: docs/
name: gh-pages-artifact

deploy:
needs: build
runs-on: ubuntu-latest

permissions:
pages: write
id-token: write

environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

steps:
- name: Deploy to Github Pages
id: deployment
uses: actions/deploy-pages@v1
with:
artifact_name: gh-pages-artifact
11 changes: 7 additions & 4 deletions gaming-livestream/package.json
View file
Expand Up @@ -4,17 +4,20 @@
"private": true,
"homepage": "./",
"dependencies": {
"@emoji-mart/data": "^1.1.2",
"@emoji-mart/react": "^1.1.1",
"@sentry/react": "^7.56.0",
"emoji-mart": "^5.5.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "4.0.3",
"react-scripts": "^5.0.1",
"sass": "^1.56.1",
"stream-chat": "^8.10.1",
"stream-chat-react": "^10.8.8"
"stream-chat-react": "^11.0.0-rc.8"
},
"devDependencies": {
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"typescript": "^4.8.4"
},
"scripts": {
Expand Down
47 changes: 26 additions & 21 deletions gaming-livestream/src/components/Chat/GamingMessageInput.tsx
View file
@@ -1,30 +1,30 @@
import React from 'react';
import {
ChatAutoComplete,
EmojiPicker,
useChannelStateContext,
useMessageInputContext,
useTypingContext,
} from 'stream-chat-react';
import { EmojiPicker } from 'stream-chat-react/emojis';

import EmojiIcon from '../../assets/icons/EmojiIcon';
import SendIcon from '../../assets/icons/SendIcon';
import StarIcon from '../../assets/icons/StarIcon';
import EmojiIcon from '../../assets/icons/EmojiIcon';

import {useLayoutController} from '../../context/LayoutController';
import { useLayoutController } from '../../context/LayoutController';

import type {StreamChatType} from '../../types';
import type { StreamChatType } from '../../types';

const TypingIndicator = () => (
<div className='typing-indicator'>
<div className='dots'>
<div className='dot'></div>
<div className='dot'></div>
<div className='dot'></div>
</div>
<p>a member is typing</p>
<div className='typing-indicator'>
<div className='dots'>
<div className='dot'></div>
<div className='dot'></div>
<div className='dot'></div>
</div>
)
<p>a member is typing</p>
</div>
);

export const GamingMessageInput = React.memo(() => {
const { showUpgradePanel } = useLayoutController();
Expand All @@ -34,26 +34,31 @@ export const GamingMessageInput = React.memo(() => {

return (
<div className='channel-footer'>
{!thread && (
<EmojiPicker/>
)}
<div className='channel-footer__top'>
<ChatAutoComplete rows={1} placeholder='Say something' />
{!thread && <button className='emoji-button' onClick={messageInput.openEmojiPicker}><EmojiIcon /></button>}
{!thread && (
<EmojiPicker
popperOptions={{ placement: 'top-end', strategy: 'fixed' }}
pickerProps={{ theme: 'auto', perLine: 7 }}
ButtonIconComponent={EmojiIcon}
buttonClassName='emoji-button'
/>
)}
</div>
<div className='channel-footer__bottom'>
<button onClick={showUpgradePanel} className='watcher-count-button'>
<StarIcon />
<p>68</p>
</button>
{typing && !!Object.keys(typing).length && (
<TypingIndicator/>
)}
<button className='send-message-button' disabled={!messageInput.text} onClick={messageInput.handleSubmit}>
{typing && !!Object.keys(typing).length && <TypingIndicator />}
<button
className='send-message-button'
disabled={!messageInput.text}
onClick={messageInput.handleSubmit}
>
<SendIcon />
</button>
</div>

</div>
);
});
114 changes: 62 additions & 52 deletions gaming-livestream/src/components/Chat/index.tsx
View file
@@ -1,20 +1,25 @@
import React, {useEffect, useState} from 'react';
import {Channel, Chat} from 'stream-chat-react';
import React, { useEffect, useState } from 'react';
import { Channel, Chat } from 'stream-chat-react';

import {ChatUpgrades} from './ChatUpgrades';
import {GamingChatInner} from './GamingChatInner';
import {GamingChatNotification} from './GamingChatNotification';
import {GamingParticipants} from './GamingParticipants';
import {GamingThreadHeader} from './GamingThreadHeader';
import { init, SearchIndex } from 'emoji-mart';
import data from '@emoji-mart/data';

import {getColor, getRandomUserRole, participants} from '../../assets/data';
import {useChecklist} from '../../hooks/useChecklistTasks';
import { ChatUpgrades } from './ChatUpgrades';
import { GamingChatInner } from './GamingChatInner';
import { GamingChatNotification } from './GamingChatNotification';
import { GamingParticipants } from './GamingParticipants';
import { GamingThreadHeader } from './GamingThreadHeader';

import {useConnectUser} from '../../hooks/useConnectUser';
import {useLayoutController} from '../../context/LayoutController';
import type {Channel as ChannelT} from 'stream-chat';
import type {StreamChatType} from '../../types';
import {MessageTimestampController} from "../../context/MessageTimestampController";
import { getColor, getRandomUserRole, participants } from '../../assets/data';
import { useChecklist } from '../../hooks/useChecklistTasks';

import { useConnectUser } from '../../hooks/useConnectUser';
import { useLayoutController } from '../../context/LayoutController';
import type { Channel as ChannelT } from 'stream-chat';
import type { StreamChatType } from '../../types';
import { MessageTimestampController } from '../../context/MessageTimestampController';

init({ data });

const urlParams = new URLSearchParams(window.location.search);
const apiKey = urlParams.get('apikey') || process.env.REACT_APP_STREAM_KEY;
Expand All @@ -23,50 +28,55 @@ const userToken = urlParams.get('user_token') || process.env.REACT_APP_USER_TOKE
const targetOrigin = urlParams.get('target_origin') || process.env.REACT_APP_TARGET_ORIGIN;

const userToConnect = {
id: userId!,
color: getColor(),
userRole: getRandomUserRole(),
id: userId!,
color: getColor(),
userRole: getRandomUserRole(),
};

export const GamingChat = () => {
const [channel, setChannel] = useState<ChannelT<StreamChatType> | null>(null);
const {memberListVisible, popUpText, upgradePanelVisible, chatVisible} = useLayoutController();
const chatClient = useConnectUser<StreamChatType>(apiKey!, userToConnect, userToken);
useChecklist({chatClient, targetOrigin});

useEffect(() => {
if (!chatClient) return;
const [channel, setChannel] = useState<ChannelT<StreamChatType> | null>(null);
const { memberListVisible, popUpText, upgradePanelVisible, chatVisible } = useLayoutController();
const chatClient = useConnectUser<StreamChatType>(apiKey!, userToConnect, userToken);
useChecklist({ chatClient, targetOrigin });

const loadChat = async () => {
const channel = chatClient.channel('gaming', 'gaming-demo', {name: 'Gaming Demo'});
await channel.watch();
setChannel(channel);
};
useEffect(() => {
if (!chatClient) return;

loadChat();
}, [chatClient]);
const loadChat = async () => {
const channel = chatClient.channel('gaming', 'gaming-demo', { name: 'Gaming Demo' });
await channel.watch();
setChannel(channel);
};

loadChat();
}, [chatClient]);

if (!chatClient) return null;
if (!chatClient) return null;

return (
<section
className={`sidebar ${memberListVisible} ${chatVisible} ${upgradePanelVisible ? 'show-upgrade' : ''}`}
>
{channel && (
<div className='chat-container'>
<Chat client={chatClient}>
<Channel channel={channel} ThreadHeader={GamingThreadHeader}>
<MessageTimestampController>
<GamingChatInner/>
</MessageTimestampController>
</Channel>
</Chat>
{popUpText && <GamingChatNotification text={popUpText}/>}
</div>
)}
<GamingParticipants participants={participants}/>
<ChatUpgrades/>
</section>
);
return (
<section
className={`sidebar ${memberListVisible} ${chatVisible} ${
upgradePanelVisible ? 'show-upgrade' : ''
}`}
>
{channel && (
<div className='chat-container'>
<Chat client={chatClient}>
<Channel
channel={channel}
ThreadHeader={GamingThreadHeader}
emojiSearchIndex={SearchIndex}
>
<MessageTimestampController>
<GamingChatInner />
</MessageTimestampController>
</Channel>
</Chat>
{popUpText && <GamingChatNotification text={popUpText} />}
</div>
)}
<GamingParticipants participants={participants} />
<ChatUpgrades />
</section>
);
};
37 changes: 26 additions & 11 deletions gaming-livestream/src/styles/_variables.scss
View file
@@ -1,24 +1,39 @@
// colors
#root {
--background: #000615;
--component-background: #010c29;
--button-background: #062471;
--button-background-hover: #0d47d9;
--background: rgb(0, 6, 21);
--component-background: rgb(1, 12, 41);
--button-background: rgb(6, 36, 113);
--button-background-hover: rgb(13, 71, 217);

--foreground: #fff;
--foreground: rgb(255, 255, 255);

--attendees: #00fc92;
--border-color: #062471;
--border-color-secondary: #081e58;
--attendees: rgb(0, 252, 146);

--border-color: rgb(6, 36, 113);
--border-color-secondary: rgb(8, 30, 88);

--header-height: 60px;
--sidebar-width: 320px;

--btn-border-radius: .5rem;
--btn-border-radius: 0.5rem;

--input-focused-box-shadow: 0 0 0 2px rgba(0, 108, 255, 0.36);
}

--em-rgb-color: var(--button-background);
}

em-emoji-picker {
--category-icon-size: 16px;
--font-size: 16px;

--color-border-over: rgb(0, 108, 255);
--color-border: rgb(0, 6, 21);

--rgb-background: 1, 12, 41;
--rgb-accent: 0, 108, 255;
--rgb-color: 255, 255, 255;
--rgb-input: 0, 6, 21;
--shadow: none;

border: 1px solid rgb(6, 36, 113);
}
3 changes: 0 additions & 3 deletions gaming-livestream/tsconfig.json
View file
Expand Up @@ -2,12 +2,9 @@
"compilerOptions": {
"allowJs": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"allowSyntheticDefaultImports": true,
"checkJs": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"importsNotUsedAsValues": "error",
"isolatedModules": true,
"jsx": "react-jsx",
"lib": ["dom", "dom.iterable", "esnext"],
Expand Down

0 comments on commit 9567b25

Please sign in to comment.