| 43 | }, |
| 44 | ]; |
| 45 | export const Onboarding: React.FC = () => { |
| 46 | const user = useUser(); |
| 47 | const [successOpen, setSuccessOpen] = useState(false); |
| 48 | const [apiKey, setApiKey] = useState<string | null>(null); |
| 49 | const [currentStep, setCurrentStep] = useState(0); |
| 50 | const { toast } = useToast(); |
| 51 | |
| 52 | const channels = trpc.channel.list.useQuery(undefined, { |
| 53 | refetchInterval: 5000, |
| 54 | }); |
| 55 | |
| 56 | useEffect(() => { |
| 57 | if (channels.data?.length) { |
| 58 | setSuccessOpen(true); |
| 59 | setCurrentStep(2); |
| 60 | } |
| 61 | }, [channels.data]); |
| 62 | const createApiKey = trpc.apikey.create.useMutation({ |
| 63 | onSuccess: (data) => { |
| 64 | setApiKey(data.apiKey); |
| 65 | setCurrentStep(1); |
| 66 | }, |
| 67 | onError: (error) => { |
| 68 | toast({ |
| 69 | title: "Could not create api Key", |
| 70 | description: error.message, |
| 71 | variant: "destructive", |
| 72 | }); |
| 73 | }, |
| 74 | }); |
| 75 | |
| 76 | const curl = `curl -XPOST 'https://highstorm.app/api/v1/events/user.onboarded' \\ |
| 77 | -H 'Content-Type: application/json' \\ |
| 78 | -H 'Authorization: Bearer ${apiKey}' \\ |
| 79 | -d '{ |
| 80 | "event": "${user.user?.username} onboarded", |
| 81 | "content": "${user.user?.username} has sent their first event", |
| 82 | "metadata": { |
| 83 | "user_id": "${user.user?.id}", |
| 84 | "user_name": "${user.user?.username}" |
| 85 | } |
| 86 | }'`; |
| 87 | return ( |
| 88 | <div> |
| 89 | <Dialog open={successOpen} onOpenChange={(v) => setSuccessOpen(v)}> |
| 90 | <DialogContent> |
| 91 | <DialogHeader> |
| 92 | <DialogTitle>Success</DialogTitle> |
| 93 | <DialogDescription> |
| 94 | You have successfully published an event, let's check out the new channel: |
| 95 | </DialogDescription> |
| 96 | </DialogHeader> |
| 97 | |
| 98 | <Link href={`/channels/${channels.data?.at(0)?.name}`}> |
| 99 | <Button>Go to your Channel</Button> |
| 100 | </Link> |
| 101 | </DialogContent> |
| 102 | </Dialog> |