aboutsummaryrefslogtreecommitdiff
path: root/apps/web/app/new/onboarding/layout.tsx
blob: 644b2018d66a3964caa0d728cd29ad0eb890066f (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
"use client"

import {
	createContext,
	useContext,
	useState,
	useEffect,
	useCallback,
	type ReactNode,
} from "react"
import { useAuth } from "@lib/auth-context"

export type MemoryFormData = {
	twitter: string
	linkedin: string
	description: string
	otherLinks: string[]
} | null

interface OnboardingContextValue {
	name: string
	setName: (name: string) => void
	memoryFormData: MemoryFormData
	setMemoryFormData: (data: MemoryFormData) => void
	resetOnboarding: () => void
}

const OnboardingContext = createContext<OnboardingContextValue | null>(null)

export function useOnboardingContext() {
	const ctx = useContext(OnboardingContext)
	if (!ctx) {
		throw new Error("useOnboardingContext must be used within OnboardingLayout")
	}
	return ctx
}

export default function OnboardingLayout({
	children,
}: {
	children: ReactNode
}) {
	const { user } = useAuth()

	const [name, setNameState] = useState<string>("")
	const [memoryFormData, setMemoryFormDataState] =
		useState<MemoryFormData>(null)

	useEffect(() => {
		const storedName = localStorage.getItem("onboarding_name")
		const storedMemoryFormData = localStorage.getItem(
			"onboarding_memoryFormData",
		)

		if (storedName) {
			setNameState(storedName)
		} else if (user?.displayUsername) {
			setNameState(user.displayUsername)
			localStorage.setItem("onboarding_name", user.displayUsername)
		} else if (user?.name) {
			setNameState(user.name)
			localStorage.setItem("onboarding_name", user.name)
		}

		if (storedMemoryFormData) {
			try {
				setMemoryFormDataState(JSON.parse(storedMemoryFormData))
			} catch {
				// ignore parse errors
			}
		}
	}, [user?.displayUsername, user?.name])

	const setName = useCallback((newName: string) => {
		setNameState(newName)
		localStorage.setItem("onboarding_name", newName)
		localStorage.setItem("username", newName)
	}, [])

	const setMemoryFormData = useCallback((data: MemoryFormData) => {
		setMemoryFormDataState(data)
		if (data) {
			localStorage.setItem("onboarding_memoryFormData", JSON.stringify(data))
		} else {
			localStorage.removeItem("onboarding_memoryFormData")
		}
	}, [])

	const resetOnboarding = useCallback(() => {
		localStorage.removeItem("onboarding_name")
		localStorage.removeItem("onboarding_memoryFormData")
		setNameState("")
		setMemoryFormDataState(null)
	}, [])

	const contextValue: OnboardingContextValue = {
		name,
		setName,
		memoryFormData,
		setMemoryFormData,
		resetOnboarding,
	}

	return (
		<OnboardingContext.Provider value={contextValue}>
			{children}
		</OnboardingContext.Provider>
	)
}