{/** Icons */}
diff --git a/packages/frontend/src/pages/index.tsx b/packages/frontend/src/pages/index.tsx
index add9a2c2..f5fec7b5 100644
--- a/packages/frontend/src/pages/index.tsx
+++ b/packages/frontend/src/pages/index.tsx
@@ -2,51 +2,85 @@ import { Organization } from 'gql-client';
import { Loader2 } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
+import { OnboardingDialog, hasCompletedOnboarding } from '../components/onboarding-flow';
import { useGQLClient } from '../context/GQLClientContext';
+import { useOctokit } from '../context/OctokitContext';
/**
- * Index component that fetches user organizations and redirects to the first organization's slug.
- * If no organization is found, it displays a loading spinner.
+ * Index component that handles post-authentication flow.
+ * Shows onboarding dialog if needed, then redirects to first organization.
*
- * @returns {JSX.Element} A JSX element that either navigates to the organization's slug or displays a loading spinner.
+ * @returns {JSX.Element} The rendered component.
*/
const Index = () => {
const client = useGQLClient();
const [organization, setOrganization] = useState();
+ const [loading, setLoading] = useState(true);
+ const [showOnboarding, setShowOnboarding] = useState(false);
const navigate = useNavigate();
+ const { octokit } = useOctokit();
+
+ // Check if GitHub is connected
+ const isGitHubConnected = Boolean(octokit);
/**
* Fetches the user's organizations from the GQLClient.
* Sets the first organization in the list to the organization state.
- * If no organizations are found, navigates to the '/auth' route.
+ * If no organizations are found, shows onboarding.
*
* @async
* @function fetchUserOrganizations
* @returns {Promise}
*/
const fetchUserOrganizations = useCallback(async () => {
- const { organizations } = await client.getOrganizations();
- if (organizations && organizations.length > 0) {
- // By default information of first organization displayed
- setOrganization(organizations[0]);
- } else {
- navigate('/auth');
+ try {
+ setLoading(true);
+ const { organizations } = await client.getOrganizations();
+
+ if (organizations && organizations.length > 0) {
+ // By default information of first organization displayed
+ setOrganization(organizations[0]);
+
+ // Check if onboarding is needed
+ const onboardingCompleted = hasCompletedOnboarding();
+
+ // We need onboarding if it hasn't been completed or GitHub is not connected
+ if (!onboardingCompleted || !isGitHubConnected) {
+ setShowOnboarding(true);
+ }
+ } else {
+ // No organizations found, show onboarding
+ setShowOnboarding(true);
+ }
+ } catch (error) {
+ console.error('Error fetching organizations:', error);
+ // Show onboarding on error
+ setShowOnboarding(true);
+ } finally {
+ setLoading(false);
}
- }, [client, navigate]);
+ }, [client, isGitHubConnected]);
useEffect(() => {
fetchUserOrganizations();
}, [fetchUserOrganizations]);
- return (
- <>
- {Boolean(organization) ? (
-
- ) : (
-
- )}
-
- );
+ // Handle onboarding completion
+ const handleOnboardingClosed = () => {
+ setShowOnboarding(false);
+ // Fetch organizations again after onboarding in case new ones were created
+ fetchUserOrganizations();
+ };
+
+ if (loading) {
+ return ;
+ }
+
+ if (showOnboarding) {
+ return ;
+ }
+
+ return organization ? : ;
};
export default Index;