e.preventDefault()}
- onDragOver={(e) => {
- e.preventDefault();
- e.stopPropagation();
- if (
- e.dataTransfer?.types.includes(DragTypes.Column) &&
- e.dataTransfer?.types.length === 1
- ) {
- setActive(true);
- }
- }}
- onDragLeave={(e) => setActive(false)}
- onDragExit={(e) => setActive(false)}
- onDrop={(e) => {
- e.preventDefault();
- setActive(false);
- if (
- e.dataTransfer?.types.includes(DragTypes.Column) &&
- e.dataTransfer?.types.length === 1
- ) {
- const columnId = e.dataTransfer?.getData(DragTypes.Column) as
- | ColumnId
- | undefined;
- if (columnId) {
- if (columnId === props.left?.id || columnId === props.right?.id)
- return;
- const newOrder = getIndexBetween(
- props.left?.order,
- props.right?.order
- );
- moveColumnAction(columnId, newOrder, new Date().getTime());
- }
- }
- }}
+ onDragOver={(e) => (
+ e.preventDefault(), e.stopPropagation(), emitDragOver(e)
+ )}
+ onDragLeave={emitDragLeave}
+ onDragExit={emitDragExit}
+ onDrop={(e) => (e.preventDefault(), emitDrop(e))}
/>
);
}
@@ -253,7 +283,7 @@ export function ColumnGap(props: { left?: Column; right?: Column }) {
export function AddColumn(props: { board: BoardId; onAdd: () => void }) {
const [active, setActive] = createSignal(false);
- const addColumn = useAction(createColumn);
+ const { emitCreateColumn } = useBoardActions();
let inputRef: HTMLInputElement | undefined;
let plusRef: HTMLButtonElement | undefined;
@@ -268,12 +298,12 @@ export function AddColumn(props: { board: BoardId; onAdd: () => void }) {
-
diff --git a/src/components/actions.tsx b/src/components/actions.tsx
new file mode 100644
index 0000000..3b52426
--- /dev/null
+++ b/src/components/actions.tsx
@@ -0,0 +1,153 @@
+import { useAction, useSubmission } from "@solidjs/router";
+import { Accessor, createContext, ParentProps, useContext } from "solid-js";
+
+import { createColumn, deleteColumn, moveColumn, renameColumn } from "./Column";
+import { createNote, deleteNote, editNote, moveNote } from "./Note";
+import { BoardData } from "./Board";
+import {
+ createEvent,
+ createSubject,
+ createTopic,
+ Emitter,
+ halt,
+ Handler,
+} from "solid-events";
+
+type CreateColumnProps = Parameters
;
+type MoveColumnProps = Parameters;
+type RenameColumnProps = Parameters;
+type DeleteColumnProps = Parameters;
+type CreateNoteProps = Parameters;
+type MoveNoteProps = Parameters;
+type EditNoteProps = Parameters;
+type DeleteNoteProps = Parameters;
+
+const ctx = createContext<{
+ onCreateNote: Handler;
+ emitCreateNote: Emitter;
+ onMoveNote: Handler;
+ emitMoveNote: Emitter;
+ onEditNote: Handler;
+ emitEditNote: Emitter;
+ onDeleteNote: Handler;
+ emitDeleteNote: Emitter;
+ onCreateColumn: Handler;
+ emitCreateColumn: Emitter;
+ onMoveColumn: Handler;
+ emitMoveColumn: Emitter;
+ onRenameColumn: Handler;
+ emitRenameColumn: Emitter;
+ onDeleteColumn: Handler;
+ emitDeleteColumn: Emitter;
+ boardData: Accessor;
+}>();
+
+export function useBoardActions() {
+ const value = useContext(ctx);
+ if (!value) throw new Error("BoardActionsProvider not found");
+ return value;
+}
+
+export function BoardActionsProvider(props: ParentProps<{ board: BoardData }>) {
+ const [onCreateNote, emitCreateNote] = createEvent();
+ const createNoteAction = useAction(createNote);
+ const createNoteSubmission = useSubmission(createNote);
+ const onCreateNoteComplete = onCreateNote((p) => createNoteAction(...p));
+
+ const [onMoveNote, emitMoveNote] = createEvent();
+ const moveNoteAction = useAction(moveNote);
+ const moveNoteSubmission = useSubmission(moveNote);
+ const onMoveNoteComplete = onMoveNote((p) => moveNoteAction(...p));
+
+ const [onEditNote, emitEditNote] = createEvent();
+ const updateNoteAction = useAction(editNote);
+ const updateNoteSubmission = useSubmission(editNote);
+ const onEditNoteComplete = onEditNote((p) => updateNoteAction(...p));
+
+ const [onDeleteNote, emitDeleteNote] = createEvent();
+ const deleteNoteAction = useAction(deleteNote);
+ const deleteNoteSubmission = useSubmission(deleteNote);
+ const onDeleteNoteComplete = onDeleteNote((p) => deleteNoteAction(...p));
+
+ const [onCreateColumn, emitCreateColumn] = createEvent();
+ const createColumnAction = useAction(createColumn);
+ const createColumnSubmission = useSubmission(createColumn);
+ const onCreateColumnComplete = onCreateColumn((p) =>
+ createColumnAction(...p)
+ );
+
+ const [onMoveColumn, emitMoveColumn] = createEvent();
+ const moveColumnAction = useAction(moveColumn);
+ const moveColumnSubmission = useSubmission(moveColumn);
+ const onMoveColumnComplete = onMoveColumn((p) => moveColumnAction(...p));
+
+ const [onRenameColumn, emitRenameColumn] = createEvent();
+ const renameColumnAction = useAction(renameColumn);
+ const renameColumnSubmission = useSubmission(renameColumn);
+ const onRenameColumnComplete = onRenameColumn((p) =>
+ renameColumnAction(...p)
+ );
+
+ const [onDeleteColumn, emitDeleteColumn] = createEvent();
+ const deleteColumnAction = useAction(deleteColumn);
+ const deleteColumnSubmission = useSubmission(deleteColumn);
+ const onDeleteColumnComplete = onDeleteColumn((p) =>
+ deleteColumnAction(...p)
+ );
+
+ const onActionComplete = createTopic(
+ onCreateNoteComplete,
+ onMoveNoteComplete,
+ onEditNoteComplete,
+ onDeleteNoteComplete,
+ onCreateColumnComplete,
+ onMoveColumnComplete,
+ onRenameColumnComplete,
+ onDeleteColumnComplete
+ );
+
+ const boardData = createSubject(
+ {
+ board: props.board.board,
+ columns: props.board.columns,
+ notes: props.board.notes,
+ },
+ onActionComplete(() => {
+ if (
+ createNoteSubmission.pending ||
+ moveNoteSubmission.pending ||
+ updateNoteSubmission.pending ||
+ deleteNoteSubmission.pending ||
+ createColumnSubmission.pending ||
+ moveColumnSubmission.pending ||
+ renameColumnSubmission.pending ||
+ deleteColumnSubmission.pending
+ )
+ halt();
+
+ return props.board;
+ })
+ );
+
+ const value = {
+ onCreateNote,
+ emitCreateNote,
+ onMoveNote,
+ emitMoveNote,
+ onEditNote,
+ emitEditNote,
+ onDeleteNote,
+ emitDeleteNote,
+ onCreateColumn,
+ emitCreateColumn,
+ onMoveColumn,
+ emitMoveColumn,
+ onRenameColumn,
+ emitRenameColumn,
+ onDeleteColumn,
+ emitDeleteColumn,
+ boardData,
+ };
+
+ return {props.children};
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 0c2c97c..6031213 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -1,14 +1,6 @@
import { PrismaClient } from "@prisma/client";
-import { PrismaLibSQL } from "@prisma/adapter-libsql";
-import { createClient } from "@libsql/client";
-const libsql = createClient({
- url: `${process.env.TURSO_DATABASE_URL}`,
- authToken: `${process.env.TURSO_AUTH_TOKEN}`,
-});
-
-const adapter = new PrismaLibSQL(libsql);
-const db = new PrismaClient({ adapter });
+const db = new PrismaClient();
process.on("beforeExit", () => {
db.$disconnect();
diff --git a/src/routes/board/[id].tsx b/src/routes/board/[id].tsx
index f5e188f..68116cf 100644
--- a/src/routes/board/[id].tsx
+++ b/src/routes/board/[id].tsx
@@ -8,6 +8,7 @@ import {
useSubmission,
} from "@solidjs/router";
import { Show } from "solid-js";
+import { BoardActionsProvider } from "~/components/actions";
import { Board } from "~/components/Board";
import EditableText from "~/components/EditableText";
import { fetchBoard } from "~/lib";
@@ -56,7 +57,9 @@ export default function Page(props: RouteSectionProps) {
-
+
+
+
)}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 8aca058..08c4d13 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -4,8 +4,8 @@ import {
cache,
createAsync,
redirect,
+ useAction,
useSubmission,
- useSubmissions,
type RouteDefinition,
} from "@solidjs/router";
import { BsTrash } from "solid-icons/bs";
@@ -13,6 +13,7 @@ import { For, Show, onMount } from "solid-js";
import { getUser } from "~/lib";
import { getAuthUser } from "~/lib/auth";
import { db } from "~/lib/db";
+import { createEvent, createAsyncSubject } from "solid-events";
const addBoard = action(async (formData: FormData) => {
"use server";
@@ -66,25 +67,17 @@ export const route = {
export default function Home() {
const user = createAsync(() => getUser());
- const serverBoards = createAsync(() => getBoards());
const addBoardSubmission = useSubmission(addBoard);
- const deleteBoardSubmissions = useSubmissions(deleteBoard);
- const boards = () => {
- if (deleteBoardSubmissions.pending) {
- const deletedBoards: number[] = [];
+ const [onDeleteBoard, emitDeleteBoard] = createEvent();
+ onDeleteBoard(useAction(deleteBoard));
- for (const sub of deleteBoardSubmissions) {
- deletedBoards.push(sub.input[0]);
- }
-
- return serverBoards()?.filter(
- (board) => !deletedBoards.includes(board.id)
- );
- }
-
- return serverBoards();
- };
+ const boards = createAsyncSubject(
+ () => getBoards(),
+ onDeleteBoard(
+ (boardId) => (boards) => boards.filter((board) => board.id !== boardId)
+ )
+ );
let inputRef: HTMLInputElement | undefined;
@@ -162,7 +155,7 @@ export default function Home() {