Refactor duplicated Syncfusion component loading and database queries

[Copilot]

Eliminated repeated patterns across 9 files: dynamic Syncfusion component imports, license registration, and database queries.

Changes

• Created useSyncfusionComponent hook - Consolidates useState/useEffect pattern for dynamic imports across 7 components (Header, TripCard, MobileSideBar, admin-layout, all-users, create-trip, NavItems). Includes error handling and prevents memory leaks.

• Centralized license registration - app/lib/syncfusion.ts replaces 3 duplicate calls with singleton pattern.

• Extracted queryUserByAccountId helper - Eliminates duplication between getExistingUser and getUser in auth.ts.

Example

Before:

const [ButtonComponent, setButtonComponent] = useState<any>(null);
useEffect(() => {
  import("@syncfusion/ej2-react-buttons").then((pkg) => 
    setButtonComponent(() => pkg.ButtonComponent)
  );
}, []);
if (!ButtonComponent) return null;

After:

const components = useSyncfusionComponent(
  () => import("@syncfusion/ej2-react-buttons"),
  ["ButtonComponent"]
);
if (!components) return null;
const { ButtonComponent } = components;

Net: +51 lines added (new utilities), -84 lines removed from components.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• o1.ingest.sentry.io
  • Triggering command: node /home/REDACTED/work/travel-WebApp/travel-WebApp/node_modules/.bin/react-router typegen (dns block)
  • Triggering command: node /home/REDACTED/work/travel-WebApp/travel-WebApp/node_modules/.bin/react-router build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Find and refactor duplicated code

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[netlify]

✅ Deploy Preview for travel-app-ts ready!

Name	Link
🔨 Latest commit	3b55577
🔍 Latest deploy log	https://app.netlify.com/projects/travel-app-ts/deploys/69073ecfcc49ed000808f30e
😎 Deploy Preview	https://deploy-preview-1--travel-app-ts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

@copilot як мені примінити ці зміни до мого локального проекту?

To apply these changes to your local project, you have a few options:

Option 1: Merge the PR branch

git checkout main
git pull origin main
git merge copilot/refactor-duplicated-code

Option 2: Pull the PR branch directly

git fetch origin copilot/refactor-duplicated-code
git checkout copilot/refactor-duplicated-code

Option 3: If you want to merge via GitHub
Simply merge this PR through the GitHub interface, then pull the latest main branch:

git checkout main
git pull origin main

After applying the changes, run:

npm install  # Ensure all dependencies are installed
npm run typecheck  # Verify TypeScript
npm run build  # Build the application

[Facelles]

good