fix: File uploads

fix: onboarding
closes #169 #166

src/pages/dashboard/intro/final.tsx

@@ -26,7 +26,7 @@ export default function DashboardIntroFinal() {
   }, []);
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center">
       <StepHeader />
       <div className="flex flex-col gap-4 w-[30rem]">
         <h2 className="text-center">

src/pages/dashboard/intro/step1.tsx

@@ -12,6 +12,7 @@ export default function DashboardIntroStep1() {
   const [title, setTitle] = useState<string>();
   const [summary, setDescription] = useState<string>();
   const [image, setImage] = useState<string>();
+  const [error, setError] = useState<string>();
 
   useEffect(() => {
     DefaultProvider.info().then(i => {
@@ -48,8 +49,9 @@ export default function DashboardIntroStep1() {
             onChange={e => setImage(e.target.value)}
             placeholder={formatMessage({ defaultMessage: "Cover image URL (optional)" })}
           />
-          <FileUploader onResult={setImage} />
+          <FileUploader onResult={setImage} onError={e => setError(e.toString())} />
         </div>
+        {error && <b className="text-warning">{error}</b>}
         <small className="text-layer-4">
           <FormattedMessage defaultMessage="Recommended size: 1920x1080 (16:9)" />
         </small>

src/pages/dashboard/intro/step3.tsx

@@ -3,11 +3,12 @@ import StepHeader from "./step-header";
 import { DefaultButton } from "@/element/buttons";
 import { DefaultProvider, StreamProviderForward } from "@/providers";
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { AddForwardInputs } from "@/element/provider/nostr/fowards";
 
 export default function DashboardIntroStep3() {
   const navigate = useNavigate();
+  const location = useLocation();
   const [forwards, setForwards] = useState<Array<StreamProviderForward>>([]);
 
   async function loadInfo() {
@@ -21,7 +22,7 @@ export default function DashboardIntroStep3() {
   }, []);
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center">
       <StepHeader />
       <div className="flex flex-col gap-4 w-[30rem]">
         <h2 className="text-center">
@@ -50,7 +51,9 @@ export default function DashboardIntroStep3() {
         <AddForwardInputs provider={DefaultProvider} onAdd={loadInfo} />
         <DefaultButton
           onClick={async () => {
-            navigate("/dashboard/step-4");
+            navigate("/dashboard/step-4", {
+              state: location.state,
+            });
           }}>
           <FormattedMessage defaultMessage="Continue" />
         </DefaultButton>

src/pages/dashboard/intro/step4.tsx

@@ -3,7 +3,7 @@ import StepHeader from "./step-header";
 import { DefaultButton } from "@/element/buttons";
 import { DefaultProvider } from "@/providers";
 import { useContext, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { GoalSelector } from "@/element/stream-editor/goal-selector";
 import AmountInput from "@/element/amount-input";
 import { useLogin } from "@/hooks/login";
@@ -12,6 +12,7 @@ import { SnortContext } from "@snort/system-react";
 
 export default function DashboardIntroStep4() {
   const navigate = useNavigate();
+  const location = useLocation();
   const [goalName, setGoalName] = useState("");
   const [goalAmount, setGoalMount] = useState(0);
   const [goal, setGoal] = useState<string>();
@@ -30,7 +31,7 @@ export default function DashboardIntroStep4() {
   }, []);
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center">
       <StepHeader />
       <div className="flex flex-col gap-4 w-[30rem]">
         <h2 className="text-center">
@@ -67,15 +68,27 @@ export default function DashboardIntroStep4() {
                   .content(goalName);
               });
               await system.BroadcastEvent(goalEvent);
-              await DefaultProvider.updateStream({
+              const newState = {
+                ...location.state,
                 goal: goalEvent.id,
+              };
+              await DefaultProvider.updateStream(newState);
+              navigate("/dashboard/final", {
+                state: newState,
               });
-              navigate("/dashboard/final");
             } else if (goal) {
-              await DefaultProvider.updateStream({
+              const newState = {
+                ...location.state,
                 goal,
+              };
+              await DefaultProvider.updateStream(newState);
+              navigate("/dashboard/final", {
+                state: newState,
+              });
+            } else {
+              navigate("/dashboard/final", {
+                state: location.state,
               });
-              navigate("/dashboard/final");
             }
           }}>
           <FormattedMessage defaultMessage="Continue" />