Page MenuHomeMTRNord's Forge
Files F46

selectionFormComponent.tsx
No OneTemporary
Actions

Authored By
Unknown
Size
2 KB
Referenced Files
None
Subscribers
None

selectionFormComponent.tsx
View Options

"use client";
import { FormState, importBoard } from "./importActions";
import { startTransition, useActionState } from "react";
type SelectionFormProps = {
boards: {
id: string;
name: string;
}[];
};
export default function SelectionFormComponent({ boards }: SelectionFormProps) {
// Filter duplicate boards
const uniqueBoards = boards.filter((board, index, self) => self.findIndex((t) => t.id === board.id) === index);
const [state, action, isPending] = useActionState(async (state: FormState, payload: FormData) => {
if (payload === null) {
return {
neoboards: [],
message: '',
url: undefined,
} as FormState;
}
return await importBoard(state, payload);
}, {
neoboards: [],
message: '',
} as FormState);
if (isPending) {
return <div>Loading...</div>;
}
if (state.neoboards.length > 0) {
return (
<div>
<h3>Converting Boards</h3>
{state.message && <p>{state.message}</p>}
<p>Download the Neoboards below</p>
{state.neoboards.map((neoboard) => {
const blob = new Blob([JSON.stringify(neoboard.neoboard)], { type: 'application/json' });
return (
<a key={neoboard.name} href={URL.createObjectURL(blob)} download={`${neoboard.name}.nwb`} className="button button-primary">
Download Neoboard &ldquo;{neoboard.name}&rdquo;
</a>
);
})}
{/* Start over button which resets state */}
<button onClick={() => {
startTransition(() => {
// @ts-expect-error - We are not passing a payload
action(null)
});
}} className="button button-danger" type="button">
Start Over
</button>
</div>
);
}
return (
<div>
<h3>Available Boards</h3>
<form action={action}>
<p>This is a list of all the boards you have access to. Please select a board to import</p>
{uniqueBoards?.map((board) => (
<label className="checkbox" key={board.id}>
<input tabIndex={0} type="checkbox" name="board" value={board.id} />
<span>{board.name}</span>
</label>
))}
{/* Allow entering an url for manual selection */}
<div className="form-group-small">
<label htmlFor="url">Or enter a board url</label>
<input type="text" name="url" id="url" className="input" />
</div>
<button type="submit" className="button button-primary">
Import
</button>
</form>
</div>
);
}

File Metadata

Mime Type
application/javascript
Expires
Fri, Mar 20, 5:00 PM (1 d, 20 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26
Default Alt Text
selectionFormComponent.tsx (2 KB)

Event Timeline