├── src
    ├── env.d.ts
    ├── components
    │   ├── ToDos.module.css
    │   ├── ToDos.jsx
    │   ├── ToDo.module.css
    │   ├── ToDo.jsx
    │   └── Header.astro
    ├── utils
    │   └── session.js
    ├── pages
    │   ├── api
    │   │   ├── get-todos.json.js
    │   │   ├── increment-todo.js
    │   │   ├── flag-todo.js
    │   │   └── add-todo.js
    │   ├── browse.astro
    │   ├── sign-in.astro
    │   ├── index.astro
    │   └── add.astro
    └── layouts
    │   └── Layout.astro
├── og.png
├── public
    └── og.png
├── tsconfig.json
├── astro.config.mjs
├── .gitignore
├── README.md
├── package.json
├── netlify.toml
└── LICENSE


/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitep4nth3r/findsomethingtodo/HEAD/og.png


--------------------------------------------------------------------------------
/public/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitep4nth3r/findsomethingtodo/HEAD/public/og.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/base",
3 |   "compilerOptions": {
4 |     "jsx": "react-jsx",
5 |     "jsxImportSource": "react"
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/components/ToDos.module.css:
--------------------------------------------------------------------------------
1 | ul {
2 |   list-style: none;
3 |   padding-inline-start: 0;
4 |   display: flex;
5 |   flex-direction: column;
6 |   margin-top: 2rem;
7 |   margin-bottom: 2rem;
8 | }
9 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | import react from "@astrojs/react";
 3 | import netlify from "@astrojs/netlify/functions";
 4 | 
 5 | // https://astro.build/config
 6 | export default defineConfig({
 7 |   output: "server",
 8 |   integrations: [react()],
 9 |   adapter: netlify(),
10 | });
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # generated types
 5 | .astro/
 6 | 
 7 | # dependencies
 8 | node_modules/
 9 | 
10 | # logs
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 
23 | # Local Netlify folder
24 | .netlify
25 | 
26 | .vscode
27 | 


--------------------------------------------------------------------------------
/src/utils/session.js:
--------------------------------------------------------------------------------
 1 | import Clerk from "@clerk/clerk-js";
 2 | 
 3 | // Change this if you deploy your own!
 4 | const CLERK_FRONTEND_API = "pk_test_dW5iaWFzZWQtY2hpY2tlbi03NS5jbGVyay5hY2NvdW50cy5kZXYk";
 5 | 
 6 | export async function getSession() {
 7 |   const clerk = new Clerk(CLERK_FRONTEND_API);
 8 |   await clerk.load({});
 9 | 
10 |   return clerk.session;
11 | }
12 | 
13 | export function initClerk() {
14 |   return new Clerk(CLERK_FRONTEND_API);
15 | }
16 | 


--------------------------------------------------------------------------------
/src/pages/api/get-todos.json.js:
--------------------------------------------------------------------------------
 1 | import { MongoClient } from "mongodb";
 2 | 
 3 | async function initDatabase() {
 4 |   const mongoClient = await MongoClient.connect(import.meta.env.DB_CONN_STRING, {
 5 |     appName: "findsomethingtodo",
 6 |   });
 7 | 
 8 |   return mongoClient;
 9 | }
10 | 
11 | export async function GET({ params, request }) {
12 |   const mongo = await initDatabase();
13 |   const todos = mongo.db("findsomethingtodo").collection("todos");
14 |   const todosNotFlagged = await todos.find({ flagged: false }).sort({ date_created: -1 }).toArray();
15 | 
16 |   return new Response(
17 |     JSON.stringify({
18 |       todos: todosNotFlagged,
19 |     }),
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Bored? Want to procrastinate and look productive? Find Something ToDo.](og.png)
 2 | 
 3 | # Find Something TODO
 4 | 
 5 | Bored? Want to procrastinate and look productive?
 6 | 
 7 | Find Something ToDo!
 8 | 
 9 | - Browse what people are ToDoing.
10 | - Sign in to add ToDos, complete ToDos, feel productive.
11 | - Fun fact, you'll never see your ToDo again. It's gone forever. You can relax, now!
12 | - Click it, if you did it!
13 | 
14 | ## Built With
15 | 
16 | - [Astro](https://astro.build)
17 | - [Clerk](https://clerk.com)
18 | - [MongoDB Atlas](https://www.mongodb.com/atlas)
19 | 
20 | ## 4 Web Devs, 1 App
21 | 
22 | This is part of the [4 Web Devs 1 App series](https://lwj.dev/4d1a).
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "findsomethingtodo",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "@astrojs/netlify": "^3.0.2",
14 |     "@astrojs/react": "^3.0.2",
15 |     "@clerk/clerk-js": "^4.58.1",
16 |     "@types/react": "^18.2.23",
17 |     "@types/react-dom": "^18.2.7",
18 |     "@whitep4nth3r/get-random-entry": "^0.0.2",
19 |     "astro": "^3.1.4",
20 |     "bad-words": "^3.0.4",
21 |     "mongodb": "^6.1.0",
22 |     "react": "^18.2.0",
23 |     "react-dom": "^18.2.0"
24 |   },
25 |   "license": "MIT"
26 | }
27 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | # example netlify.toml
 2 | [build]
 3 |   command = "npm run build"
 4 |   functions = "netlify/functions"
 5 |   publish = "dist"
 6 | 
 7 |   ## Uncomment to use this redirect for Single Page Applications like create-react-app.
 8 |   ## Not needed for static site generators.
 9 |   #[[redirects]]
10 |   #  from = "/*"
11 |   #  to = "/index.html"
12 |   #  status = 200
13 | 
14 |   ## (optional) Settings for Netlify Dev
15 |   ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
16 |   #[dev]
17 |   #  command = "yarn start" # Command to start your dev server
18 |   #  port = 3000 # Port that the dev server will be listening on
19 |   #  publish = "dist" # Folder with the static content for _redirect file
20 | 
21 |   ## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/
22 | 


--------------------------------------------------------------------------------
/src/pages/api/increment-todo.js:
--------------------------------------------------------------------------------
 1 | import { MongoClient, ObjectId } from "mongodb";
 2 | 
 3 | async function initDatabase() {
 4 |   const mongoClient = await MongoClient.connect(import.meta.env.DB_CONN_STRING, {
 5 |     appName: "findsomethingtodo",
 6 |   });
 7 | 
 8 |   return mongoClient;
 9 | }
10 | 
11 | export const POST = async ({ request }) => {
12 |   if (request.headers.get("Content-Type") === "application/json") {
13 |     const body = await request.json();
14 |     const id = body.id;
15 |     const objId = new ObjectId(id);
16 | 
17 |     const mongo = await initDatabase();
18 |     const result = await mongo
19 |       .db("findsomethingtodo")
20 |       .collection("todos")
21 |       .findOneAndUpdate({ _id: objId }, { $inc: { times_done: 1 } }, { returnDocument: "after" });
22 | 
23 |     const { times_done } = result;
24 | 
25 |     return new Response(
26 |       JSON.stringify({
27 |         times_done,
28 |       }),
29 |     );
30 |   }
31 | };
32 | 


--------------------------------------------------------------------------------
/src/pages/api/flag-todo.js:
--------------------------------------------------------------------------------
 1 | import { MongoClient, ObjectId } from "mongodb";
 2 | 
 3 | async function initDatabase() {
 4 |   const mongoClient = await MongoClient.connect(import.meta.env.DB_CONN_STRING, {
 5 |     appName: "findsomethingtodo",
 6 |   });
 7 | 
 8 |   return mongoClient;
 9 | }
10 | 
11 | export const POST = async ({ request }) => {
12 |   if (request.headers.get("Content-Type") === "application/json") {
13 |     const body = await request.json();
14 |     const id = body.id;
15 |     const objId = new ObjectId(id);
16 | 
17 |     const mongo = await initDatabase();
18 |     const result = await mongo
19 |       .db("findsomethingtodo")
20 |       .collection("todos")
21 |       .findOneAndUpdate(
22 |         { _id: objId },
23 |         {
24 |           $set: {
25 |             flagged: true,
26 |           },
27 |         },
28 |         { returnDocument: "after" },
29 |       );
30 | 
31 |     const { flagged } = result;
32 | 
33 |     return new Response(
34 |       JSON.stringify({
35 |         success: flagged === true,
36 |       }),
37 |     );
38 |   }
39 | };
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License Copyright (c) 2023 Salma Alam-Naylor
 2 | 
 3 | Permission is hereby granted,
 4 | free of charge, to any person obtaining a copy of this software and associated
 5 | documentation files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use, copy, modify, merge,
 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to the
 9 | following conditions:
10 | 
11 | The above copyright notice and this permission notice
12 | (including the next paragraph) shall be included in all copies or substantial
13 | portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/src/components/ToDos.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { getSession } from "../utils/session.js";
 3 | import { ToDo } from "./ToDo.jsx";
 4 | import Styles from "./ToDos.module.css";
 5 | 
 6 | export function ToDos({ todos, limit }) {
 7 |   const [filteredTodos, setFilteredTodos] = useState([]);
 8 |   const [userId, setUserId] = useState(null);
 9 |   const [showActions, setShowActions] = useState(false);
10 | 
11 |   useEffect(() => {
12 |     // declare the data fetching function
13 |     const filterTodos = async () => {
14 |       const session = await getSession();
15 |       const userId = session !== null ? session.user.id : "12345";
16 |       setUserId(userId);
17 | 
18 |       if (session !== null) {
19 |         setShowActions(true);
20 |       }
21 | 
22 |       let filtered = todos.filter((todo) => todo.user_id !== userId);
23 | 
24 |       if (limit !== null) {
25 |         filtered = filtered.splice(0, limit);
26 |       }
27 | 
28 |       setFilteredTodos(filtered);
29 |     };
30 | 
31 |     filterTodos();
32 |     return () => {};
33 |   }, []);
34 | 
35 |   return (
36 |     <ul className={Styles.ul}>
37 |       {filteredTodos.map((item) => (
38 |         <li className={Styles.li} key={item._id}>
39 |           <ToDo todo={item} showActions={showActions} client:load />
40 |         </li>
41 |       ))}
42 |     </ul>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/src/pages/api/add-todo.js:
--------------------------------------------------------------------------------
 1 | import { MongoClient } from "mongodb";
 2 | 
 3 | async function initDatabase() {
 4 |   const mongoClient = await MongoClient.connect(import.meta.env.DB_CONN_STRING, {
 5 |     appName: "findsomethingtodo",
 6 |   });
 7 | 
 8 |   return mongoClient;
 9 | }
10 | 
11 | export const POST = async ({ request, redirect }) => {
12 |   const data = await request.formData();
13 |   const user_id = data.get("user_id");
14 |   const todo = data.get("todo");
15 | 
16 |   // add stuff to DB
17 |   const newTodo = {
18 |     description: todo,
19 |     user_id: user_id,
20 |     times_done: 0,
21 |     date_created: new Date(),
22 |     flagged: false,
23 |   };
24 | 
25 |   const mongo = await initDatabase();
26 |   const todos = mongo.db("findsomethingtodo").collection("todos");
27 | 
28 |   const response = await todos.insertOne(newTodo);
29 | 
30 |   if (response.acknowledged === true) {
31 |     return new Response(
32 |       JSON.stringify({
33 |         success: true,
34 |       }),
35 |       {
36 |         status: 201,
37 |         headers: {
38 |           "Content-Type": "application/json",
39 |         },
40 |       },
41 |     );
42 |   }
43 | 
44 |   return new Response(
45 |     JSON.stringify({
46 |       success: false,
47 |     }),
48 |     {
49 |       status: 500,
50 |       headers: {
51 |         "Content-Type": "application/json",
52 |       },
53 |     },
54 |   );
55 | };
56 | 


--------------------------------------------------------------------------------
/src/pages/browse.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | import { GET } from './api/get-todos.json.js'
 4 | import { ToDos } from "../components/ToDos.jsx"
 5 | 
 6 | const response = await GET(Astro)
 7 | const data = await response.json()
 8 | 
 9 | const { url } = Astro;
10 | const success = url.searchParams.get("success");
11 | ---
12 | 
13 | <Layout title="Browse Something ToDo" description="Browse ToDos that other people want you to do.">
14 | 	<script>
15 | 		import { getSession } from "../utils/session.js"
16 | 		
17 | 		const session = await getSession();
18 | 		if (session === null) {
19 | 			window.location.href = "/sign-in?return=browse";
20 | 		}
21 | 
22 | 		if (session !== null) {
23 | 			document.querySelector('[data-signed-in]').style.display = "block";
24 | 		}
25 | 	</script>
26 | 
27 | 	<main>
28 | 		{success && (
29 | 			<p>Congrats! Your ToDo will be done by somebody else.</p>
30 | 		)}
31 | 
32 | 		<div data-signed-in>
33 | 			<h1>Browse Something ToDo</h1>
34 | 			<p>Click it, if you did it!</p>
35 | 			<a href="/add" class="add">Add a ToDo</a>
36 | 			<ToDos todos={data.todos} limit={null} client:load />
37 | 		</div>
38 | 	</main>
39 | </Layout>
40 | 
41 | <style>
42 | 	[data-signed-in] {
43 | 		display: none;
44 | 	}
45 | 
46 | 	p {
47 | 		margin-bottom: 2rem;
48 | 		font-style: italic;
49 | 	}
50 | 
51 | 	.add {
52 | 		background-color: var(--stone);
53 | 		color: var(--red);
54 | 		font-family: var(--font-heading);
55 | 		font-size: 2rem;
56 | 		text-decoration: none;
57 | 		padding: 0.5rem 1rem;
58 | 		border-radius: 2rem;
59 | 		text-align: center;
60 | 		display: block;
61 | 		margin-bottom: 2rem;
62 | 	}
63 | 
64 | 	.add:focus, .add:focus-visible {
65 | 		outline: transparent;
66 |     outline-style: solid;
67 |     box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
68 |     transition: box-shadow 0.2s ease-in-out;
69 | 	}
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/ToDo.module.css:
--------------------------------------------------------------------------------
 1 | .todo {
 2 |   border: 0.25rem solid var(--yellow);
 3 |   border-radius: 1rem;
 4 |   padding: 1rem;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   gap: 1rem;
 8 |   margin-bottom: 2rem;
 9 | }
10 | 
11 | .isFlagging {
12 |   opacity: 0.5;
13 | }
14 | 
15 | .topRow {
16 |   display: grid;
17 |   grid-template-columns: 3fr 1fr;
18 |   grid-template-areas:
19 |     "desc done"
20 |     "completed completed";
21 |   gap: 1rem;
22 | }
23 | 
24 | .description {
25 |   grid-area: desc;
26 |   font-size: 1.6rem;
27 |   color: white;
28 | }
29 | 
30 | .completed {
31 |   grid-area: completed;
32 |   font-style: italic;
33 |   font-size: 1rem;
34 |   line-height: 2;
35 | }
36 | 
37 | .done {
38 |   flex-grow: 0;
39 |   grid-area: done;
40 |   appearance: none;
41 |   border-width: 0;
42 |   background-color: var(--stone);
43 |   color: var(--red);
44 |   font-family: var(--font-heading);
45 |   font-size: 1rem;
46 |   text-decoration: none;
47 |   padding: 0.5rem 1rem;
48 |   border-radius: 2rem;
49 |   text-align: center;
50 |   height: max-content;
51 |   cursor: pointer;
52 | }
53 | 
54 | .done:focus,
55 | .done:focus-visible {
56 |   outline: transparent;
57 |   outline-style: solid;
58 |   box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
59 |   transition: box-shadow 0.2s ease-in-out;
60 | }
61 | 
62 | .done[disabled] {
63 |   opacity: 0.8;
64 |   cursor: not-allowed;
65 | }
66 | 
67 | .report {
68 |   appearance: none;
69 |   border-width: 0;
70 |   background-color: transparent;
71 |   display: inline;
72 |   width: max-content;
73 |   color: var(--yellow);
74 |   font-size: 1;
75 |   font-family: var(--font-body);
76 |   text-transform: uppercase;
77 |   border-radius: 0.75rem;
78 | }
79 | 
80 | .report:focus,
81 | .report:focus-visible {
82 |   outline: transparent;
83 |   outline-style: solid;
84 |   box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
85 |   transition: box-shadow 0.2s ease-in-out;
86 | }
87 | 


--------------------------------------------------------------------------------
/src/pages/sign-in.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | ---
 4 | 
 5 | <Layout title="Sign in to Find Something ToDo" description="Sign in to add ToDos, complete ToDos, and feel productive.">
 6 | 	<script>
 7 | 		import { initClerk } from "../utils/session.js"
 8 | 		
 9 | 		const signInComponent = document.getElementById('sign-in');
10 | 		const returnUrl = `${window.location.origin}/${window.location.search.replace("?return=", "")}`;
11 | 		const clerk = initClerk();
12 | 		await clerk.load({});
13 | 		clerk.mountSignIn(signInComponent, {
14 | 			afterSignInUrl: returnUrl,
15 | 			appearance: {
16 | 				baseTheme: "light"
17 | 			}
18 | 		});
19 | 	</script>
20 | 
21 | 	<main>
22 | 		<h1>Sign in</h1>
23 | 		<p>Add ToDos, complete ToDos, <span>feel productive</span>.</p>
24 | 		<div
25 | 			id="sign-in"
26 | 		></div>
27 | 	</main>
28 | </Layout>
29 | 
30 | <style is:global>
31 | 	.cl-card {
32 | 		width: 100%;
33 | 		background-color: var(--stone);
34 | 		margin-bottom: 4rem;
35 | 	}
36 | 
37 | 	.cl-headerTitle {
38 | 		font-family: var(--font-heading);
39 | 		color: var(--green-dark);
40 | 	}
41 | 
42 | 	.cl-headerSubtitle {
43 | 		color: var(--green-dark);
44 | 	}
45 | 
46 | 	.cl-footerActionLink, .cl-footerActionText {
47 | 		color: var(--green-dark);
48 | 	}
49 | 
50 | 	.cl-footerActionLink {
51 | 		text-decoration: underline;
52 | 		text-decoration-style: wavy;
53 | 		text-underline-offset: 0.25rem;
54 | 	}
55 | 
56 | 	.cl-socialButtonsIconButton {
57 | 		border-color: var(--green-light);
58 | 		border-width: 0.25rem;
59 | 	}
60 | 
61 | 	.cl-socialButtonsIconButton:focus, .cl-socialButtonsIconButton:focus-visible {
62 | 		box-shadow: var(--green-mid) 0px 0px 0px 3px;
63 | 	}
64 | 
65 | 	.cl-internal-b3fm6y {
66 | 		background-color: var(--yellow);
67 | 		color: var(--green-dark);
68 | 	}
69 | </style>
70 | 
71 | <style>
72 | 	p {
73 | 		margin-bottom: 4rem;
74 | 	}
75 | 
76 | 	p span {
77 | 		text-decoration: underline;
78 | 		text-underline-offset: 0.5rem;
79 | 		text-decoration-style: wavy;
80 | 		text-decoration-color: var(--yellow);
81 | 	}
82 | 
83 | 	#sign-in {
84 | 		margin: auto;
85 | 	}
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | import { GET } from './api/get-todos.json.js'
 4 | import { ToDos } from "../components/ToDos.jsx"
 5 | 
 6 | const response = await GET(Astro)
 7 | const data = await response.json()
 8 | ---
 9 | 
10 | <Layout title="Find Something ToDo" description="Bored? Want to procrastinate and look productive? Find something ToDo. And tell others what to do.">
11 | 	<main>
12 | 		<p class="bored">Bored?</p>
13 | 		<p class="want_to">Want to procrastinate <span><em>and</em> look productive?</span></p>
14 | 		<h1>Find Something ToDo</h1>
15 | 
16 | 		<h2>What people are currently ToDoing</h2>
17 | 
18 | 		<ToDos todos={data.todos} limit="9" client:load />
19 | 
20 | 		<div class="ctas">
21 | 			<h3>Want to join the party?</h3>
22 | 			<a href="/add">Add your ToDo</a>
23 | 			<a href="/browse">Browse all ToDos</a>
24 | 		</div>
25 | 	</main>
26 | </Layout>
27 | 
28 | <style>
29 | 	a {
30 | 		display: block;
31 | 	}
32 | 
33 | 	.bored {
34 | 		font-size: 2rem;
35 | 		text-decoration: underline;
36 | 		text-underline-offset: 0.5rem;
37 | 		text-decoration-style: wavy;
38 | 		text-decoration-color: var(--green-light);
39 | 		margin-bottom: 2rem;
40 | 	}
41 | 
42 | 	.want_to {
43 | 		margin-bottom: 2rem;
44 | 	}
45 | 
46 | 	.want_to span {
47 | 		text-decoration: underline;
48 | 		text-underline-offset: 0.5rem;
49 | 		text-decoration-style: wavy;
50 | 		text-decoration-color: var(--yellow);
51 | 	}
52 | 
53 | 	.ctas {
54 | 		margin-bottom: 4rem;
55 | 	}
56 | 
57 | 	h3 {
58 | 		text-align: center;
59 | 		font-size: 2rem;
60 | 		margin-bottom: 2rem;
61 | 	}
62 | 
63 | 	a {
64 | 		text-align: center;
65 | 		font-size: 1.6rem;
66 | 		color: var(--stone);
67 | 		text-decoration: underline;
68 | 		text-underline-offset: 0.5rem;
69 | 		text-decoration-style: wavy;
70 | 		text-decoration-color: var(--green-mid);
71 | 		display: block;
72 | 		width: max-content;
73 | 		margin: 0 auto 1.5rem auto;
74 | 		border-radius: 1rem;
75 | 	}
76 | 
77 | 	a:focus,
78 |   a:focus-visible {
79 |   outline: transparent;
80 |   outline-style: solid;
81 |   box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
82 |   transition: box-shadow 0.2s ease-in-out;
83 | }
84 | </style>


--------------------------------------------------------------------------------
/src/components/ToDo.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import Styles from "./ToDo.module.css";
 3 | import { getRandomEntry } from "@whitep4nth3r/get-random-entry";
 4 | 
 5 | const randomYays = [
 6 |   "Great job!",
 7 |   "Yes!",
 8 |   "Amazing!",
 9 |   "Well done!",
10 |   "Awesome!",
11 |   "Nice!",
12 |   "Keep it up!",
13 |   "Fantastic!",
14 |   "Good job!",
15 |   "You did it!",
16 |   "You rock!",
17 |   "Great!",
18 | ];
19 | 
20 | export const ToDo = ({ todo, showActions }) => {
21 |   const { _id, description, times_done, date_created, user_id, flagged } = todo;
22 | 
23 |   const [timesDoneNo, setTimesDoneNo] = useState(times_done);
24 |   const [isLoading, setIsLoading] = useState(false);
25 |   const [buttonText, setButtonText] = useState("I did this");
26 |   const [buttonDisabled, setButtonDisabled] = useState(false);
27 |   const [isFlagging, setIsFlagging] = useState(false);
28 |   const [isFlagged, setIsFlagged] = useState(false);
29 | 
30 |   async function increment() {
31 |     setIsLoading(true);
32 | 
33 |     const response = await fetch("/api/increment-todo", {
34 |       method: "POST",
35 |       headers: {
36 |         "Content-Type": "application/json",
37 |       },
38 |       body: JSON.stringify({ id: _id }),
39 |     });
40 | 
41 |     const data = await response.json();
42 |     setTimesDoneNo(data.times_done);
43 |     setIsLoading(false);
44 |     setButtonText(getRandomEntry(randomYays));
45 |     setButtonDisabled(true);
46 |   }
47 | 
48 |   async function report() {
49 |     setIsFlagging(true);
50 | 
51 |     const response = await fetch("/api/flag-todo", {
52 |       method: "POST",
53 |       headers: {
54 |         "Content-Type": "application/json",
55 |       },
56 |       body: JSON.stringify({ id: _id }),
57 |     });
58 | 
59 |     const data = await response.json();
60 | 
61 |     if (data.success === true) {
62 |       setIsFlagged(true);
63 |     }
64 |   }
65 | 
66 |   return (
67 |     !isFlagged && (
68 |       <div className={`${Styles.todo} ${isFlagging ? Styles.isFlagging : ""}`}>
69 |         <div className={Styles.topRow}>
70 |           <p className={Styles.description}>{description}</p>
71 |           <p className={Styles.completed}>
72 |             Completed {timesDoneNo} {timesDoneNo === 1 ? "time" : "times"}
73 |           </p>
74 |           {showActions && (
75 |             <button disabled={buttonDisabled} className={Styles.done} onClick={(e) => increment()}>
76 |               {isLoading ? "Doing..." : ""}
77 |               {!isLoading ? buttonText : ""}
78 |             </button>
79 |           )}
80 |         </div>
81 |         {/* <button onClick={(e) => report()} className={Styles.report}>
82 |           Report
83 |         </button> */}
84 |       </div>
85 |     )
86 |   );
87 | };
88 | 


--------------------------------------------------------------------------------
/src/components/Header.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | const { currentPath } = Astro.props;
  3 | ---
  4 | 
  5 | <script>
  6 |   import { initClerk, getSession } from "../utils/session.js"
  7 |   
  8 |   const userButtonEl = document.getElementById('user-button');
  9 |   const clerk = initClerk();
 10 |   await clerk.load({});
 11 |   const session = await getSession();
 12 | 
 13 |   const data = document.getElementById("data");
 14 |   const path = data.getAttribute("data-current-path");
 15 |   const returnPath = path === "/" ? "" : path;
 16 | 
 17 |   if (session === null) {
 18 |     const href = document.createElement("a");
 19 |     href.setAttribute("href", `/sign-in?return=${returnPath}`);
 20 |     href.setAttribute
 21 |     href.textContent = "Sign in";
 22 |     href.setAttribute("class", path === "/sign-in" ? "active" : "");
 23 |     userButtonEl.appendChild(href);
 24 |   } else {
 25 |     clerk.mountUserButton(userButtonEl as HTMLDivElement, {
 26 |       signInUrl: `${window.location.origin}`,
 27 |       afterSignOutUrl: `${window.location.origin}`}
 28 |     );
 29 |   }
 30 |   
 31 | 
 32 | </script>
 33 | 
 34 | <header>
 35 |   <span id="data" data-current-path={currentPath}></span>
 36 |   <span class="logo" role="presentation" title="Plant in pot emoji">🪴</span>
 37 |   <nav>
 38 |     <a href="/" class:list={[ { active: currentPath === "/" } ]}>Home</a>
 39 |     <a href="/browse" class:list={[ { active: currentPath === "/browse" } ]}>Browse</a>
 40 |     <a href="/add" class:list={[ { active: currentPath === "/add" } ]}>Add</a>
 41 |     <div class="header__userButton" id="user-button"></div>
 42 |   </nav>
 43 | </header>
 44 | 
 45 | <style is:global>
 46 |   .cl-userButtonPopoverCard {
 47 |     background-color: var(--stone);
 48 |     color: var(--green-dark);
 49 |   }
 50 | 
 51 |   .cl-userPreviewMainIdentifier {
 52 |     font-family: var(--font-heading);
 53 |   }
 54 |   
 55 |   .cl-userButtonPopoverActionButton span, 
 56 |   .cl-userPreviewSecondaryIdentifier, 
 57 |   .cl-userButtonPopoverActionButtonIconBox svg, 
 58 |   .cl-userButtonPopoverFooter p,
 59 |   .cl-userButtonPopoverFooter a {
 60 |     color: var(--green-dark);
 61 |   }
 62 | 
 63 | 
 64 |   nav a {
 65 |     color: var(--stone);
 66 |     text-decoration: none;
 67 |     font-size: clamp(1rem, 1.2vw, 1.2rem);
 68 |     border-radius: 0.5rem;
 69 |   }
 70 | 
 71 |   nav a.active {
 72 |     text-decoration: underline;
 73 |     text-decoration-style: wavy;
 74 |     text-decoration-color: var(--yellow);
 75 |     text-decoration-thickness: 0.2rem;
 76 |     text-underline-offset: 0.4rem;
 77 |   }
 78 | 
 79 |   nav a:focus, 
 80 |   nav a:focus-visible, 
 81 |   .cl-userButtonTrigger:focus-visible, 
 82 |   .cl-userButtonTrigger:focus {
 83 |     outline: transparent;
 84 |     outline-style: solid;
 85 |     box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
 86 |     transition: box-shadow 0.2s ease-in-out;
 87 |   }
 88 | </style>
 89 | 
 90 | <style>
 91 |   #user-button {
 92 |     display: block;
 93 |     margin: auto;
 94 |   }
 95 | 
 96 |   .logo {
 97 |     font-size: 6rem;
 98 |     display: block;
 99 |     text-align: center;
100 |   }
101 | 
102 |   nav {
103 | 		display: grid;
104 |     grid-template-columns: 1fr 1fr 1fr 1fr;
105 | 		gap: 1rem;
106 | 		justify-content: space-between;
107 |     align-items: center;
108 |     height: 4rem;
109 |     margin: auto auto 4rem auto;
110 |     text-align: center;
111 | 	}
112 | </style>


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import Header from "../components/Header.astro";
  3 | const { title, description } = Astro.props;
  4 | const { pathname } = Astro.url;
  5 | 
  6 | ---
  7 | 
  8 | <!doctype html>
  9 | <html lang="en">
 10 | 	<head>
 11 | 		<meta charset="UTF-8" />
 12 | 		<meta name="viewport" content="width=device-width" />
 13 | 		<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪴</text></svg>">
 14 | 
 15 | 		<link rel="preconnect" href="https://fonts.googleapis.com">
 16 | 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 | 		<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=Young+Serif&display=swap" rel="stylesheet">
 18 | 
 19 | 		<title>{title}</title>
 20 | 		<meta name="description" content={description} />
 21 | 
 22 | 		<!-- twitter card -->
 23 | 		<meta name="twitter:card" content="summary_large_image" />
 24 | 		<meta name="twitter:site" content="@whitep4nth3r" />
 25 | 		<meta name="twitter:creator" content="@whitep4nth3r" />
 26 | 
 27 | 		<!-- OG base data -->
 28 | 		<meta property="og:url" content="https://findsomethingtodo.netlify.app" />
 29 | 		<meta property="og:title" content="Find Something ToDo" />
 30 | 		<meta property="og:description" content="Bored? Want to procrastinate and look productive? Find something ToDo. And tell others what to do." />
 31 | 		<meta property="og:site_name" content="findsomethingtodo.netlify.app" />
 32 | 		<meta property="og:locale" content="en_GB" />
 33 | 
 34 | 		<!-- OG image data -->
 35 | 		<meta property="og:image" content="https://findsomethingtodo.netlify.app/og.png" />
 36 | 		<meta property="og:image:alt" content="Bored? Want to procrastinate and look productive? Find something ToDo." />
 37 | 		<meta property="og:image:width" content="1200" />
 38 | 		<meta property="og:image:height" content="600" />
 39 | 	</head>
 40 | 
 41 | 	<body>
 42 | 		<Header currentPath={pathname} />
 43 | 		<slot />
 44 | 	</body>
 45 | 	<footer><p>Made by <a href="https://whitep4nth3r.com">Salma Alam-Naylor</a> who writes code for your entertainment</p></footer>
 46 | </html>
 47 | 
 48 | <style is:global>
 49 | 	:root {
 50 | 		--green-dark: #2d5134;
 51 | 		--green-mid: #6a994e;
 52 | 		--green-light: #a7c957;
 53 | 		--stone: #f2e8cf;
 54 | 		--red: #822f31;
 55 | 		--yellow: #f4e285;
 56 | 
 57 | 		--font-heading: 'Young Serif', serif;
 58 | 		--font-body: 'IBM Plex Mono', monospace;
 59 | 	}
 60 | 
 61 | 	* {
 62 | 		box-sizing: border-box;
 63 | 		margin: 0;
 64 | 		padding: 0;
 65 | 	}
 66 | 
 67 | 	html {
 68 | 		font-size: 100%;
 69 | 		background-color: var(--green-dark);
 70 | 		background-image: url("leaves.svg");
 71 | 		background-size: cover;
 72 | 		background-repeat: no-repeat;
 73 | 		background-attachment: fixed;
 74 | 		background-position: center;
 75 | 	}
 76 | 
 77 | 	body {
 78 | 		max-width: 700px;
 79 | 		margin: auto;
 80 | 		background-color: rgba(45, 81, 52, 0.95);
 81 | 		color: var(--stone);
 82 | 		font-family: var(--font-body);
 83 | 		min-height: 100vh;
 84 | 		display: flex;
 85 | 		flex-direction: column;
 86 | 		padding: clamp(1rem, 2vw, 2rem);
 87 | 	}
 88 | 
 89 | 	h1 {
 90 | 		font-family: var(--font-heading);
 91 | 	}
 92 | 	
 93 | 	h1 {
 94 | 		font-size: clamp(1.8rem, 2.8vw, 2.8rem);
 95 | 		margin-bottom: 1rem;
 96 | 	}
 97 | 
 98 | 	p {
 99 | 		font-size: 1.2rem;
100 | 	}
101 | 
102 | 	footer {
103 | 		margin-top: auto;
104 | 	}
105 | 
106 | 	footer p {
107 | 		font-size: 0.8rem;
108 | 		line-height: 1.4;
109 | 		text-align: center;
110 | 	}
111 | 
112 | 	footer p a {
113 | 		color: inherit;
114 | 		border-radius: 0.5rem;
115 | 	}
116 | 
117 | 	footer p a:focus,
118 | 	footer p a:focus-visible {
119 |   outline: transparent;
120 |   outline-style: solid;
121 |   box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
122 |   transition: box-shadow 0.2s ease-in-out;
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/pages/add.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import Layout from '../layouts/Layout.astro';
  3 | ---
  4 | <script>
  5 | 	import { getSession } from "../utils/session.js"
  6 | 
  7 | 	const session = await getSession();
  8 | 	const signedInEl: HTMLElement = document.querySelector('[data-signed-in]');
  9 | 	const hiddenInput: HTMLInputElement = document.querySelector('[data-user-id]');
 10 | 
 11 | 	if (session === null) {
 12 | 		window.location.href = "/sign-in?return=add";
 13 | 	}
 14 | 
 15 | 	if (session !== null) {
 16 | 		signedInEl.style.display = "block";
 17 | 		hiddenInput.value = session.user.id;
 18 | 	}
 19 | </script>
 20 | 
 21 | <Layout title="Add Something ToDo" description="Add your ToDos for somebody else to do.">
 22 | 	<main>
 23 | 		<script>
 24 | 			import Filter from "bad-words";
 25 | 			const form = document.querySelector('form');
 26 | 			const warning = document.querySelector('[data-warning]');
 27 | 			const error = document.querySelector('[data-error]');
 28 | 
 29 | 			const input = document.querySelector("input");
 30 | 
 31 | 			input.addEventListener("keyup", (e) => {
 32 | 				if (e.target.value === "") {
 33 | 					warning.style.display = "none";
 34 | 					error.style.display = "none";
 35 | 				}
 36 | 			})
 37 | 
 38 | 			form.addEventListener('submit', async (e) => {
 39 | 				e.preventDefault();
 40 | 
 41 | 				const formData = new FormData(e.target);
 42 | 
 43 | 				const filter = new Filter();
 44 | 				const newTodo = formData.get('todo');
 45 | 				const processedToDo = filter.clean(newTodo);
 46 | 
 47 | 				if (processedToDo !== newTodo) {
 48 | 					warning.style.display = "block";
 49 | 				} else {
 50 | 					const response = await fetch("/api/add-todo", {
 51 | 						method: "POST",
 52 | 						body: formData,
 53 | 					});
 54 | 
 55 | 					const data = await response.json()
 56 | 
 57 | 					if (data.success === true) {
 58 | 						window.location.href = "/browse?success=true";
 59 | 					} else {
 60 | 						error.style.display = "block";
 61 | 					}
 62 | 				}
 63 | 			});
 64 | 		</script>
 65 | 		
 66 | 		<div data-signed-in>
 67 | 			<h1>Add Something ToDo</h1>
 68 | 			<p>Offload those tasks!</p>
 69 | 			<form action="/api/add-todo" method="POST" >
 70 | 				<label for="todo">Your ToDo, make it <em>productive!</em></label>
 71 | 				<input id="todo" name="todo" type="text" value="" placeholder="Be the best version of yourself" required>
 72 | 				<p data-warning>⚠️ Please don't use bad words!</p>
 73 | 				<p data-error>Sorry, something went wrong. Please try again.</p>
 74 | 				<input type="hidden" name="user_id" value="" data-user-id>
 75 | 				<button type="submit">Add ToDo</button>
 76 | 			</form>
 77 | 
 78 | 			<p>Fun fact, <em>you'll</em> never see <em>your</em> ToDo again. It's gone forever. You can relax, now!</p>
 79 | 		</div>
 80 | 	</main>
 81 | </Layout>
 82 | 
 83 | <style>
 84 | 	[data-signed-in] {
 85 | 		display: none;
 86 | 	}
 87 | 
 88 | 	[data-warning], [data-error] {
 89 | 		display: none;
 90 | 		color: #ffffff;
 91 | 		background-color: var(--red);
 92 | 		font-size: 1.2rem;
 93 | 		border-radius: 0.5rem;
 94 | 		padding: 0.5rem;
 95 | 	}
 96 | 
 97 | 	p {
 98 | 		line-height: 1.8;
 99 | 		margin-bottom: 4rem;
100 | 	}
101 | 
102 | 	form {
103 | 		display: flex;
104 | 		flex-direction: column;
105 | 		gap: 1rem;
106 | 		justify-content: center;
107 | 		margin-top: 2rem;
108 | 	}
109 | 
110 | 	input {
111 | 		padding: 0.75rem;
112 | 		font-size: clamp(1rem, 1.4vw, 1.4rem);
113 | 		font-family: var(--font-body);
114 | 		border: 0.25rem solid var(--yellow);
115 | 		border-radius: 1rem;
116 | 		color: var(--green-dark);
117 | 	}
118 | 
119 | 	input:focus {
120 | 		outline: transparent;
121 | 		outline-style: solid;
122 | 		box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
123 | 		transition: box-shadow 0.2s ease-in-out;
124 | 	}
125 | 
126 | 	button {
127 | 		appearance: none;
128 | 		border-width: 0;
129 | 		background-color: var(--stone);
130 | 		color: var(--red);
131 | 		font-family: var(--font-heading);
132 | 		font-size: 2rem;
133 | 		text-decoration: none;
134 | 		padding: 0.5rem 1rem;
135 | 		border-radius: 2rem;
136 | 		text-align: center;
137 | 		display: block;
138 | 		margin-bottom: 2rem;
139 | 	}
140 | 
141 | 	button:focus, button:focus-visible {
142 | 		outline: transparent;
143 |     outline-style: solid;
144 |     box-shadow: var(--green-dark) 0 0 0 0.08rem, var(--green-light) 0 0 0 0.32rem;
145 |     transition: box-shadow 0.2s ease-in-out;
146 | 	}
147 | 
148 | 
149 | 	label {
150 | 		display: block;
151 | 	}
152 | 
153 | 	button {
154 | 		display: inline-block;
155 | 	}
156 | </style>
157 | 


--------------------------------------------------------------------------------