6ec2bacb72
Currently there are random issues (logout, auth desync) and inconveniences with how Supabase and backend API works. Resolves: - https://github.com/Significant-Gravitas/AutoGPT/issues/9006 - https://github.com/Significant-Gravitas/AutoGPT/issues/8912 ### Changes 🏗️ This PR streamlines how the Supabase and backend API is used to fix current errors with auth, remove unnecessary code and make it easier to use Supabase and backend API. - Add `getServerSupabase` for server side that returns `SupabaseClient`. - Add `Spinner` component that is used for loading animation. - Remove redundant `useUser`, user is fetched in `useSupabase` already. - Replace most Supabase `create*Client` to `getSupabaseServer` and `useSupabase`. - Remove redundant `AutoGPTServerAPI` class and rename `BaseAutoGPTServerAPI` to `BackendAPI` and use it instead. - Remove `SupabaseProvider` context; supabase caches internally what's possible already. - Move `useSupabase` hook to its own file and update it. ### Helpful table | Next.js usage | Server | Client | |---|---|---| | API | `new BackendAPI();` | `new BackendAPI();`* or `useBackendAPI()` | | Supabase | `getServerSupabase();` | `useSupabase();` | | user, user.role | `getServerUser();`** | `useSupabase();` | \* `BackendAPI` automatically chooses correct Supabase client, so while it's recommended to use `useBackendAPI()`, it's ok to use `new BackendAPI();` in client components and even memoize it: `useMemo(() => new BackendAPI(), [])`. ** The reason user isn't returned in `getServerSupabase` is because it forces async fetch but creating supabase doesn't, so it'd force `getServerSupabase` to be async or return `{ supabase: SupabaseClient, user: Promise<User> | null }`. For the same reason `useSupabase` provides access to `supabase` immediately but `user` *may* be loading, so there's `isUserLoading` provided as well. ### Checklist 📋 #### For code changes: - [ ] I have clearly listed my changes in the PR description - [ ] I have made a test plan - [ ] I have tested my changes according to the test plan: <!-- Put your test plan here: --> - [ ] ... <details> <summary>Example test plan</summary> - [ ] Create from scratch and execute an agent with at least 3 blocks - [ ] Import an agent from file upload, and confirm it executes correctly - [ ] Upload agent to marketplace - [ ] Import an agent from marketplace and confirm it executes correctly - [ ] Edit an agent from monitor, and confirm it executes correctly </details> #### For configuration changes: - [ ] `.env.example` is updated or already compatible with my changes - [ ] `docker-compose.yml` is updated or already compatible with my changes - [ ] I have included a list of my configuration changes in the PR description (under **Changes**) <details> <summary>Examples of configuration changes</summary> - Changing ports - Adding new services that need to communicate with each other - Secrets or environment variable changes - New or infrastructure changes such as databases </details> --------- Co-authored-by: Aarushi <50577581+aarushik93@users.noreply.github.com> Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co> |
||
|---|---|---|
| .. | ||
| .storybook | ||
| public | ||
| src | ||
| .env.example | ||
| .eslintrc.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| Dockerfile | ||
| README.md | ||
| components.json | ||
| next.config.mjs | ||
| package.json | ||
| playwright.config.ts | ||
| postcss.config.mjs | ||
| sentry.client.config.ts | ||
| sentry.edge.config.ts | ||
| sentry.server.config.ts | ||
| tailwind.config.ts | ||
| test-runner-jest.config.js | ||
| tsconfig.json | ||
| webpack.config.js | ||
| yarn.lock | ||
README.md
This is the frontend for AutoGPT's next generation
Getting Started
Run the following installation once.
npm install
# or
yarn install
# or
pnpm install
# or
bun install
Next, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
For subsequent runs, you do not have to npm install again. Simply do npm run dev.
If the project is updated via git, you will need to npm install after each update.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Deploy
TODO
Storybook
Storybook is a powerful development environment for UI components. It allows you to build UI components in isolation, making it easier to develop, test, and document your components independently from your main application.
Purpose in the Development Process
- Component Development: Develop and test UI components in isolation.
- Visual Testing: Easily spot visual regressions.
- Documentation: Automatically document components and their props.
- Collaboration: Share components with your team or stakeholders for feedback.
How to Use Storybook
-
Start Storybook: Run the following command to start the Storybook development server:
npm run storybookThis will start Storybook on port 6006. Open http://localhost:6006 in your browser to view your component library.
-
Build Storybook: To build a static version of Storybook for deployment, use:
npm run build-storybook -
Running Storybook Tests: Storybook tests can be run using:
npm run test-storybookFor CI environments, use:
npm run test-storybook:ci -
Writing Stories: Create
.stories.tsxfiles alongside your components to define different states and variations of your components.
By integrating Storybook into our development workflow, we can streamline UI development, improve component reusability, and maintain a consistent design system across the project.