a tool for shared writing and social publishing
add add leaflet to home button
+134
-11
+46
actions/addLeafletToHome.ts
+46
actions/addLeafletToHome.ts
···
1
+
"use server";
2
+
3
+
import { drizzle } from "drizzle-orm/postgres-js";
4
+
import {
5
+
entities,
6
+
identities,
7
+
permission_tokens,
8
+
permission_token_rights,
9
+
entity_sets,
10
+
facts,
11
+
permission_token_on_homepage,
12
+
email_auth_tokens,
13
+
} from "drizzle/schema";
14
+
import { redirect } from "next/navigation";
15
+
import postgres from "postgres";
16
+
import { v7 } from "uuid";
17
+
import { sql, eq, and } from "drizzle-orm";
18
+
import { cookies } from "next/headers";
19
+
20
+
export async function addLeafletToHome(leaflet: string) {
21
+
const client = postgres(process.env.DB_URL as string, { idle_timeout: 5 });
22
+
let auth_token = cookies().get("auth_token")?.value;
23
+
const db = drizzle(client);
24
+
await db.transaction(async (tx) => {
25
+
if (auth_token) {
26
+
await tx.execute(sql`
27
+
WITH auth_token AS (
28
+
SELECT identities.id as identity_id
29
+
FROM email_auth_tokens
30
+
LEFT JOIN identities ON email_auth_tokens.identity = identities.id
31
+
WHERE email_auth_tokens.id = ${auth_token}
32
+
AND email_auth_tokens.confirmed = true
33
+
AND identities.id IS NOT NULL
34
+
)
35
+
INSERT INTO permission_token_on_homepage (token, identity)
36
+
SELECT ${leaflet}, identity_id
37
+
FROM auth_token
38
+
`);
39
+
}
40
+
41
+
return;
42
+
});
43
+
44
+
client.end();
45
+
return;
46
+
}
+64
-10
components/HomeButton.tsx
+64
-10
components/HomeButton.tsx
···
1
1
import Link from "next/link";
2
2
import { useEntitySetContext } from "./EntitySetProvider";
3
-
import { HomeSmall } from "./Icons";
3
+
import { AddToHomeSmall, HomeSmall } from "./Icons";
4
4
import { HoverButton } from "./Buttons";
5
5
import { useParams, useSearchParams } from "next/navigation";
6
+
import { useIdentityData } from "./IdentityProvider";
7
+
import { useReplicache } from "src/replicache";
8
+
import { addLeafletToHome } from "actions/addLeafletToHome";
9
+
import { useSmoker } from "./Toast";
6
10
7
11
export function HomeButton() {
8
12
let { permissions } = useEntitySetContext();
···
10
14
11
15
if (permissions.write)
12
16
return (
13
-
<Link href="/home" prefetch>
14
-
<HoverButton
15
-
noLabelOnMobile
16
-
icon={<HomeSmall />}
17
-
label="Go Home"
18
-
background="bg-accent-1"
19
-
text="text-accent-2"
20
-
/>
21
-
</Link>
17
+
<>
18
+
<Link href="/home" prefetch>
19
+
<HoverButton
20
+
noLabelOnMobile
21
+
icon={<HomeSmall />}
22
+
label="Go Home"
23
+
background="bg-accent-1"
24
+
text="text-accent-2"
25
+
/>
26
+
</Link>
27
+
<AddToHomeButton />
28
+
</>
22
29
);
23
30
return null;
24
31
}
32
+
33
+
const AddToHomeButton = (props: {}) => {
34
+
let { permission_token } = useReplicache();
35
+
let { identity, mutate } = useIdentityData();
36
+
let smoker = useSmoker();
37
+
if (
38
+
identity?.permission_token_on_homepage.find(
39
+
(pth) => pth.permission_tokens.id === permission_token.id,
40
+
)
41
+
)
42
+
return null;
43
+
return (
44
+
<button
45
+
onClick={async (e) => {
46
+
await addLeafletToHome(permission_token.id);
47
+
mutate((identity) => {
48
+
if (!identity) return;
49
+
return {
50
+
...identity,
51
+
permission_token_on_homepage: [
52
+
...identity.permission_token_on_homepage,
53
+
{
54
+
created_at: new Date().toISOString(),
55
+
permission_tokens: permission_token,
56
+
},
57
+
],
58
+
};
59
+
});
60
+
smoker({
61
+
position: {
62
+
x: e.clientX + 64,
63
+
y: e.clientY,
64
+
},
65
+
text: "Leaflet added to your home!",
66
+
});
67
+
}}
68
+
>
69
+
<HoverButton
70
+
noLabelOnMobile
71
+
icon={<AddToHomeSmall />}
72
+
label="Add to Home"
73
+
background="bg-accent-1"
74
+
text="text-accent-2"
75
+
/>
76
+
</button>
77
+
);
78
+
};
+18
components/Icons.tsx
+18
components/Icons.tsx
···
415
415
);
416
416
};
417
417
418
+
export const AddToHomeSmall = (props: Props) => {
419
+
return (
420
+
<svg
421
+
width="24"
422
+
height="24"
423
+
viewBox="0 0 24 24"
424
+
fill="none"
425
+
xmlns="http://www.w3.org/2000/svg"
426
+
>
427
+
<path
428
+
fillRule="evenodd"
429
+
clipRule="evenodd"
430
+
d="M20.2108 1.06435C18.2026 1.27704 16.4279 2.08514 15.062 3.57676C14.2367 4.47793 13.5856 5.60101 13.1154 6.9388L11.9454 4.47784C11.7083 3.97905 11.1117 3.76693 10.6129 4.00406C10.1141 4.24119 9.90202 4.83777 10.1391 5.33655L12.5221 10.349C12.6387 10.5942 12.8499 10.7814 13.1074 10.8677C13.3648 10.954 13.6463 10.9319 13.8871 10.8065L18.6299 8.33675C19.1197 8.08167 19.31 7.47778 19.055 6.98793C18.7999 6.49809 18.196 6.30778 17.7061 6.56286L14.8565 8.04681C15.263 6.71029 15.842 5.68633 16.5369 4.92747C17.5357 3.83683 18.8399 3.22073 20.4214 3.05322C20.9706 2.99506 21.3687 2.50267 21.3105 1.95346C21.2524 1.40425 20.76 1.00618 20.2108 1.06435ZM7.3401 7.52353C7.55331 7.54947 7.74516 7.66557 7.86705 7.84241L9.08429 9.60844L9.34152 9.434C9.68433 9.20152 10.1507 9.29096 10.3832 9.63378C10.6157 9.9766 10.5262 10.443 10.1834 10.6755L9.93558 10.8435L13.3263 15.7629L19.8556 12.8502L18.4067 10.8971C18.16 10.5644 18.2296 10.0947 18.5622 9.84791C18.8949 9.60112 19.3647 9.67074 19.6114 10.0034L21.6174 12.7074C21.7529 12.8901 21.7982 13.1244 21.7405 13.3445C21.6828 13.5645 21.5283 13.7465 21.3206 13.8392L20.7814 14.0797L20.7814 14.0844L20.7814 18.4378C20.7814 18.7168 20.6265 18.9728 20.3793 19.1022L12.356 23.3031C12.1639 23.4037 11.9377 23.4162 11.7356 23.3375L8.4716 22.065C8.18363 21.9527 7.99402 21.6753 7.99402 21.3662L7.99402 19.5861L5.80331 20.8539C5.7914 20.8631 5.77916 20.8721 5.76662 20.8806C5.72248 20.9108 5.67573 20.9359 5.62724 20.9558L5.60922 20.9662L5.60764 20.9635C5.43659 21.0279 5.24562 21.0284 5.07141 20.9607L2.49577 19.9597C2.20742 19.8476 2.01747 19.57 2.01747 19.2606L2.01747 13.9072L1.99747 13.9249C1.68748 14.1996 1.21347 14.171 0.938734 13.861C0.664001 13.5511 0.692583 13.077 1.00257 12.8023L6.75207 7.70675C6.91281 7.5643 7.1269 7.49759 7.3401 7.52353ZM7.99402 18.1012L7.99402 18.1418L6.0931 19.2419L6.0931 17.0428C6.0931 16.6763 6.2215 16.3562 6.38727 16.1652C6.5406 15.9886 6.68564 15.9526 6.8279 15.9852C7.07537 16.0419 7.37055 16.2866 7.62505 16.764C7.87163 17.2266 7.99402 17.7544 7.99402 18.1012ZM13.3681 17.3868L19.2814 14.7488L19.2814 17.9839L12.6145 21.4746L12.6145 18.9253C12.6145 18.5801 12.3347 18.3003 11.9895 18.3003C11.6443 18.3003 11.3645 18.5801 11.3645 18.9253L11.3645 21.5828L9.49402 20.8536L9.49402 18.1012C9.49402 17.4825 9.29834 16.7143 8.94873 16.0584C8.60704 15.4174 8.02793 14.7213 7.16293 14.5231C6.37611 14.3428 5.695 14.6744 5.25444 15.182C4.82632 15.6753 4.5931 16.3561 4.5931 17.0428L4.5931 19.1655L3.51747 18.7474L3.51747 12.6176C3.51747 12.6046 3.51714 12.5916 3.51648 12.5787L7.11285 9.39132L8.272 11.0731L12.445 17.1274C12.6501 17.425 13.0381 17.534 13.3681 17.3868Z"
431
+
fill="currentColor"
432
+
/>
433
+
</svg>
434
+
);
435
+
};
418
436
export const HomeSmall = (props: Props) => {
419
437
return (
420
438
<svg