diff --git a/web/components/Profile/index.js b/web/components/Profile/index.js index 3d5d16b..79976b2 100644 --- a/web/components/Profile/index.js +++ b/web/components/Profile/index.js @@ -1,53 +1,57 @@ import React, {useState} from 'react' import ProfileDescription from '../ProfileDescription' import LiveStatus from '../LiveStatus/BigLiveStatus.js' import EmptyProfile from './EmptyProfile.js' import EmptyOwnProfile from './EmptyOwnProfile.js' import ThumbnailVideo from '../ThumbnailVideo' -import { showBetaFeature } from '../../services/featureFlag' import ProfileSettings from '../Settings/ProfileSettings' -import Link from 'next/link' + +const FetchingPage = () =>

Fetching next page....

const renderVideo = video =>

-const Profile = ({user, videos, liveVideo}) => { +const Profile = ({user, videos, liveVideo, canFetchMoreVideos, showLoadPreviousVideos, loadPreviousVideos, loadNextVideos, isFetchingNextPage}) => { const [showSettings, setShowSettings] = useState(false) const toggleShowSettings = () => setShowSettings(!showSettings) const isLive = !!liveVideo const thumbnailSize = isLive ? 2 : 1 return

{showSettings && } {user.isCurrentUser && }

+ {showLoadPreviousVideos && !isFetchingNextPage && } + {showLoadPreviousVideos && isFetchingNextPage && }

{isLive && }

{isLive &&

} {videos.length === 0 && user.isCurrentUser && } {videos.length === 0 && }

{videos.map(renderVideo)}

+ {canFetchMoreVideos && !isFetchingNextPage && } + {isFetchingNextPage && }

} export default Profile diff --git a/web/components/TeamProfile/index.js b/web/components/TeamProfile/index.js index 312e75a..ca6d716 100644 --- a/web/components/TeamProfile/index.js +++ b/web/components/TeamProfile/index.js @@ -1,57 +1,63 @@ import React, { useState } from 'react' import ProfileDescription from '../ProfileDescription' import ThumbnailVideo from '../ThumbnailVideo' import {UserInformationTeamShort} from '../ThumbnailVideo' import TeamProfileSettings from '../Settings/ProfileTeamSettings' import EditMembersSettings from '../Settings/EditTeamMembers' +const FetchingPage = () =>

Fetching next page....

+ const renderVideo = video => { return

} const TeamMembers = ({members, invitedEmails, showEditMembersButton}) => { const [showSettings, setShowSettings] = useState(false) const toggleShowSettings = () => setShowSettings(!showSettings) return

{showSettings && }

Members ({members.length})

{showEditMembersButton && }

{members.map(member =>

)}

} -const TeamProfile = ({user, videos = []}) => { +const TeamProfile = ({user, videos = [], canFetchMoreVideos, showLoadPreviousVideos, loadPreviousVideos, loadNextVideos, isFetchingNextPage}) => { const [showSettings, setShowSettings] = useState(false) const toggleShowSettings = () => setShowSettings(!showSettings) const currentUserIsMember = user.isMemberOfOrganization return

{showSettings && }

{currentUserIsMember && }

+ {showLoadPreviousVideos && !isFetchingNextPage && } + {showLoadPreviousVideos && isFetchingNextPage && }

{videos.map(renderVideo)}

+ {canFetchMoreVideos && !isFetchingNextPage && } + {isFetchingNextPage && }

} export default TeamProfile diff --git a/web/pages/explore.js b/web/pages/explore.js index 73efa99..aa22307 100644 --- a/web/pages/explore.js +++ b/web/pages/explore.js @@ -1,137 +1,137 @@ import React, { Component } from 'react' import Page from '../components/Page' import Explore from '../components/Explore' import Header from '../components/Header' import withFetchUsernameIfNeededPage from '../services/withFetchUsernameIfNeededPage' import { fetchRecentCodingSessions } from '../services/api' import { withRouter } from 'next/router' import { format } from 'url' import Router from 'next/router' import { NotFound } from './_error' const parsePage = str => Math.max(parseInt(str || 1), 1) class ExplorePage extends Component { state = { sessions: this.props.recentSessions || [], isFetchingNextPage: false, canFetchMorePages: this.props.canFetchMore, page: parsePage(this.props.router.query.page), nextPageIndex: parsePage(this.props.router.query.page), previousPageIndex: parsePage(this.props.router.query.page), showLoadPrevious: this.props.showLoadPrevious || false } - static async getInitialProps ({req, isServer, res}) { - const page = parsePage(req.query.page) + static async getInitialProps ({isServer, res, query}) { + const page = parsePage(query.page) const response = await fetchRecentCodingSessions({page}) let sessions const resIsArray = Array.isArray(response) if (resIsArray) { sessions = response } else { sessions = response.sessions } const canFetchMore = !resIsArray && response.canFetchMore const pageNotFound = page && !canFetchMore && sessions.length === 0 if (pageNotFound && isServer) { res.statusCode = 404 } return { recentSessions: sessions, canFetchMore: canFetchMore, pageNotFound: pageNotFound, showLoadPrevious: page > 1, } } pushPageShallow = page => { const {router} = this.props const newRoute = format({ pathname: router.pathname, query: { ...router.query, page: parsePage(page) } }) Router.push(newRoute, newRoute, {shallow: true}) } loadNextPage = async () => { this.setState({ nextPageIndex: this.state.nextPageIndex + 1 }) this.pushPageShallow(this.state.nextPageIndex + 1) } loadPreviousPage = async () => { this.setState({ previousPageIndex: this.state.previousPageIndex - 1 }) this.pushPageShallow(this.state.previousPageIndex - 1) } loadPage = async (page, oldPage) => { const {isFetchingNextPage, canFetchMorePages} = this.state - if (isFetchingNextPage || !canFetchMorePages) { + if (isFetchingNextPage) { return } this.setState({isFetchingNextPage: true, page}) const {sessions, canFetchMore} = await fetchRecentCodingSessions({page}) const newSessions = [ ...(page < oldPage ? sessions : []), ...this.state.sessions, ...(page > oldPage ? sessions : []), ] this.setState({ isFetchingNextPage: false, canFetchMorePages: canFetchMore, sessions: newSessions, showLoadPrevious: page > 1 ? this.state.showLoadPrevious : false, }) } componentDidUpdate (prevProps) { const newPage = parsePage(this.props.router.query.page) const oldPage = parsePage(prevProps.router.query.page) if (newPage !== oldPage) { this.loadPage(newPage, oldPage) } } render () { const {isFetchingNextPage, canFetchMorePages, sessions, showLoadPrevious} = this.state const {loadNextPage, loadPreviousPage} = this const {pageNotFound} = this.props if (pageNotFound) { return } return

You're on page {this.state.page}

} } export default withFetchUsernameIfNeededPage(withRouter(ExplorePage)) diff --git a/web/pages/profile.js b/web/pages/profile.js index 492169f..e59f50e 100644 --- a/web/pages/profile.js +++ b/web/pages/profile.js @@ -1,89 +1,194 @@ import React, { Component } from 'react' import Page from '../components/Page' import Profile from '../components/Profile' import TeamProfile from '../components/TeamProfile' import Header from '../components/Header' import { fetchUserWithVideos } from '../services/api' import { NotFound } from './_error' import { setCurrentUser } from '../actions' import { connect } from 'react-redux' import { getAuthToken } from '../services/cookies' import withFetchUsernameIfNeededPage from '../services/withFetchUsernameIfNeededPage' import _ from 'lodash' import { DefaultSeo } from 'next-seo' +import Router, { withRouter } from 'next/router' +import { format } from 'url' const SEO = ({user}) => { const fullName = _.get(user, 'profile.fullName', '') const username = user.username const about = _.get(user, 'profile.about', '') const maxLengthDescription = 50 const shortDescription = about.substring(0, maxLengthDescription) + ' | ' const description = `Watch @${username} programming. | ${shortDescription} GitDuck is a screen and code sharing tool for developers.` return } +const parsePage = str => Math.max(parseInt(str || 1), 1) + class ProfilePage extends Component { + getInitalState = () => ({ + videos: this.props.videos || [], + isFetchingNextPage: false, + canFetchMoreVideos: this.props.canFetchMoreVideos, + page: parsePage(this.props.router.query.page), + nextPageIndex: parsePage(this.props.router.query.page), + previousPageIndex: parsePage(this.props.router.query.page), + showLoadPrevious: this.props.showLoadPrevious || false + }) + + state = this.getInitalState() + static async getInitialProps (ctx) { const {query, res, store} = ctx const {username} = query + const page = parsePage(query.page) - const body = await fetchUserWithVideos({username, authToken: getAuthToken(ctx)}) + const body = await fetchUserWithVideos({username, authToken: getAuthToken(ctx), page}) .catch((err) => {console.error('Error fetching user', username, JSON.stringify(_.get(err, 'response.body')))}) - const {user, videos, liveVideo} = body || {} + const {user, videos, liveVideo, canFetchMoreVideos} = body || {} + + const pageNotFound = page > 1 && !canFetchMoreVideos && videos.length === 0 - if (!user && res) { + if (res && (!user || pageNotFound)) { res.statusCode = 404 } else if (res) { res.statusCode = 200 if (user.isCurrentUser) { store.dispatch(setCurrentUser(user)) } } - return {user, username, videos: videos || [], liveVideo} + return { + user, + username, + videos: videos, + liveVideo, + canFetchMoreVideos: canFetchMoreVideos, + showLoadPrevious: page > 1, + pageNotFound: pageNotFound, + } + } + + pushPageShallow = page => { + const {router} = this.props + + const newRoute = format({ + pathname: router.pathname, + query: { + ...router.query, + page + } + }) + + const maskedRoute = format({query: {page}}) + + Router.push(newRoute, maskedRoute, {shallow: true}) + } + + loadNextVideos = () => { + const newPage = this.state.nextPageIndex + 1 + this.loadPage(newPage, this.state.nextPageIndex) + this.pushPageShallow(newPage) + this.setState({ + nextPageIndex: newPage + }) + } + + loadPreviousVideos = () => { + const newPage = this.state.previousPageIndex - 1 + this.loadPage(newPage, this.state.previousPageIndex) + this.pushPageShallow(newPage) + this.setState({ + previousPageIndex: newPage + }) + } + + loadPage = async (page, oldPage) => { + const {isFetchingNextPage, canFetchMoreVideos} = this.state + const {router} = this.props + + if (isFetchingNextPage) { + return + } + + this.setState({isFetchingNextPage: true, page}) + const {videos, canFetchMoreVideos: newCanFetchMoreVideos} = await fetchUserWithVideos({username: router.query.username, page}) + + const newVideos = [ + ...(page < oldPage ? videos : []), + ...this.state.videos, + ...(page > oldPage ? videos : []), + ] + + this.setState({ + isFetchingNextPage: false, + canFetchMoreVideos: newCanFetchMoreVideos, + videos: newVideos , + showLoadPrevious: page > 1 ? this.state.showLoadPrevious : false, + }) + } + + componentDidUpdate (prevProps) { + if (prevProps.username !== this.props.username) { + this.setState(this.getInitalState()) + } } render () { - const {user, videos, liveVideo, currentUser} = this.props + const {user, liveVideo, currentUser, pageNotFound} = this.props + const {videos, canFetchMoreVideos, showLoadPrevious, isFetchingNextPage} = this.state + const {loadNextVideos, loadPreviousVideos} = this - if (!user) { + if (!user || pageNotFound) { return } const {isCurrentUser} = user const isOrganization = user.type === 'organization' + const paginationProps = { + canFetchMoreVideos, + showLoadPreviousVideos: showLoadPrevious, + loadPreviousVideos: loadPreviousVideos, + loadNextVideos: loadNextVideos, + isFetchingNextPage: isFetchingNextPage, + } + return (

- {!isOrganization && } - {isOrganization && } + {!isOrganization && + } + {isOrganization && } ) } } const mapState = ({currentUser}) => ({currentUser: currentUser.user}) -export default connect(mapState)(withFetchUsernameIfNeededPage(ProfilePage)) +export default connect(mapState)(withFetchUsernameIfNeededPage(withRouter(ProfilePage))) diff --git a/web/server/index.js b/web/server/index.js index 70daeca..4b3c4cb 100644 --- a/web/server/index.js +++ b/web/server/index.js @@ -1,85 +1,85 @@ const express = require('express') const next = require('next') const port = parseInt(process.env.PORT) || 3000 const {isProd} = require('./config') const dev = !isProd const {requireForwardedHTTPS} = require('./middlewares') const compression = require('compression') const app = next({dev, quiet: isProd}) const handle = app.getRequestHandler() const nextPages = [ '/about', '/explore', '/index', '/profile', '/terms', '/privacy-policy', '/verify-email', '/watch', '/watch-embed', '/welcome', '/instructions', '/onboarding', '/faq', /* '/talk2megooseman', '/instafluff', */ '/watchyoutube', '/create-team', '/rubber-duck-debugging', '/pair-programming', '/live-coding', '/collaborative-coding', ] const notFoundPages = [ '/apple-touch-icon-precomposed.png', '/robots.txt', '/favicon.ico', '/favicon.png', '/sitemap.xml', ] app.prepare().then(() => { const server = express() server.use(compression()) if (isProd) { server.use(requireForwardedHTTPS) } nextPages.forEach( page => server.get(page, (req, res) => handle(req, res)) ) notFoundPages.forEach( page => server.get(page, (req, res) => res.sendStatus(404)) ) server.get('/watch/:id', (req, res) => { return app.render(req, res, '/watch', {id: req.params.id}) }) server.get('/embed/:id', (req, res) => { return app.render(req, res, '/embed', {id: req.params.id}) }) server.get('/:username', (req, res) => { - return app.render(req, res, '/profile', {username: req.params.username}) + return app.render(req, res, '/profile', {username: req.params.username, page: req.query.page}) }) server.get('*', (req, res) => { return handle(req, res) }) server.listen(port, err => { if (err) throw err console.log(`> Ready on http://localhost:${port}`) }) }).catch(error => { console.error(error) process.exit(1) }) diff --git a/web/services/api/index.js b/web/services/api/index.js index 0f4bc5c..455ed4f 100644 --- a/web/services/api/index.js +++ b/web/services/api/index.js @@ -1,140 +1,140 @@ import { post, get, authPut, authGet, authPost, authPatch, authDelete } from './utils' export async function login ({idToken, anonymousId, reservationToken}) { return post({ path: '/auth/authenticate', body: { auth0Token: idToken, anonymousId, reservationToken, } }) } export async function authenticateChat ({authToken} = {}) { return authPost({ path: '/auth/chat', authToken, }) } export async function getIDEAuthToken ({ide, authToken, installationId}) { return authPost({ path: `/auth/authenticate/${ide}`, authToken: authToken, body: { installationId, } }) } export async function changeUsername (username) { return authPut({ path: '/me/username', body: { username, } }) } export async function updateUserProfile (newProfile) { return authPatch({ path: '/me/profile', body: newProfile }) } export async function updateTeamProfile (newProfile, teamUsername) { return authPatch({ path: `/organizations/${teamUsername}/profile`, body: newProfile }) } export async function fetchUser ({username, authToken}) { return authGet({ path: `/users/${username}`, allowUnauthenticated: true, authToken, }) } -export async function fetchUserWithVideos ({username, authToken}) { +export async function fetchUserWithVideos ({username, authToken, page}) { return authGet({ - path: `/users/${username}/full`, + path: `/users/${username}/full` + (page ? `?videosPage=${page}` : ''), allowUnauthenticated: true, authToken, }) } export async function fetchCurrentUser (authToken) { return authGet({ path: '/me', authToken, }) } export async function fetchCodingSession (id, authToken) { return authGet({ path: `/coding-sessions/${id}`, allowUnauthenticated: true, authToken, }) } export async function updateCodingSessionMetadata (id, {title, description, visibility}) { return authPatch({ path: `/coding-sessions/${id}`, body: { title, description, visibility } }) } export async function deleteCodingSession (id) { return authDelete({ path: `/coding-sessions/${id}`, }) } export async function fetchRecentCodingSessions ({page} = {}) { return get({ path: '/coding-sessions/recent' + (page ? `?page=${page}` : ''), }) } export async function createOrganization ({username}) { return authPost({ path: '/organizations', body: { username: username, } }) } export async function inviteUsersToOrganization (orgUsername, invited = []) { return authPost({ path: `/organizations/${orgUsername}/invite`, body: { invited: invited } }) } export async function removeMemberFromOrganization (orgUsername, memberUsername) { return authDelete({ path: `/organizations/${orgUsername}/members/${memberUsername}` }) } export async function removeInvitedEmailFromOrganization (orgUsername, email) { return authDelete({ path: `/organizations/${orgUsername}/email-invites/${email}` }) } export async function resendInvitedEmailFromOrganization (orgUsername, email) { return authPost({ path: `/organizations/${orgUsername}/email-invites/${email}/resend` }) }

Adding pagination to profiles #3