New Onboarding (#2596)

* Add round and square buttons * Allow some style for buttons, add icons * Change text selection color * Center button text, whoops * Outer layout, some primitive updates * WIP * onboarding feed prefs (#2590) * add `style` to toggle label to modify text style * Revert "add `style` to toggle label to modify text style" This reverts commit 8f4b517b8585ca64a4bf44f6cb40ac070ece8932. * following feed prefs * remove unnecessary memo * reusable divider component * org imports * add finished screen * Theme SelectedAccountCard * Require at least 3 interests * Placeholder save logic * WIP algo feeds * Improve lineHeight handling, add RichText, improve Link by adding InlineLink * Inherit lineHeight in heading comps * Algo feeds mostly good * Topical feeds ish * Layout cleanup * Improve button styles * moderation prefs for onboarding (#2594) * WIP algo feeds * modify controlalbelgroup typing for easy .map() * adjust padding on button * add moderation screen * add moderation screen * add moderation screen --------- Co-authored-by: Eric Bailey <git@esb.lol> * Fix toggle button styles * A11y props on outer portal * Put it all on red * New data shape * Handle mock data * Bulk write (not yet) * Remove interests validation * Clean up interests * i18n layout and first step * Clean up suggested follows screen * Clean up following step * Clean up algo feeds step * Clean up topical feeds * Add skeleton for feed card * WIP moderation step * cleanup moderation styles (#2605) * cleanup moderation styles * fix(?) toggle button group styles * adjust toggle to fit any screen * Some more cleanup * Icons * ToggleButton tweaks * Reset * Hook up data * Better suggestions * Bulk write * Some logging * Use new api * Concat topical feeds * Metrics * Disable links in RichText, feedcards * Tweak primary feed cards * Update metrics * Fix layout shift * Fix ToggleButton again, whoops * Error state * Bump api package, ensure interests are saved * Better fix for autofill * i18n, button positions * Remove unused export * Add default prefs object * Fix overflow in user cards * Add 2 lines of bios to suggested accounts cards * Nits * Don't resolve facets by default * Update storybook * Disable flag for now * Remove age dialog from moderations step * Improvements and tweaks to new onboarding --------- Co-authored-by: Hailey <153161762+haileyok@users.noreply.github.com> Co-authored-by: Paul Frazee <pfrazee@gmail.com>
2024-01-25 22:22:40 -06:00 · 2024-01-25 22:22:40 -06:00 · 3371038f7d
commit 3371038f7d
parent 5443503593
75 changed files with 3514 additions and 210 deletions
--- a/src/screens/Onboarding/state.ts
+++ b/src/screens/Onboarding/state.ts
@ -0,0 +1,201 @@
+import React from 'react'
+
+import {ApiResponseMap} from '#/screens/Onboarding/StepInterests/data'
+import {logger} from '#/logger'
+
+export type OnboardingState = {
+  hasPrev: boolean
+  totalSteps: number
+  activeStep:
+    | 'interests'
+    | 'suggestedAccounts'
+    | 'followingFeed'
+    | 'algoFeeds'
+    | 'topicalFeeds'
+    | 'moderation'
+    | 'finished'
+  activeStepIndex: number
+
+  interestsStepResults: {
+    selectedInterests: string[]
+    apiResponse: ApiResponseMap
+  }
+  suggestedAccountsStepResults: {
+    accountDids: string[]
+  }
+  algoFeedsStepResults: {
+    feedUris: string[]
+  }
+  topicalFeedsStepResults: {
+    feedUris: string[]
+  }
+}
+
+export type OnboardingAction =
+  | {
+      type: 'next'
+    }
+  | {
+      type: 'prev'
+    }
+  | {
+      type: 'finish'
+    }
+  | {
+      type: 'setInterestsStepResults'
+      selectedInterests: string[]
+      apiResponse: ApiResponseMap
+    }
+  | {
+      type: 'setSuggestedAccountsStepResults'
+      accountDids: string[]
+    }
+  | {
+      type: 'setAlgoFeedsStepResults'
+      feedUris: string[]
+    }
+  | {
+      type: 'setTopicalFeedsStepResults'
+      feedUris: string[]
+    }
+
+export const initialState: OnboardingState = {
+  hasPrev: false,
+  totalSteps: 7,
+  activeStep: 'interests',
+  activeStepIndex: 1,
+
+  interestsStepResults: {
+    selectedInterests: [],
+    apiResponse: {
+      interests: [],
+      suggestedAccountDids: {},
+      suggestedFeedUris: {},
+    },
+  },
+  suggestedAccountsStepResults: {
+    accountDids: [],
+  },
+  algoFeedsStepResults: {
+    feedUris: [],
+  },
+  topicalFeedsStepResults: {
+    feedUris: [],
+  },
+}
+
+export const Context = React.createContext<{
+  state: OnboardingState
+  dispatch: React.Dispatch<OnboardingAction>
+}>({
+  state: {...initialState},
+  dispatch: () => {},
+})
+
+export function reducer(
+  s: OnboardingState,
+  a: OnboardingAction,
+): OnboardingState {
+  let next = {...s}
+
+  switch (a.type) {
+    case 'next': {
+      if (s.activeStep === 'interests') {
+        next.activeStep = 'suggestedAccounts'
+        next.activeStepIndex = 2
+      } else if (s.activeStep === 'suggestedAccounts') {
+        next.activeStep = 'followingFeed'
+        next.activeStepIndex = 3
+      } else if (s.activeStep === 'followingFeed') {
+        next.activeStep = 'algoFeeds'
+        next.activeStepIndex = 4
+      } else if (s.activeStep === 'algoFeeds') {
+        next.activeStep = 'topicalFeeds'
+        next.activeStepIndex = 5
+      } else if (s.activeStep === 'topicalFeeds') {
+        next.activeStep = 'moderation'
+        next.activeStepIndex = 6
+      } else if (s.activeStep === 'moderation') {
+        next.activeStep = 'finished'
+        next.activeStepIndex = 7
+      }
+      break
+    }
+    case 'prev': {
+      if (s.activeStep === 'suggestedAccounts') {
+        next.activeStep = 'interests'
+        next.activeStepIndex = 1
+      } else if (s.activeStep === 'followingFeed') {
+        next.activeStep = 'suggestedAccounts'
+        next.activeStepIndex = 2
+      } else if (s.activeStep === 'algoFeeds') {
+        next.activeStep = 'followingFeed'
+        next.activeStepIndex = 3
+      } else if (s.activeStep === 'topicalFeeds') {
+        next.activeStep = 'algoFeeds'
+        next.activeStepIndex = 4
+      } else if (s.activeStep === 'moderation') {
+        next.activeStep = 'topicalFeeds'
+        next.activeStepIndex = 5
+      } else if (s.activeStep === 'finished') {
+        next.activeStep = 'moderation'
+        next.activeStepIndex = 6
+      }
+      break
+    }
+    case 'finish': {
+      next = initialState
+      break
+    }
+    case 'setInterestsStepResults': {
+      next.interestsStepResults = {
+        selectedInterests: a.selectedInterests,
+        apiResponse: a.apiResponse,
+      }
+      break
+    }
+    case 'setSuggestedAccountsStepResults': {
+      next.suggestedAccountsStepResults = {
+        accountDids: next.suggestedAccountsStepResults.accountDids.concat(
+          a.accountDids,
+        ),
+      }
+      break
+    }
+    case 'setAlgoFeedsStepResults': {
+      next.algoFeedsStepResults = {
+        feedUris: a.feedUris,
+      }
+      break
+    }
+    case 'setTopicalFeedsStepResults': {
+      next.topicalFeedsStepResults = {
+        feedUris: next.topicalFeedsStepResults.feedUris.concat(a.feedUris),
+      }
+      break
+    }
+  }
+
+  const state = {
+    ...next,
+    hasPrev: next.activeStep !== 'interests',
+  }
+
+  logger.debug(`onboarding`, {
+    hasPrev: state.hasPrev,
+    activeStep: state.activeStep,
+    activeStepIndex: state.activeStepIndex,
+    interestsStepResults: {
+      selectedInterests: state.interestsStepResults.selectedInterests,
+    },
+    suggestedAccountsStepResults: state.suggestedAccountsStepResults,
+    algoFeedsStepResults: state.algoFeedsStepResults,
+    topicalFeedsStepResults: state.topicalFeedsStepResults,
+  })
+
+  if (s.activeStep !== state.activeStep) {
+    logger.info(`onboarding: step changed`, {activeStep: state.activeStep})
+  }
+
+  return state
+}