diff --git a/web/actions/index.js b/web/actions/index.js index bc5934e..f30ba02 100644 --- a/web/actions/index.js +++ b/web/actions/index.js @@ -1,36 +1,37 @@ import { createAction } from 'redux-starter-kit' import { fetchCurrentUser, fetchCodingSession } from '../services/api' import { getAuthToken } from '../services/cookies' // auth export const setIsAuthenticated = createAction('SET_IS_AUTHENTICATED') // profile export const setCurrentUser = createAction('SET_CURRENT_USER') export const setCurrentUsername = createAction('SET_CURRENT_USERNAME') export const fetchCurrentUserIfNeeded = (ctx) => async (dispatch, getState) => { const {currentUser} = getState() const authToken = getAuthToken(ctx) if (currentUser.lastFetched === null && authToken) { const {user} = await fetchCurrentUser(authToken) dispatch(setCurrentUser(user)) } } // coding sessions export const setCodingSession = createAction('SET_CODING_SESSION') export const setCodingSessionMetadata = createAction('SET_CODING_SESSION_METADATA') export const fetchCodingSessionIfNeeded = (ctx, id) => async (dispatch, getState) => { const existingSession = getState().codingSessions[id] if (existingSession) { return existingSession.payload } const authToken = getAuthToken(ctx) const codingSession = await fetchCodingSession(id, authToken) dispatch(setCodingSession(codingSession)) return codingSession } // chat export const setShowChat = createAction('SET_SHOW_CHAT') +export const setUnreadMsgCount = createAction('SET_CHAT_UNREAD_COUNT') diff --git a/web/components/Header/index.js b/web/components/Header/index.js index bd0ec3d..f55c13c 100644 --- a/web/components/Header/index.js +++ b/web/components/Header/index.js @@ -1,123 +1,134 @@ import React, { useState } from 'react' import Link from 'next/link' import GitDuckLogo from '../../assets/img/gitduck-logo-h-light-alpha@1x.svg' import GitDuckLogoIcon from '../../assets/img/gitduck-icon-light-alpha@1x.svg' import IconAdmin from '../../assets/img/icons/AdminIconShape' import DefaultSettings from '../Settings/DefaultSettings' import { connect } from 'react-redux' import { login } from '../../services/auth' import { setShowChat } from '../../actions' +import { getOrCreateChatClient } from '../../services/chat' -const Header = ({isAuthenticated, currentUsername, hideSettingsButton, hideUsername, renderSettings, setShowChat, showChat}) => { +setTimeout(async () => { + if (process.browser) { + const chatClient = await getOrCreateChatClient() + } +}, 3000) + +const Header = ({isAuthenticated, currentUsername, hideSettingsButton, hideUsername, unreadMessages, renderSettings, setShowChat, showChat}) => { const [showSettings, setShowSettings] = useState(false) const toggleShowSettings = () => setShowSettings(!showSettings) const SettingsButton = isAuthenticated && !hideSettingsButton &&

return {showSettings && (renderSettings || )}

{/* Mobile only */}

{/*

*/}

{/* Mobile only */}

{isAuthenticated && currentUsername && !hideUsername && @{currentUsername} }

{/* SHOWING MENU, THIS NEEDS TO BE REVIEWED */} {/*

TEST

Profile Inbox Settings

Logout

*/} {/* Desktop only */}

{isAuthenticated && currentUsername && !hideUsername && @{currentUsername} }

} const mapState = ({auth, currentUser, chat}) => ({ isAuthenticated: auth.isAuthenticated, currentUsername: currentUser.user.username, - showChat: chat.showChat + showChat: chat.showChat, + unreadMessages: chat.unreadMessages, }) const actions = { setShowChat, } export default connect(mapState, actions)(Header) diff --git a/web/reducers/chat.js b/web/reducers/chat.js index 623cc07..d9353a1 100644 --- a/web/reducers/chat.js +++ b/web/reducers/chat.js @@ -1,15 +1,20 @@ import { createReducer } from 'redux-starter-kit' -import { setShowChat } from '../actions' +import { setShowChat, setUnreadMsgCount } from '../actions' const initialState = { showChat: false, + unreadMessages: 0, } const actionsMap = { [setShowChat]: (state, action) => ({ ...state, showChat: !!action.payload, + }), + [setUnreadMsgCount]: (state, action) => ({ + ...state, + unreadMessages: parseInt(action.payload), }) } export default createReducer(initialState, actionsMap) diff --git a/web/services/chat.js b/web/services/chat.js index 9f5f497..7515f3e 100644 --- a/web/services/chat.js +++ b/web/services/chat.js @@ -1,29 +1,45 @@ import { StreamChat } from 'stream-chat' import config from '../config' import { getProfilePicture } from '../components/ProfilePicture' import { getOrCreateChatAuthToken } from './auth/chat' +import { getStore } from '../store' +import { setUnreadMsgCount } from '../actions' +import _ from 'lodash' let chatClient = null -export const getOrCreateChatClient = async ({currentUser, isAuthenticated} = {}) => { +const setUnreadCount = (count) => Number.isInteger(count) && getStore().dispatch(setUnreadMsgCount(count)) + +export const getOrCreateChatClient = async () => { if (chatClient) { return chatClient } chatClient = new StreamChat(config.getStream.apiKey, { timeout: 6000, }) + const state = getStore().getState() + const isAuthenticated = state.auth.isAuthenticated + const currentUser = state.currentUser.user + const authToken = isAuthenticated && await getOrCreateChatAuthToken() if (authToken) { - await chatClient.setUser({ + const {me} = await chatClient.setUser({ id: currentUser.id, name: currentUser.username, image: getProfilePicture(currentUser) }, authToken) + setUnreadCount(_.get(me, 'total_unread_count')) } else { await chatClient.setAnonymousUser() } + chatClient.on(event => { + if (event.total_unread_count !== undefined) { + setUnreadCount(event.total_unread_count) + } + }) + return chatClient }

[Global chat] Some improvements

More coding videos

Pagination: load previous videos in explore

Fixing header bug

Hello world Node.js + React

Fixing: Why is Google not indexing pagination?

Fixing a small bug that breakes all the videos

Adding front-camera and possibility to turn on/off cam and/or mic