Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

familiarized myself with the repo #560

Merged
merged 6 commits into from
Jun 30, 2023
Merged

familiarized myself with the repo #560

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c6dfcff
familiarized myself with the repo
Brocktho Jun 19, 2023
3282afd
fix format issues, and change data back to function instead for test …
Brocktho Jun 20, 2023
2392012
changed react version
Brocktho Jun 20, 2023
f29b6f2
all 113's changed
Brocktho Jun 20, 2023
46bd90d
ahhh lint
Brocktho Jun 20, 2023
a96e99d
deleted markup.ts please pull :( I need unstable flag for my app
bd8993 Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion deno.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"./types.d.ts"
],
"jsx": "react-jsx",
"jsxImportSource": "https://esm.sh/v113/[email protected]"
"jsxImportSource": "https://esm.sh/v126/[email protected]"
},
"importMap": "./import_map.json",
"fmt": {
Expand Down
2 changes: 1 addition & 1 deletion dev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import dev from "./server/dev.ts";

if (import.meta.main) {
dev(Deno.args[0]);
dev(Deno.args);
}
2 changes: 2 additions & 0 deletions examples/react-app/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/** @format */

import { bootstrap } from "aleph/react";

bootstrap();
58 changes: 42 additions & 16 deletions examples/react-app/routes/todos.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/** @format */

import type { FormEvent } from "react";
import { Head, useData } from "aleph/react";

Expand All @@ -14,9 +16,9 @@ const store = {
},
};

export function data() {
export const data = () => {
return Response.json(store);
}
};

export async function mutation(req: Request): Promise<Response> {
const { id, message, completed } = await req.json();
Expand All @@ -43,24 +45,34 @@ export async function mutation(req: Request): Promise<Response> {
}

export default function Todos() {
const { data: { todos }, isMutating, mutation } = useData<{ todos: Todo[] }>();
const {
data: { todos },
isMutating,
mutation,
} = useData<{ todos: Todo[] }>();

const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const form = e.currentTarget;
const fd = new FormData(form);
const message = fd.get("message")?.toString().trim();
if (message) {
await mutation.put({ message }, {
// optimistic update data without waiting for the server response
optimisticUpdate: (data) => {
return {
todos: [...data.todos, { id: 0, message, completed: false }],
};
await mutation.put(
{ message },
{
// optimistic update data without waiting for the server response
optimisticUpdate: (data) => {
return {
todos: [
...data.todos,
{ id: 0, message, completed: false },
],
};
},
// replace the data with the new data that is from the server response
replace: true,
},
// replace the data with the new data that is from the server response
replace: true,
});
);
setTimeout(() => form.querySelector("input")?.focus(), 0);
form.reset();
}
Expand All @@ -70,25 +82,39 @@ export default function Todos() {
<div className="todos-app">
<Head>
<title>Todos</title>
<meta name="description" content="A todos app powered by Aleph.js" />
<meta
name="description"
content="A todos app powered by Aleph.js"
/>
</Head>
<h1>
<span>Todos</span>
{todos.length > 0 && <em>{todos.filter((todo) => todo.completed).length}/{todos.length}</em>}
{todos.length > 0 && (
<em>
{todos.filter((todo) => todo.completed).length}/
{todos.length}
</em>
)}
</h1>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => mutation.patch({ id: todo.id, completed: !todo.completed }, "replace")}
onChange={() =>
mutation.patch(
{ id: todo.id, completed: !todo.completed },
"replace",
)}
/>
<label className={todo.completed ? "completed" : ""}>
{todo.message}
</label>
{todo.id > 0 && (
<button onClick={() => mutation.delete({ id: todo.id }, "replace")}>
<button
onClick={() => mutation.delete({ id: todo.id }, "replace")}
>
<svg
viewBox="0 0 32 32"
fill="none"
Expand Down
2 changes: 2 additions & 0 deletions examples/react-app/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/** @format */

import { serve } from "aleph/server";
import react from "aleph/plugins/react";
import denoDeploy from "aleph/plugins/deploy";
Expand Down
Loading
Loading