Skip to content

AB#109285 convert to function based app - #94

Merged
lardo-de-arnaud merged 1 commit into
masterfrom
AB#109285
Sep 17, 2026
Merged

lardo-de-arnaud merged 1 commit into
masterfrom
AB#109285

Conversation

@lardo-de-arnaud

Copy link
Copy Markdown
Contributor

No description provided.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 27, 2026 •

Copy link
Copy Markdown

Deploying canvas-subaccounts with  Cloudflare Pages  Cloudflare Pages

Latest commit: a8c9e2f
Status: ✅  Deploy successful!
Preview URL: https://28df7b81.canvas-subaccounts.pages.dev
Branch Preview URL: https://ab-109285.canvas-subaccounts.pages.dev

View logs

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR modernizes the React codebase by converting several class-based components to function components using Hooks (useState, useEffect, useCallback, useRef) and memoization (React.memo), aligning the app with a function-based component architecture.

Changes:

  • Converted App, AccountsTree, ListAccounts, Account, and Error from class components to function components.
  • Reworked AccountsTree data-loading and search flow to use Hook state/refs and an iterative search approach.
  • Updated package-lock.json with dependency metadata changes (removal of libc entries for some optional packages).

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/App.jsx Converted to Hooks; token handling and derived server config now computed in-function.
src/AccountsTree.jsx Converted to Hooks; rewritten loading/search/open-state logic with refs and functional updates.
src/ListAccounts.jsx Converted to React.memo function component; internal render helpers moved to closures.
src/Account.jsx Converted to function component; click handler now uses useCallback.
src/Error.jsx Converted to a simple function component.
package-lock.json Removes libc metadata from certain optional packages.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/AccountsTree.jsx
Comment on lines +96 to +97
updateState({ open: { ...state.open, ...toOpen }, from: match }, () => accountRefs.current[match]?.scrollIntoView({ behavior: 'smooth', block: 'center' }))
} else updateState({ searchMessages: [{ type: 'error', text: state.from ? 'No more matches' : 'No matches' }], from: state.from ? null : state.from })
Comment thread src/App.jsx
Comment on lines +36 to +40
const servers = settings[window.location.origin]

updateToken = (token) => {
const updateToken = useCallback((token) => {
const jwt = jwtDecode(token)
this.setState({
setState(current => ({ ...current,

@buckett buckett left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally looks ok, although it's hard to reason about.

Comment thread src/AccountsTree.jsx Outdated
const [state, setState] = useState({ search: '', open: {}, tryLoading: true, loadAll: false, loadingAll: false, collections: null })
const collectionsRef = useRef(null)
const accountRefs = useRef([])
const updateState = (value, callback) => setState(current => { const next = typeof value === 'function' ? value(current) : value; if (next.collections) collectionsRef.current = next.collections; if (callback) setTimeout(callback, 0); return { ...current, ...next } })

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really hard to read all on one line.

Comment thread src/AccountsTree.jsx
Comment on lines -211 to -214
* We return null to indicate we haven't found anything.
* An empty array to indicate that the location we were searching from previously has been found
* A non empty array when we matched
*/

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why throw away the comment?

Comment thread src/AccountsTree.jsx Outdated
const ordered = []
const visit = (id) => {
ordered.push(id)
;(collections[id].collections || []).forEach(visit)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is going on with the formatting here?

@lardo-de-arnaud
lardo-de-arnaud merged commit d0e5d77 into master Sep 17, 2026
2 checks passed
@lardo-de-arnaud
lardo-de-arnaud deleted the AB#109285 branch September 17, 2026 11:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants