pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
fix febbox setup on onboarding
+44
-10
+44
-10
src/pages/onboarding/Onboarding.tsx
+44
-10
src/pages/onboarding/Onboarding.tsx
···
57
57
58
58
export function FEDAPISetup() {
59
59
const { t } = useTranslation();
60
-
const [isExpanded, setIsExpanded] = useState(false);
61
60
const febboxKey = usePreferencesStore((s) => s.febboxKey);
62
61
const setFebboxKey = usePreferencesStore((s) => s.setFebboxKey);
63
-
const user = useAuthStore();
64
62
65
-
// Enable febbox token when account is loaded and we have a token
63
+
// Initialize isExpanded based on whether febboxKey has a value
64
+
const [isExpanded, setIsExpanded] = useState(
65
+
febboxKey !== null && febboxKey !== "",
66
+
);
67
+
68
+
// Add a separate effect to set the initial state
66
69
useEffect(() => {
67
-
if (user.account && febboxKey) {
68
-
setFebboxKey(febboxKey);
70
+
// If we have a valid key, make sure the section is expanded
71
+
if (febboxKey && febboxKey.length > 0) {
69
72
setIsExpanded(true);
70
73
}
71
-
}, [user.account, febboxKey, setFebboxKey]);
74
+
}, [febboxKey]);
72
75
73
76
const [status, setStatus] = useState<Status>("unset");
74
77
const statusMap: Record<Status, StatusCircleProps["type"]> = {
···
87
90
checkTokenStatus();
88
91
}, [febboxKey]);
89
92
93
+
// Toggle handler that preserves the key
94
+
const toggleExpanded = () => {
95
+
if (isExpanded) {
96
+
// Store the key temporarily instead of setting to null
97
+
setFebboxKey("");
98
+
setIsExpanded(false);
99
+
} else {
100
+
setIsExpanded(true);
101
+
}
102
+
};
103
+
90
104
const [showVideo, setShowVideo] = useState(false);
91
105
92
106
if (conf().ALLOW_FEBBOX_KEY) {
···
103
117
</p>
104
118
</div>
105
119
<div>
106
-
<Toggle
107
-
onClick={() => setIsExpanded(!isExpanded)}
108
-
enabled={isExpanded}
109
-
/>
120
+
<Toggle onClick={toggleExpanded} enabled={isExpanded} />
110
121
</div>
111
122
</div>
112
123
{isExpanded ? (
···
184
195
{t("fedapi.status.failure")}
185
196
</p>
186
197
)}
198
+
{status === "api_down" && (
199
+
<p className="text-type-danger mt-4">
200
+
{t(
201
+
"fedapi.status.api_down",
202
+
"Febbox API is currently unavailable. Please try again later.",
203
+
)}
204
+
</p>
205
+
)}
206
+
{status === "invalid_token" && (
207
+
<p className="text-type-danger mt-4">
208
+
{t(
209
+
"fedapi.status.invalid_token",
210
+
"Invalid token. Please check your Febbox UI token.",
211
+
)}
212
+
</p>
213
+
)}
214
+
</>
215
+
) : null}
216
+
</SettingsCard>
217
+
</div>
218
+
);
219
+
}
220
+
}
187
221
</>
188
222
) : null}
189
223
</SettingsCard>