From 54f830e5a150c5de422683c923aac671152c7842 Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Wed, 31 Jul 2024 18:51:10 +0200 Subject: [PATCH] pagination --- .../buttons/sourcecontrolbuttons.tsx | 4 +- libs/remix-ui/git/src/components/gitui.tsx | 12 +++-- .../git/src/components/panels/branches.tsx | 54 +++++++++++++++---- libs/remix-ui/git/src/lib/gitactions.ts | 23 +++++--- libs/remix-ui/git/src/lib/listeners.ts | 12 ++--- libs/remix-ui/git/src/state/actions.ts | 2 + libs/remix-ui/git/src/types/index.ts | 13 ++++- 7 files changed, 90 insertions(+), 30 deletions(-) diff --git a/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx b/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx index 250e44628c..ba9e10af21 100644 --- a/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx +++ b/libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx @@ -4,7 +4,7 @@ import { CustomTooltip } from "@remix-ui/helper" import React, { useEffect, useState } from "react" import { FormattedMessage } from "react-intl" import { gitActionsContext } from "../../state/context" -import { branch, gitMatomoEventTypes, remote } from "../../types" +import { branch, defaultGitState, gitMatomoEventTypes, remote } from "../../types" import { gitPluginContext } from "../gitui" import GitUIButton from "./gituibutton" import { syncStateContext } from "./sourceControlBase" @@ -54,7 +54,7 @@ export const SourceControlButtons = () => { const refresh = async() => { await sendToMatomo(gitMatomoEventTypes.REFRESH) await actions.getFileStatusMatrix(null) - await actions.gitlog() + actions.setStateGitLogCount(defaultGitState.gitLogCount) } const buttonsDisabled = () => { diff --git a/libs/remix-ui/git/src/components/gitui.tsx b/libs/remix-ui/git/src/components/gitui.tsx index f5d1460487..7072165169 100644 --- a/libs/remix-ui/git/src/components/gitui.tsx +++ b/libs/remix-ui/git/src/components/gitui.tsx @@ -1,5 +1,5 @@ -import React, { useEffect, useReducer, useState } from 'react' -import { add, addall, checkout, checkoutfile, clone, commit, createBranch, remoteBranches, repositories, rm, getCommitChanges, diff, resolveRef, getBranchCommits, setUpstreamRemote, loadGitHubUserFromToken, getBranches, getRemotes, remoteCommits, saveGitHubCredentials, getGitHubCredentialsFromLocalStorage, fetch, pull, push, setDefaultRemote, addRemote, removeRemote, sendToGitLog, clearGitLog, getBranchDifferences, getFileStatusMatrix, init, showAlert, gitlog } from '../lib/gitactions' +import React, { useEffect, useReducer, useState, useContext } from 'react' +import { add, addall, checkout, checkoutfile, clone, commit, createBranch, remoteBranches, repositories, rm, getCommitChanges, diff, resolveRef, getBranchCommits, setUpstreamRemote, loadGitHubUserFromToken, getBranches, getRemotes, remoteCommits, saveGitHubCredentials, getGitHubCredentialsFromLocalStorage, fetch, pull, push, setDefaultRemote, addRemote, removeRemote, sendToGitLog, clearGitLog, getBranchDifferences, getFileStatusMatrix, init, showAlert, gitlog, setStateGitLogCount } from '../lib/gitactions' import { loadFiles, setCallBacks } from '../lib/listeners' import { openDiff, openFile, saveToken, sendToMatomo, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions' import { gitActionsContext, pluginActionsContext } from '../state/context' @@ -70,6 +70,11 @@ export const GitUI = (props: IGitUi) => { }, [appLoaded]) + useEffect(() => { + if (!appLoaded) return + gitlog(gitState.gitLogCount) + }, [gitState.timestamp, gitState.gitLogCount]) + useEffect(() => { if (!appLoaded) return async function checkconfig() { @@ -155,7 +160,8 @@ export const GitUI = (props: IGitUi) => { clearGitLog, getFileStatusMatrix, gitlog, - init + init, + setStateGitLogCount } const pluginActionsProviderValue = { diff --git a/libs/remix-ui/git/src/components/panels/branches.tsx b/libs/remix-ui/git/src/components/panels/branches.tsx index 789550589e..30fde0168c 100644 --- a/libs/remix-ui/git/src/components/panels/branches.tsx +++ b/libs/remix-ui/git/src/components/panels/branches.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import { Alert } from "react-bootstrap"; import { gitActionsContext } from "../../state/context"; import { remote } from "../../types"; import GitUIButton from "../buttons/gituibutton"; @@ -8,39 +7,76 @@ import { LocalBranchDetails } from "./branches/localbranchdetails"; import { RemoteBranchDetails } from "./branches/remotebranchedetails"; import { faSync } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { branch } from "@remix-api"; + +const pageLength = 5; export const Branches = () => { const context = React.useContext(gitPluginContext) const actions = React.useContext(gitActionsContext) + const [localBranchPage, setLocalBranchPage] = useState(1); + const [remoteBranchPage, setRemoteBranchPage] = useState(1); const [newBranch, setNewBranch] = useState({ value: "" }); + const [localBranches, setLocalBranches] = useState([]); + const [remoteBranches, setRemoteBranches] = useState([]); + const [currentBranch, setCurrentBranch] = useState(null); const handleChange = (e: React.ChangeEvent) => { setNewBranch({ value: e.currentTarget.value }); }; + useEffect(() => { + if (context.branches) { + + if (context.currentBranch && context.currentBranch.name !== '') { + setCurrentBranch(context.branches.filter((branch, index) => !branch.remote && branch.name === context.currentBranch.name)[0]); + setLocalBranches(context.branches.filter((branch, index) => !branch.remote && branch.name !== context.currentBranch.name)); + } else { + setLocalBranches(context.branches.filter((branch, index) => !branch.remote)); + } + if (context.upstream) { + setRemoteBranches(context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name)); + } else { + setRemoteBranches([]); + } + } else { + setLocalBranches([]); + setRemoteBranches([]); + } + }, [context.branches, context.defaultRemote, context.upstream, context.currentBranch]); + return ( <>
{context.branches && context.branches.length ?
- - {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => { +
{localBranches.length}
+ {currentBranch && } + {context.branches && localBranches.slice(0, localBranchPage * pageLength).map((branch, index) => { return ( ); })} + {context.branches && localBranches.length > localBranchPage * pageLength && { + setLocalBranchPage(localBranchPage + 1) + }}>Show more}
{context.upstream ? <>
- - {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => { - return ( - - ); - })} +
{remoteBranches.length}
+ {context.branches && remoteBranches + .slice(0, remoteBranchPage * pageLength) + .map((branch, index) => { + return ( + + ); + })} + {context.branches && remoteBranches.length > remoteBranchPage * pageLength && <> { + setRemoteBranchPage(remoteBranchPage + 1); + }}>Show more

} { await actions.fetch({ remote: context.upstream diff --git a/libs/remix-ui/git/src/lib/gitactions.ts b/libs/remix-ui/git/src/lib/gitactions.ts index 1805289dfc..8d9cc4f97a 100644 --- a/libs/remix-ui/git/src/lib/gitactions.ts +++ b/libs/remix-ui/git/src/lib/gitactions.ts @@ -1,6 +1,6 @@ import { ReadBlobResult, ReadCommitResult } from "isomorphic-git"; import React from "react"; -import { fileStatus, fileStatusMerge, setRemoteBranchCommits, resetRemoteBranchCommits, setBranches, setCanCommit, setCommitChanges, setCommits, setCurrentBranch, setGitHubUser, setLoading, setRemoteBranches, setRemotes, setRepos, setUpstream, setLocalBranchCommits, setBranchDifferences, setRemoteAsDefault, setScopes, setLog, clearLog, setUserEmails, setCurrenHead, setStoragePayload, resetBranchDifferences } from "../state/gitpayload"; +import { fileStatus, fileStatusMerge, setRemoteBranchCommits, resetRemoteBranchCommits, setBranches, setCanCommit, setCommitChanges, setCommits, setCurrentBranch, setGitHubUser, setLoading, setRemoteBranches, setRemotes, setRepos, setUpstream, setLocalBranchCommits, setBranchDifferences, setRemoteAsDefault, setScopes, setLog, clearLog, setUserEmails, setCurrenHead, setStoragePayload, resetBranchDifferences, setGitLogCount, setTimestamp } from "../state/gitpayload"; import { GitHubUser, branch, commitChange, gitActionDispatch, statusMatrixType, gitState, branchDifference, remote, gitLog, fileStatusResult, customGitApi, IGitApi, cloneInputType, fetchInputType, pullInputType, pushInputType, checkoutInput, rmInput, addInput, repository, userEmails, storage, gitMatomoEventTypes } from '../types'; import { removeSlash } from "../utils"; import { disableCallBacks, enableCallBacks } from "./listeners"; @@ -41,7 +41,7 @@ export const setPlugin = (p: Plugin, dispatcher: React.Dispatch { await sendToMatomo(gitMatomoEventTypes.INIT) await plugin.call('dgitApi', "init"); - await gitlog(); + dispatch(setTimestamp(Date.now())) await getBranches(); } @@ -81,13 +81,13 @@ export const getFileStatusMatrix = async (filepaths: string[]) => { dispatch(setLoading(false)) } -export const getCommits = async () => { +export const getCommits = async (depth: number) => { try { const commits: ReadCommitResult[] = await plugin.call( 'dgitApi', "log", - { ref: "HEAD" } + { ref: "HEAD", depth: depth } ); return commits; @@ -96,11 +96,12 @@ export const getCommits = async () => { } } -export const gitlog = async () => { +export const gitlog = async (depth: number) => { + console.log('gitlog start') dispatch(setLoading(true)) let commits = [] try { - commits = await getCommits() + commits = await getCommits(depth) } catch (e) { } dispatch(setCommits(commits)) @@ -108,6 +109,10 @@ export const gitlog = async () => { dispatch(setLoading(false)) } +export const setStateGitLogCount = async (count: number) => { + dispatch(setGitLogCount(count)) +} + export const showCurrentBranch = async () => { try { const branch = await currentBranch(); @@ -342,7 +347,7 @@ export const fetch = async (input: fetchInputType) => { try { await plugin.call('dgitApi', 'fetch', input); if (!input.quiet) { - await gitlog() + dispatch(setTimestamp(Date.now())) await getBranches() } } catch (e: any) { @@ -359,7 +364,7 @@ export const pull = async (input: pullInputType) => { await disableCallBacks() try { await plugin.call('dgitApi', 'pull', input) - await gitlog() + dispatch(setTimestamp(Date.now())) } catch (e: any) { console.log(e) await parseError(e) @@ -393,6 +398,8 @@ const tokenWarning = async () => { const parseError = async (e: any) => { console.trace(e) + if(!e.message) return + // if message conttains 401 Unauthorized, show token warning if (e.message.includes('401')) { await sendToMatomo(gitMatomoEventTypes.ERROR, ['401']) diff --git a/libs/remix-ui/git/src/lib/listeners.ts b/libs/remix-ui/git/src/lib/listeners.ts index a873b303f7..161bfd5af2 100644 --- a/libs/remix-ui/git/src/lib/listeners.ts +++ b/libs/remix-ui/git/src/lib/listeners.ts @@ -1,6 +1,6 @@ import React from "react"; -import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails } from "../state/gitpayload"; +import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails, setTimestamp } from "../state/gitpayload"; import { gitActionDispatch, gitUIPanels, storage } from "../types"; import { Plugin } from "@remixproject/engine"; import { getBranches, getFileStatusMatrix, loadGitHubUserFromToken, getRemotes, gitlog, setPlugin, setStorage } from "./gitactions"; @@ -72,7 +72,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch { - gitlog() + gitDispatch(setTimestamp(Date.now())) }) loadFileQueue.enqueue(async () => { getBranches() @@ -84,7 +84,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch { loadFileQueue.enqueue(async () => { - gitlog() + gitDispatch(setTimestamp(Date.now())) }) loadFileQueue.enqueue(async () => { getBranches() @@ -111,7 +111,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch { loadFileQueue.enqueue(async () => { - gitlog() + gitDispatch(setTimestamp(Date.now())) }, 10) loadFileQueue.enqueue(async () => { getBranches() @@ -123,7 +123,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch { loadFileQueue.enqueue(async () => { - gitlog() + gitDispatch(setTimestamp(Date.now())) }) loadFileQueue.enqueue(async () => { getBranches() @@ -145,7 +145,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch { - gitlog() + gitDispatch(setTimestamp(Date.now())) }) }) plugin.on('manager', 'pluginActivated', async (p: Profile) => { diff --git a/libs/remix-ui/git/src/state/actions.ts b/libs/remix-ui/git/src/state/actions.ts index 6aa8b95bff..821c049cd0 100644 --- a/libs/remix-ui/git/src/state/actions.ts +++ b/libs/remix-ui/git/src/state/actions.ts @@ -44,6 +44,8 @@ export interface ActionPayloadTypes { CLEAR_LOG: void SET_USER_EMAILS: userEmails SET_STORAGE: storage + SET_TIMESTAMP: number + SET_GIT_LOG_COUNT: number } export interface Action { diff --git a/libs/remix-ui/git/src/types/index.ts b/libs/remix-ui/git/src/types/index.ts index 31e34db978..f3fd48e499 100644 --- a/libs/remix-ui/git/src/types/index.ts +++ b/libs/remix-ui/git/src/types/index.ts @@ -185,6 +185,8 @@ export type gitState = { gitHubScopes: string[] gitHubAccessToken: string log: gitLog[] + timestamp: number + gitLogCount: number } export type gitLog = { type: 'error' | 'warning' | 'info' | 'success', @@ -304,7 +306,9 @@ export const defaultGitState: gitState = { userEmails: [] as userEmails, gitHubScopes: [], gitHubAccessToken: "", - log: [] + log: [], + timestamp: 0, + gitLogCount: 22 } export const defaultLoaderState: loaderState = { @@ -494,4 +498,9 @@ export interface clearLogAction { type: string } -export type gitActionDispatch = setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction \ No newline at end of file +export interface setTimeStampAction { + type: string, + payload: number +} + +export type gitActionDispatch = setTimeStampAction | setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction