pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
dont require account for upload (temp)
+124
-139
+124
-139
src/pages/migration/MigrationUpload.tsx
+124
-139
src/pages/migration/MigrationUpload.tsx
···
175
175
<MinimalPageLayout>
176
176
<PageTitle k="migration.upload.title" subpage />
177
177
<CenterContainer>
178
-
{user.account ? (
179
-
<div>
180
-
<Stepper current={2} steps={2} className="mb-12" />
181
-
<Heading2 className="!text-4xl !mt-0">
182
-
{t("migration.upload.title")}
183
-
</Heading2>
184
-
<Paragraph className="text-lg max-w-md mb-6">
185
-
{t("migration.upload.description")}
186
-
</Paragraph>
178
+
<div>
179
+
<Stepper current={2} steps={2} className="mb-12" />
180
+
<Heading2 className="!text-4xl !mt-0">
181
+
{t("migration.upload.title")}
182
+
</Heading2>
183
+
<Paragraph className="text-lg max-w-md mb-6">
184
+
{t("migration.upload.description")}
185
+
</Paragraph>
187
186
188
-
<SettingsCard>
189
-
<div className="flex py-6 flex-col space-y-4 items-center justify-center">
190
-
<div className="flex flex-col space-y-2 w-full items-center">
191
-
<p className="text-sm">
192
-
{t("migration.upload.file.description")}:
193
-
</p>
187
+
<SettingsCard>
188
+
<div className="flex py-6 flex-col space-y-4 items-center justify-center">
189
+
<div className="flex flex-col space-y-2 w-full items-center">
190
+
<p className="text-sm">
191
+
{t("migration.upload.file.description")}:
192
+
</p>
193
+
</div>
194
+
<input
195
+
type="file"
196
+
accept=".json"
197
+
onChange={handleFileChange}
198
+
ref={fileInputRef}
199
+
className="hidden"
200
+
/>
201
+
202
+
<Button
203
+
onClick={handleFileButtonClick}
204
+
theme="purple"
205
+
className="w-full max-w-xs"
206
+
padding="md:px-12 p-2.5"
207
+
>
208
+
<Icon icon={Icons.FILE} className="pr-2" />
209
+
{selectedFile
210
+
? t("migration.upload.file.change")
211
+
: t("migration.upload.file.select")}
212
+
</Button>
213
+
214
+
{selectedFile && (
215
+
<div className="text-center mt-2 w-full">
216
+
<span className="text-sm font-medium">
217
+
{selectedFile.name}
218
+
{uploadedData?.exportDate && (
219
+
<div className="text-sm pb-2">
220
+
{t("migration.upload.exportedOn")}:{" "}
221
+
{new Date(
222
+
uploadedData?.exportDate || "",
223
+
).toLocaleDateString()}
224
+
</div>
225
+
)}
226
+
</span>
194
227
</div>
195
-
<input
196
-
type="file"
197
-
accept=".json"
198
-
onChange={handleFileChange}
199
-
ref={fileInputRef}
200
-
className="hidden"
201
-
/>
228
+
)}
202
229
203
-
<Button
204
-
onClick={handleFileButtonClick}
205
-
theme="purple"
206
-
className="w-full max-w-xs"
207
-
padding="md:px-12 p-2.5"
208
-
>
209
-
<Icon icon={Icons.FILE} className="pr-2" />
210
-
{selectedFile
211
-
? t("migration.upload.file.change")
212
-
: t("migration.upload.file.select")}
213
-
</Button>
230
+
{status === "processing" && (
231
+
<div className="flex items-center gap-2 text-sm text-green-400">
232
+
<Icon icon={Icons.CLOCK} className="pr-2" />
233
+
{t("migration.upload.status.processing")}
234
+
</div>
235
+
)}
214
236
215
-
{selectedFile && (
216
-
<div className="text-center mt-2 w-full">
217
-
<span className="text-sm font-medium">
218
-
{selectedFile.name}
219
-
{uploadedData?.exportDate && (
220
-
<div className="text-sm pb-2">
221
-
{t("migration.upload.exportedOn")}:{" "}
222
-
{new Date(
223
-
uploadedData?.exportDate || "",
224
-
).toLocaleDateString()}
225
-
</div>
226
-
)}
237
+
{status === "error" && (
238
+
<div className="flex items-center gap-2 text-sm text-red-400">
239
+
<Icon icon={Icons.WARNING} className="pr-2" />
240
+
{t("migration.upload.status.error")}
241
+
</div>
242
+
)}
243
+
</div>
244
+
</SettingsCard>
245
+
246
+
{uploadedData && (
247
+
<SettingsCard className="mt-6">
248
+
<Heading2 className="!my-0 !text-type-secondary">
249
+
{t("migration.upload.dataPreview")}
250
+
</Heading2>
251
+
<Divider marginClass="my-6 px-8 box-content -mx-8" />
252
+
253
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
254
+
<div className="p-4 bg-background rounded-lg">
255
+
<div className="flex items-center gap-2">
256
+
<Icon icon={Icons.BOOKMARK} className="text-xl" />
257
+
<span className="font-medium">
258
+
{t("migration.upload.items.bookmarks")}
227
259
</span>
228
260
</div>
229
-
)}
261
+
<div className="text-xl font-bold mt-2">
262
+
{uploadedData.bookmarks
263
+
? Object.keys(uploadedData.bookmarks).length
264
+
: 0}
265
+
</div>
266
+
</div>
230
267
231
-
{status === "processing" && (
232
-
<div className="flex items-center gap-2 text-sm text-green-400">
233
-
<Icon icon={Icons.CLOCK} className="pr-2" />
234
-
{t("migration.upload.status.processing")}
268
+
<div className="p-4 bg-background rounded-lg">
269
+
<div className="flex items-center gap-2">
270
+
<Icon icon={Icons.CLOCK} className="text-xl" />
271
+
<span className="font-medium">
272
+
{t("migration.upload.items.progress")}
273
+
</span>
274
+
</div>
275
+
<div className="text-xl font-bold mt-2">
276
+
{uploadedData.progress
277
+
? Object.keys(uploadedData.progress).length
278
+
: 0}
235
279
</div>
236
-
)}
280
+
</div>
281
+
</div>
237
282
238
-
{status === "error" && (
239
-
<div className="flex items-center gap-2 text-sm text-red-400">
240
-
<Icon icon={Icons.WARNING} className="pr-2" />
241
-
{t("migration.upload.status.error")}
283
+
<div className="flex py-6 flex-col space-y-2 items-center justify-center">
284
+
{status === "success" ? (
285
+
<div className="flex items-center gap-2 text-green-400">
286
+
<Icon icon={Icons.CHECKMARK} className="pr-2" />
287
+
{t("migration.upload.status.success")}
242
288
</div>
289
+
) : (
290
+
<Button
291
+
onClick={handleImport}
292
+
className="w-full max-w-xs"
293
+
theme="purple"
294
+
padding="md:px-12 p-2.5"
295
+
disabled={status === "processing"}
296
+
>
297
+
<Icon icon={Icons.CLOUD_ARROW_UP} className="pr-2" />
298
+
{status === "processing"
299
+
? t("migration.upload.button.processing")
300
+
: t("migration.upload.button.import")}
301
+
</Button>
243
302
)}
244
303
</div>
245
304
</SettingsCard>
305
+
)}
246
306
247
-
{uploadedData && (
248
-
<SettingsCard className="mt-6">
249
-
<Heading2 className="!my-0 !text-type-secondary">
250
-
{t("migration.upload.dataPreview")}
251
-
</Heading2>
252
-
<Divider marginClass="my-6 px-8 box-content -mx-8" />
307
+
<div className="flex justify-between mt-6">
308
+
<Button theme="secondary" onClick={() => navigate("/migration")}>
309
+
{t("migration.back")}
310
+
</Button>
253
311
254
-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
255
-
<div className="p-4 bg-background rounded-lg">
256
-
<div className="flex items-center gap-2">
257
-
<Icon icon={Icons.BOOKMARK} className="text-xl" />
258
-
<span className="font-medium">
259
-
{t("migration.upload.items.bookmarks")}
260
-
</span>
261
-
</div>
262
-
<div className="text-xl font-bold mt-2">
263
-
{uploadedData.bookmarks
264
-
? Object.keys(uploadedData.bookmarks).length
265
-
: 0}
266
-
</div>
267
-
</div>
268
-
269
-
<div className="p-4 bg-background rounded-lg">
270
-
<div className="flex items-center gap-2">
271
-
<Icon icon={Icons.CLOCK} className="text-xl" />
272
-
<span className="font-medium">
273
-
{t("migration.upload.items.progress")}
274
-
</span>
275
-
</div>
276
-
<div className="text-xl font-bold mt-2">
277
-
{uploadedData.progress
278
-
? Object.keys(uploadedData.progress).length
279
-
: 0}
280
-
</div>
281
-
</div>
282
-
</div>
283
-
284
-
<div className="flex py-6 flex-col space-y-2 items-center justify-center">
285
-
{status === "success" ? (
286
-
<div className="flex items-center gap-2 text-green-400">
287
-
<Icon icon={Icons.CHECKMARK} className="pr-2" />
288
-
{t("migration.upload.status.success")}
289
-
</div>
290
-
) : (
291
-
<Button
292
-
onClick={handleImport}
293
-
className="w-full max-w-xs"
294
-
theme="purple"
295
-
padding="md:px-12 p-2.5"
296
-
disabled={status === "processing"}
297
-
>
298
-
<Icon icon={Icons.CLOUD_ARROW_UP} className="pr-2" />
299
-
{status === "processing"
300
-
? t("migration.upload.button.processing")
301
-
: t("migration.upload.button.import")}
302
-
</Button>
303
-
)}
304
-
</div>
305
-
</SettingsCard>
312
+
{status === "success" && (
313
+
<Button onClick={() => navigate("/")} theme="purple">
314
+
{t("migration.upload.button.home")}
315
+
</Button>
306
316
)}
307
-
308
-
<div className="flex justify-between mt-6">
309
-
<Button theme="secondary" onClick={() => navigate("/migration")}>
310
-
{t("migration.back")}
311
-
</Button>
312
-
313
-
{status === "success" && (
314
-
<Button onClick={() => navigate("/")} theme="purple">
315
-
{t("migration.upload.button.home")}
316
-
</Button>
317
-
)}
318
-
</div>
319
317
</div>
320
-
) : (
321
-
<div className="flex flex-col items-center text-center mb-8">
322
-
<Paragraph className="max-w-[320px] text-md">
323
-
{t("migration.loginRequired")}
324
-
</Paragraph>
325
-
<Button
326
-
theme="purple"
327
-
className="mt-4"
328
-
onClick={() => navigate("/")}
329
-
>
330
-
{t("migration.download.button.home")}
331
-
</Button>
332
-
</div>
333
-
)}
318
+
</div>
334
319
</CenterContainer>
335
320
</MinimalPageLayout>
336
321
);