jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jude:d5f1a2e3a1a226743e17bcf5ad42fc46d232e41f
Branches Tags
jude:master
...
compare: jude:master
Branches Tags
jude:master

28 Commits
d5f1a2e3a1 ... master

Author SHA1 Message Date
jude
5fe558ebd1 Add packaging script 2023-12-21 17:07:28 +00:00
jude
8b508b39c0 Importer 2023-12-14 17:14:09 +00:00
jude
4dc821bf73 Show/hide mobile sidebar 2023-12-03 16:39:08 +00:00
jude
4fee936939 Added import modal 2023-12-01 23:50:33 +00:00
jude
4c10682de8 Add sort options 2023-11-27 18:32:53 +00:00
jude
85a9a872c9 Fix enabled/disabled button not updating properly 2023-11-26 16:09:52 +00:00
jude
c8443340f4 Improve parity 
Portal modals to body. Pad timezone buttons. Add initial attachment
support. Default username/avatar
 2023-11-19 15:54:37 +00:00
jude
76c8afd45f Use blur to set value 2023-11-19 11:29:10 +00:00
jude
67ce9077b6 Improve time inputs 
Split into multiple inputs. Intercept pastes to fill out all fields.
 2023-11-19 10:38:25 +00:00
jude
3d70be22e3 More time input stuff 2023-11-12 19:25:37 +00:00
jude
71e7857e9a Custom time picker 2023-11-12 18:10:03 +00:00
jude
d068782596 Populate interval inputs with zero if interval is specified 2023-11-12 10:37:11 +00:00
jude
5ee1fa60db Create components for TTS and attachment settings 2023-11-10 16:01:35 +00:00
jude
4aa5b285ac Update README 2023-11-10 15:33:30 +00:00
jude
a90c0c9232 Fields. Timezone context 2023-11-10 15:31:04 +00:00
jude
5dde422ee5 Load/create/delete templates 2023-11-06 18:11:18 +00:00
jude
8ba7a39ce5 Working to feature parity 2023-11-05 17:01:47 +00:00
jude
30dfaa17af Message flash provider 
Allows errors to be displayed neatly in ephemeral boxes at bottom of screen
 2023-11-05 13:45:04 +00:00
jude
f310bbef54 Extend create reminder 2023-11-05 12:41:59 +00:00
jude
b7d5d7d32c Replace onChange with onInput 2023-11-04 23:05:44 +00:00
jude
362b836dc6 Adding create reminder API 2023-11-04 18:59:39 +00:00
jude
f8582e1fe9 Add delete functionality 2023-11-04 17:45:54 +00:00
jude
31b25e3533 Update reminders 2023-11-03 22:40:57 +00:00
jude
5dc7ceb8aa Add modal for image picker 2023-11-03 19:17:16 +00:00
jude
b83f1f2f31 Working on template loader 2023-11-01 22:10:56 +00:00
jude
e36d2610da Add reminder creator 2023-10-30 21:24:05 +00:00
jude
0f259824fc Prop drilling 2023-10-30 20:31:07 +00:00
jude
3372933044 Color picker 2023-10-30 18:07:07 +00:00
56 changed files with 2723 additions and 829 deletions
Expand all files Collapse all files

3
.gitignore vendored
View File

@ -22,3 +22,6 @@ dist-ssr
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
*.deb
reminder-dashboard/usr/share/reminder-dashboard/*

19
README.md Normal file
View File

@ -0,0 +1,19 @@
# reminder-dashboard
The re-re-rewrite of the dashboard.
## Why
The existing beta variant of the dashboard is written using vanilla JavaScript. This is fine,
but annoying to update. This would've been okay if I was more dedicated to updating the vanilla
JavaScript too, but I want to experiment with "new" things.
This also allows me to expand my frontend skills, which is relevant to part of my job.
## Developing
1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot
2. Initialise the submodules: `git pull --recurse-submodules`
3. Run both `npm run dev` and `cargo run`
4. Symlink assets: assuming cloned into `$HOME`, `ln -s $HOME/reminder-bot/reminder-dashboard/dist/index.html $HOME/reminder-bot/web/static/index.html` and
`ln -s $HOME/reminder-bot/reminder-dashboard/dist/static/assets $HOME/reminder-bot/web/static/assets`

27
index.html
View File

@ -29,33 +29,6 @@
<link rel="stylesheet" href="/static/css/dtsel.css"> <link rel="stylesheet" href="/static/css/dtsel.css">
</head> </head>
<body> <body>
<nav
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
role="navigation"
aria-label="main navigation"
>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<figure class="image">
<img width="28px" height="28px" src="/static/img/logo_nobg.webp" alt="Reminder Bot Logo">
</figure>
</a>
<p class="navbar-item pageTitle"></p>
<a
role="button"
class="dashboard-burger navbar-burger is-right"
aria-label="menu"
aria-expanded="false"
data-target="mobileSidebar"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>
</body> </body>

511
package-lock.json generated
View File

@ -6,11 +6,11 @@
"": { "": {
"name": "example", "name": "example",
"dependencies": { "dependencies": {
"air-datepicker": "^3.4.0",
"axios": "^1.5.1", "axios": "^1.5.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"luxon": "^3.4.3", "luxon": "^3.4.3",
"preact": "^10.13.1", "preact": "^10.13.1",
"react-colorful": "^5.6.1",
"react-query": "^3.39.3", "react-query": "^3.39.3",
"tributejs": "^5.1.3", "tributejs": "^5.1.3",
"wouter": "^2.12.1" "wouter": "^2.12.1"
@ -21,6 +21,7 @@
"eslint": "^8.50.0", "eslint": "^8.50.0",
"eslint-config-preact": "^1.3.0", "eslint-config-preact": "^1.3.0",
"prettier": "^3.0.3", "prettier": "^3.0.3",
"react-datepicker": "^4.21.0",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^4.3.2" "vite": "^4.3.2"
} }
@ -61,18 +62,18 @@
} }
}, },
"node_modules/@babel/compat-data": { "node_modules/@babel/compat-data": {
"version": "7.22.20", "version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.2.tgz",
"integrity": "sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==", "integrity": "sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/core": { "node_modules/@babel/core": {
"version": "7.23.0", "version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.0.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz",
"integrity": "sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ==", "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.0", "@ampproject/remapping": "^2.2.0",
@ -80,10 +81,10 @@
"@babel/generator": "^7.23.0", "@babel/generator": "^7.23.0",
"@babel/helper-compilation-targets": "^7.22.15", "@babel/helper-compilation-targets": "^7.22.15",
"@babel/helper-module-transforms": "^7.23.0", "@babel/helper-module-transforms": "^7.23.0",
"@babel/helpers": "^7.23.0", "@babel/helpers": "^7.23.2",
"@babel/parser": "^7.23.0", "@babel/parser": "^7.23.0",
"@babel/template": "^7.22.15", "@babel/template": "^7.22.15",
"@babel/traverse": "^7.23.0", "@babel/traverse": "^7.23.2",
"@babel/types": "^7.23.0", "@babel/types": "^7.23.0",
"convert-source-map": "^2.0.0", "convert-source-map": "^2.0.0",
"debug": "^4.1.0", "debug": "^4.1.0",
@ -295,13 +296,13 @@
} }
}, },
"node_modules/@babel/helpers": { "node_modules/@babel/helpers": {
"version": "7.23.1", "version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.1.tgz", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
"integrity": "sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA==", "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/template": "^7.22.15", "@babel/template": "^7.22.15",
"@babel/traverse": "^7.23.0", "@babel/traverse": "^7.23.2",
"@babel/types": "^7.23.0" "@babel/types": "^7.23.0"
}, },
"engines": { "engines": {
@ -411,9 +412,9 @@
} }
}, },
"node_modules/@babel/runtime": { "node_modules/@babel/runtime": {
"version": "7.23.1", "version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
"integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==", "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.14.0" "regenerator-runtime": "^0.14.0"
}, },
@ -436,9 +437,9 @@
} }
}, },
"node_modules/@babel/traverse": { "node_modules/@babel/traverse": {
"version": "7.23.0", "version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
"integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==", "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.22.13", "@babel/code-frame": "^7.22.13",
@ -838,18 +839,18 @@
} }
}, },
"node_modules/@eslint-community/regexpp": { "node_modules/@eslint-community/regexpp": {
"version": "4.9.0", "version": "4.10.0",
"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.0.tgz", "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
"integrity": "sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==", "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": "^12.0.0 || ^14.0.0 || >=16.0.0" "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
} }
}, },
"node_modules/@eslint/eslintrc": { "node_modules/@eslint/eslintrc": {
"version": "2.1.2", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
"integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==", "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"ajv": "^6.12.4", "ajv": "^6.12.4",
@ -870,9 +871,9 @@
} }
}, },
"node_modules/@eslint/eslintrc/node_modules/globals": { "node_modules/@eslint/eslintrc/node_modules/globals": {
"version": "13.22.0", "version": "13.23.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
"integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==", "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"type-fest": "^0.20.2" "type-fest": "^0.20.2"
@ -885,21 +886,21 @@
} }
}, },
"node_modules/@eslint/js": { "node_modules/@eslint/js": {
"version": "8.50.0", "version": "8.53.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz",
"integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==", "integrity": "sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.11", "version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
"integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==", "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@humanwhocodes/object-schema": "^1.2.1", "@humanwhocodes/object-schema": "^2.0.1",
"debug": "^4.1.1", "debug": "^4.1.1",
"minimatch": "^3.0.5" "minimatch": "^3.0.5"
}, },
@ -921,9 +922,9 @@
} }
}, },
"node_modules/@humanwhocodes/object-schema": { "node_modules/@humanwhocodes/object-schema": {
"version": "1.2.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
"dev": true "dev": true
}, },
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
@ -965,9 +966,9 @@
"dev": true "dev": true
}, },
"node_modules/@jridgewell/trace-mapping": { "node_modules/@jridgewell/trace-mapping": {
"version": "0.3.19", "version": "0.3.20",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==", "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/resolve-uri": "^3.1.0",
@ -975,9 +976,9 @@
} }
}, },
"node_modules/@mdn/browser-compat-data": { "node_modules/@mdn/browser-compat-data": {
"version": "5.3.19", "version": "5.3.28",
"resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.19.tgz", "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.28.tgz",
"integrity": "sha512-3k0I0sqa9vyO1z687O4hfoeXnTIf68WI0UBksBj0GPbXdNrOA4VOntP08jtvuaTG7yYHRVXSyoA9xRWxSGv3mw==", "integrity": "sha512-vC+UDAsQti7Cv2oBahPfgnTXT7n0XZk8e7UFucNMmkauszdiiEsNFI0elmMMrh2u+IaMOvAAHo3DDzMx7y80Cw==",
"dev": true "dev": true
}, },
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
@ -1046,20 +1047,30 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@preact/preset-vite": { "node_modules/@preact/preset-vite": {
"version": "2.5.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.5.0.tgz", "resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.6.0.tgz",
"integrity": "sha512-BUhfB2xQ6ex0yPkrT1Z3LbfPzjpJecOZwQ/xJrXGFSZD84+ObyS//41RdEoQCMWsM0t7UHGaujUxUBub7WM1Jw==", "integrity": "sha512-5nztNzXbCpqyVum/K94nB2YQ5PTnvWdz4u7/X0jc8+kLyskSSpkNUxLQJeI90zfGSFIX1Ibj2G2JIS/mySHWYQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/plugin-transform-react-jsx": "^7.14.9", "@babel/plugin-transform-react-jsx": "^7.22.15",
"@babel/plugin-transform-react-jsx-development": "^7.16.7", "@babel/plugin-transform-react-jsx-development": "^7.22.5",
"@prefresh/vite": "^2.2.8", "@prefresh/vite": "^2.4.1",
"@rollup/pluginutils": "^4.1.1", "@rollup/pluginutils": "^4.1.1",
"babel-plugin-transform-hook-names": "^1.0.2", "babel-plugin-transform-hook-names": "^1.0.2",
"debug": "^4.3.1", "debug": "^4.3.4",
"kolorist": "^1.2.10", "kolorist": "^1.8.0",
"resolve": "^1.20.0" "resolve": "^1.22.8"
}, },
"peerDependencies": { "peerDependencies": {
"@babel/core": "7.x", "@babel/core": "7.x",
@ -1088,9 +1099,9 @@
"dev": true "dev": true
}, },
"node_modules/@prefresh/vite": { "node_modules/@prefresh/vite": {
"version": "2.4.1", "version": "2.4.3",
"resolved": "https://registry.npmjs.org/@prefresh/vite/-/vite-2.4.1.tgz", "resolved": "https://registry.npmjs.org/@prefresh/vite/-/vite-2.4.3.tgz",
"integrity": "sha512-vthWmEqu8TZFeyrBNc9YE5SiC3DVSzPgsOCp/WQ7FqdHpOIJi7Z8XvCK06rBPOtG4914S52MjG9Ls22eVAiuqQ==", "integrity": "sha512-diQ8AW+Y2i1QEhO64t2hhV8WFP9X0/NAxuSd9eRlVyS3LOs3RgGOwjOmLoJqwCmIbdq5Szq983gO+xdW/l0G6A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/core": "^7.22.1", "@babel/core": "^7.22.1",
@ -1118,21 +1129,21 @@
} }
}, },
"node_modules/@types/json-schema": { "node_modules/@types/json-schema": {
"version": "7.0.13", "version": "7.0.14",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
"integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==", "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
"dev": true "dev": true
}, },
"node_modules/@types/luxon": { "node_modules/@types/luxon": {
"version": "3.3.2", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.2.tgz", "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.3.tgz",
"integrity": "sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==", "integrity": "sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ==",
"dev": true "dev": true
}, },
"node_modules/@types/semver": { "node_modules/@types/semver": {
"version": "7.5.3", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz",
"integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==", "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==",
"dev": true "dev": true
}, },
"node_modules/@typescript-eslint/experimental-utils": { "node_modules/@typescript-eslint/experimental-utils": {
@ -1342,10 +1353,16 @@
"url": "https://opencollective.com/typescript-eslint" "url": "https://opencollective.com/typescript-eslint"
} }
}, },
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
"dev": true
},
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.10.0", "version": "8.11.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
"dev": true, "dev": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
@ -1363,11 +1380,6 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
} }
}, },
"node_modules/air-datepicker": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/air-datepicker/-/air-datepicker-3.4.0.tgz",
"integrity": "sha512-MFr+2QYdHgrbd6Ah32hxoSCsmNJdrhYSkhr6hhefLpJBtsvX7zdYSvizsCJg15B2000NrEXep8UCYOsWy39iiw=="
},
"node_modules/ajv": { "node_modules/ajv": {
"version": "6.12.6", "version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@ -1558,9 +1570,9 @@
} }
}, },
"node_modules/axios": { "node_modules/axios": {
"version": "1.5.1", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
"integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==", "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
"dependencies": { "dependencies": {
"follow-redirects": "^1.15.0", "follow-redirects": "^1.15.0",
"form-data": "^4.0.0", "form-data": "^4.0.0",
@ -1663,13 +1675,14 @@
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
}, },
"node_modules/call-bind": { "node_modules/call-bind": {
"version": "1.0.2", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"function-bind": "^1.1.1", "function-bind": "^1.1.2",
"get-intrinsic": "^1.0.2" "get-intrinsic": "^1.2.1",
"set-function-length": "^1.1.1"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
@ -1685,9 +1698,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001541", "version": "1.0.30001561",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz",
"integrity": "sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==", "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -1718,6 +1731,12 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
"dev": true
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -1769,6 +1788,22 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -1793,9 +1828,9 @@
"dev": true "dev": true
}, },
"node_modules/define-data-property": { "node_modules/define-data-property": {
"version": "1.1.0", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
"integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==", "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"get-intrinsic": "^1.2.1", "get-intrinsic": "^1.2.1",
@ -1861,32 +1896,32 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.537", "version": "1.4.576",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.537.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz",
"integrity": "sha512-W1+g9qs9hviII0HAwOdehGYkr+zt7KKdmCcJcjH0mYg6oL8+ioT3Skjmt7BLoAQqXhjf40AXd+HlR4oAWMlXjA==", "integrity": "sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==",
"dev": true "dev": true
}, },
"node_modules/es-abstract": { "node_modules/es-abstract": {
"version": "1.22.2", "version": "1.22.3",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
"integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==", "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"array-buffer-byte-length": "^1.0.0", "array-buffer-byte-length": "^1.0.0",
"arraybuffer.prototype.slice": "^1.0.2", "arraybuffer.prototype.slice": "^1.0.2",
"available-typed-arrays": "^1.0.5", "available-typed-arrays": "^1.0.5",
"call-bind": "^1.0.2", "call-bind": "^1.0.5",
"es-set-tostringtag": "^2.0.1", "es-set-tostringtag": "^2.0.1",
"es-to-primitive": "^1.2.1", "es-to-primitive": "^1.2.1",
"function.prototype.name": "^1.1.6", "function.prototype.name": "^1.1.6",
"get-intrinsic": "^1.2.1", "get-intrinsic": "^1.2.2",
"get-symbol-description": "^1.0.0", "get-symbol-description": "^1.0.0",
"globalthis": "^1.0.3", "globalthis": "^1.0.3",
"gopd": "^1.0.1", "gopd": "^1.0.1",
"has": "^1.0.3",
"has-property-descriptors": "^1.0.0", "has-property-descriptors": "^1.0.0",
"has-proto": "^1.0.1", "has-proto": "^1.0.1",
"has-symbols": "^1.0.3", "has-symbols": "^1.0.3",
"hasown": "^2.0.0",
"internal-slot": "^1.0.5", "internal-slot": "^1.0.5",
"is-array-buffer": "^3.0.2", "is-array-buffer": "^3.0.2",
"is-callable": "^1.2.7", "is-callable": "^1.2.7",
@ -1896,7 +1931,7 @@
"is-string": "^1.0.7", "is-string": "^1.0.7",
"is-typed-array": "^1.1.12", "is-typed-array": "^1.1.12",
"is-weakref": "^1.0.2", "is-weakref": "^1.0.2",
"object-inspect": "^1.12.3", "object-inspect": "^1.13.1",
"object-keys": "^1.1.1", "object-keys": "^1.1.1",
"object.assign": "^4.1.4", "object.assign": "^4.1.4",
"regexp.prototype.flags": "^1.5.1", "regexp.prototype.flags": "^1.5.1",
@ -1910,7 +1945,7 @@
"typed-array-byte-offset": "^1.0.0", "typed-array-byte-offset": "^1.0.0",
"typed-array-length": "^1.0.4", "typed-array-length": "^1.0.4",
"unbox-primitive": "^1.0.2", "unbox-primitive": "^1.0.2",
"which-typed-array": "^1.1.11" "which-typed-array": "^1.1.13"
}, },
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
@ -1942,26 +1977,26 @@
} }
}, },
"node_modules/es-set-tostringtag": { "node_modules/es-set-tostringtag": {
"version": "2.0.1", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
"integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==", "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"get-intrinsic": "^1.1.3", "get-intrinsic": "^1.2.2",
"has": "^1.0.3", "has-tostringtag": "^1.0.0",
"has-tostringtag": "^1.0.0" "hasown": "^2.0.0"
}, },
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/es-shim-unscopables": { "node_modules/es-shim-unscopables": {
"version": "1.0.0", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz", "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
"integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==", "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"has": "^1.0.3" "hasown": "^2.0.0"
} }
}, },
"node_modules/es-to-primitive": { "node_modules/es-to-primitive": {
@ -2037,18 +2072,19 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "8.50.0", "version": "8.53.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
"integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==", "integrity": "sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1", "@eslint-community/regexpp": "^4.6.1",
"@eslint/eslintrc": "^2.1.2", "@eslint/eslintrc": "^2.1.3",
"@eslint/js": "8.50.0", "@eslint/js": "8.53.0",
"@humanwhocodes/config-array": "^0.11.11", "@humanwhocodes/config-array": "^0.11.13",
"@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8", "@nodelib/fs.walk": "^1.2.8",
"@ungap/structured-clone": "^1.2.0",
"ajv": "^6.12.4", "ajv": "^6.12.4",
"chalk": "^4.0.0", "chalk": "^4.0.0",
"cross-spawn": "^7.0.2", "cross-spawn": "^7.0.2",
@ -2243,12 +2279,12 @@
} }
}, },
"node_modules/eslint-plugin-react/node_modules/resolve": { "node_modules/eslint-plugin-react/node_modules/resolve": {
"version": "2.0.0-next.4", "version": "2.0.0-next.5",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
"integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==", "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"is-core-module": "^2.9.0", "is-core-module": "^2.13.0",
"path-parse": "^1.0.7", "path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0" "supports-preserve-symlinks-flag": "^1.0.0"
}, },
@ -2349,9 +2385,9 @@
} }
}, },
"node_modules/eslint/node_modules/globals": { "node_modules/eslint/node_modules/globals": {
"version": "13.22.0", "version": "13.23.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
"integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==", "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"type-fest": "^0.20.2" "type-fest": "^0.20.2"
@ -2545,12 +2581,12 @@
} }
}, },
"node_modules/flat-cache": { "node_modules/flat-cache": {
"version": "3.1.0", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.0.tgz", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
"integrity": "sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==", "integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"flatted": "^3.2.7", "flatted": "^3.2.9",
"keyv": "^4.5.3", "keyv": "^4.5.3",
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
}, },
@ -2625,10 +2661,13 @@
} }
}, },
"node_modules/function-bind": { "node_modules/function-bind": {
"version": "1.1.1", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true "dev": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
}, },
"node_modules/function.prototype.name": { "node_modules/function.prototype.name": {
"version": "1.1.6", "version": "1.1.6",
@ -2667,15 +2706,15 @@
} }
}, },
"node_modules/get-intrinsic": { "node_modules/get-intrinsic": {
"version": "1.2.1", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"function-bind": "^1.1.1", "function-bind": "^1.1.2",
"has": "^1.0.3",
"has-proto": "^1.0.1", "has-proto": "^1.0.1",
"has-symbols": "^1.0.3" "has-symbols": "^1.0.3",
"hasown": "^2.0.0"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
@ -2790,18 +2829,6 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"dev": true "dev": true
}, },
"node_modules/has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.1"
},
"engines": {
"node": ">= 0.4.0"
}
},
"node_modules/has-bigints": { "node_modules/has-bigints": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@ -2821,12 +2848,12 @@
} }
}, },
"node_modules/has-property-descriptors": { "node_modules/has-property-descriptors": {
"version": "1.0.0", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz", "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==", "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"get-intrinsic": "^1.1.1" "get-intrinsic": "^1.2.2"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
@ -2871,6 +2898,18 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/hasown": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
"integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/ignore": { "node_modules/ignore": {
"version": "5.2.4", "version": "5.2.4",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@ -2920,13 +2959,13 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
}, },
"node_modules/internal-slot": { "node_modules/internal-slot": {
"version": "1.0.5", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
"integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==", "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"get-intrinsic": "^1.2.0", "get-intrinsic": "^1.2.2",
"has": "^1.0.3", "hasown": "^2.0.0",
"side-channel": "^1.0.4" "side-channel": "^1.0.4"
}, },
"engines": { "engines": {
@ -3003,12 +3042,12 @@
} }
}, },
"node_modules/is-core-module": { "node_modules/is-core-module": {
"version": "2.13.0", "version": "2.13.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
"integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"has": "^1.0.3" "hasown": "^2.0.0"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
@ -3352,9 +3391,9 @@
} }
}, },
"node_modules/keyv": { "node_modules/keyv": {
"version": "4.5.3", "version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
"integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==", "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"json-buffer": "3.0.1" "json-buffer": "3.0.1"
@ -3554,9 +3593,9 @@
} }
}, },
"node_modules/object-inspect": { "node_modules/object-inspect": {
"version": "1.12.3", "version": "1.13.1",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==", "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
"dev": true, "dev": true,
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
@ -3810,9 +3849,9 @@
} }
}, },
"node_modules/preact": { "node_modules/preact": {
"version": "10.18.1", "version": "10.18.2",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.18.1.tgz", "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
"integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==", "integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/preact" "url": "https://opencollective.com/preact"
@ -3859,9 +3898,9 @@
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
}, },
"node_modules/punycode": { "node_modules/punycode": {
"version": "2.3.0", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=6" "node": ">=6"
@ -3899,12 +3938,87 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-colorful": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/react-datepicker": {
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.21.0.tgz",
"integrity": "sha512-z0DtuRrKMz9i7dcTusW29VacbM9pn08g1yw0cG+Y5GpodJDxSWv7zUMxl3IwKN9Ap/AMphiepvmT5P+iNCgEiA==",
"dev": true,
"dependencies": {
"@popperjs/core": "^2.11.8",
"classnames": "^2.2.6",
"date-fns": "^2.30.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.13.0",
"react-popper": "^2.3.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"dev": true
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true "dev": true
}, },
"node_modules/react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"dev": true,
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"dev": true,
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-query": { "node_modules/react-query": {
"version": "3.39.3", "version": "3.39.3",
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@ -3978,9 +4092,9 @@
"integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==" "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
}, },
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.6", "version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
"integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==", "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"is-core-module": "^2.13.0", "is-core-module": "^2.13.0",
@ -4098,6 +4212,15 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/semver": { "node_modules/semver": {
"version": "6.3.1", "version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@ -4107,6 +4230,21 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/set-function-length": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
"integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
"dev": true,
"dependencies": {
"define-data-property": "^1.1.1",
"get-intrinsic": "^1.2.1",
"gopd": "^1.0.1",
"has-property-descriptors": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/set-function-name": { "node_modules/set-function-name": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz", "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
@ -4514,9 +4652,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.9", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
@ -4568,6 +4706,15 @@
} }
} }
}, },
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dev": true,
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/which": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -4641,13 +4788,13 @@
} }
}, },
"node_modules/which-typed-array": { "node_modules/which-typed-array": {
"version": "1.1.11", "version": "1.1.13",
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz", "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
"integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==", "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"available-typed-arrays": "^1.0.5", "available-typed-arrays": "^1.0.5",
"call-bind": "^1.0.2", "call-bind": "^1.0.4",
"for-each": "^0.3.3", "for-each": "^0.3.3",
"gopd": "^1.0.1", "gopd": "^1.0.1",
"has-tostringtag": "^1.0.0" "has-tostringtag": "^1.0.0"

8
package.json
View File

@ -3,16 +3,17 @@
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite build --watch --mode development",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview",
"package": "mkdir -p reminder-dashboard/usr/share/reminder-dashboard && vite build --mode production --outDir reminder-dashboard/usr/share/reminder-dashboard && dpkg-deb --build reminder-dashboard"
}, },
"dependencies": { "dependencies": {
"air-datepicker": "^3.4.0",
"axios": "^1.5.1", "axios": "^1.5.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"luxon": "^3.4.3", "luxon": "^3.4.3",
"preact": "^10.13.1", "preact": "^10.13.1",
"react-colorful": "^5.6.1",
"react-query": "^3.39.3", "react-query": "^3.39.3",
"tributejs": "^5.1.3", "tributejs": "^5.1.3",
"wouter": "^2.12.1" "wouter": "^2.12.1"
@ -23,6 +24,7 @@
"eslint": "^8.50.0", "eslint": "^8.50.0",
"eslint-config-preact": "^1.3.0", "eslint-config-preact": "^1.3.0",
"prettier": "^3.0.3", "prettier": "^3.0.3",
"react-datepicker": "^4.21.0",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^4.3.2" "vite": "^4.3.2"
} }

7
reminder-dashboard/DEBIAN/control Normal file
View File

@ -0,0 +1,7 @@
Package: reminder-dashboard
Version: 1.0
Section: base
Priority: optional
Architecture: amd64
Maintainer: Jude Southworth <judesouthworth@pm.me>
Description: NPM managed dashboard

159
src/api.ts
View File

@ -8,8 +8,9 @@ type UserInfo = {
}; };
export type GuildInfo = { export type GuildInfo = {
id: string; patreon: boolean;
name: string; name: string;
error?: string;
}; };
type EmbedField = { type EmbedField = {
@ -47,36 +48,152 @@ export type Reminder = {
utc_time: DateTime; utc_time: DateTime;
}; };
type ChannelInfo = { export type ChannelInfo = {
id: string; id: string;
name: string; name: string;
}; };
export function fetchUserInfo(): Promise<UserInfo> { type RoleInfo = {
return axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise<UserInfo>; id: string;
} name: string;
};
export function fetchUserGuilds(): Promise<GuildInfo[]> { type Template = {
return axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise< id: number;
GuildInfo[] name: string;
>; attachment: string | null;
} attachment_name: string | null;
avatar: string | null;
channel: string;
content: string;
embed_author: string;
embed_author_url: string | null;
embed_color: number;
embed_description: string;
embed_footer: string;
embed_footer_url: string | null;
embed_image_url: string | null;
embed_thumbnail_url: string | null;
embed_title: string;
embed_fields: EmbedField[] | null;
};
export function fetchGuildReminders(guild: string): Promise<Reminder[]> { const USER_INFO_STALE_TIME = 120_000;
return axios const GUILD_INFO_STALE_TIME = 300_000;
const OTHER_STALE_TIME = 15_000;
export const fetchUserInfo = () => ({
queryKey: ["USER_INFO"],
queryFn: () => axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise<UserInfo>,
staleTime: USER_INFO_STALE_TIME,
});
export const patchUserInfo = () => ({
mutationFn: (timezone: string) => axios.patch(`/dashboard/api/user`, { timezone }),
});
export const fetchUserGuilds = () => ({
queryKey: ["USER_GUILDS"],
queryFn: () =>
axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise<GuildInfo[]>,
staleTime: USER_INFO_STALE_TIME,
});
export const fetchGuildInfo = (guild: string) => ({
queryKey: ["GUILD_INFO", guild],
queryFn: () =>
axios.get(`/dashboard/api/guild/${guild}`).then((resp) => resp.data) as Promise<GuildInfo>,
staleTime: GUILD_INFO_STALE_TIME,
});
export const fetchGuildChannels = (guild: string) => ({
queryKey: ["GUILD_CHANNELS", guild],
queryFn: () =>
axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise<
ChannelInfo[]
>,
staleTime: GUILD_INFO_STALE_TIME,
});
export const fetchGuildRoles = (guild: string) => ({
queryKey: ["GUILD_ROLES", guild],
queryFn: () =>
axios.get(`/dashboard/api/guild/${guild}/roles`).then((resp) => resp.data) as Promise<
RoleInfo[]
>,
staleTime: GUILD_INFO_STALE_TIME,
});
export const fetchGuildReminders = (guild: string) => ({
queryKey: ["GUILD_REMINDERS", guild],
queryFn: () =>
axios
.get(`/dashboard/api/guild/${guild}/reminders`) .get(`/dashboard/api/guild/${guild}/reminders`)
.then((resp) => resp.data) .then((resp) => resp.data)
.then((value) => .then((value) =>
value.map((reminder) => ({ value.map((reminder) => ({
...reminder, ...reminder,
utc_time: DateTime.fromISO(reminder.utc_time), utc_time: DateTime.fromISO(reminder.utc_time, { zone: "UTC" }),
expires: reminder.expires === null ? null : DateTime.fromISO(reminder.expires), expires:
reminder.expires === null
? null
: DateTime.fromISO(reminder.expires, { zone: "UTC" }),
})), })),
) as Promise<Reminder[]>; ) as Promise<Reminder[]>,
} staleTime: OTHER_STALE_TIME,
});
export function fetchGuildChannels(guild: string): Promise<ChannelInfo[]> { export const patchGuildReminder = (guild: string) => ({
return axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise< mutationFn: (reminder: Reminder) =>
ChannelInfo[] axios.patch(`/dashboard/api/guild/${guild}/reminders`, {
>; ...reminder,
} utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
}),
});
export const postGuildReminder = (guild: string) => ({
mutationFn: (reminder: Reminder) =>
axios
.post(`/dashboard/api/guild/${guild}/reminders`, {
...reminder,
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
})
.then((resp) => resp.data),
});
export const deleteGuildReminder = (guild: string) => ({
mutationFn: (reminder: Reminder) =>
axios.delete(`/dashboard/api/guild/${guild}/reminders`, {
data: {
uid: reminder.uid,
},
}),
});
export const fetchGuildTemplates = (guild: string) => ({
queryKey: ["GUILD_TEMPLATES", guild],
queryFn: () =>
axios.get(`/dashboard/api/guild/${guild}/templates`).then((resp) => resp.data) as Promise<
Template[]
>,
staleTime: OTHER_STALE_TIME,
});
export const postGuildTemplate = (guild: string) => ({
mutationFn: (reminder: Reminder) =>
axios
.post(`/dashboard/api/guild/${guild}/templates`, {
...reminder,
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
})
.then((resp) => resp.data),
});
export const deleteGuildTemplate = (guild: string) => ({
mutationFn: (template: Template) =>
axios.delete(`/dashboard/api/guild/${guild}/templates`, {
data: {
id: template.id,
},
}),
});

7
src/components/App/FlashContext.tsx Normal file
View File

@ -0,0 +1,7 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { Message } from "./FlashProvider";
export const FlashContext = createContext(null as (message: Message) => void);
export const useFlash = () => useContext(FlashContext);

43
src/components/App/FlashProvider.tsx Normal file
View File

@ -0,0 +1,43 @@
import { FlashContext } from "./FlashContext";
import { useState } from "preact/hooks";
import { MESSAGE_FLASH_TIME } from "../../consts";
export type Message = {
message: string;
type: "error" | "success";
};
export const FlashProvider = ({ children }) => {
const [messages, setMessages] = useState([] as Message[]);
return (
<FlashContext.Provider
value={(message: Message) => {
setMessages((messages: Message[]) => [...messages, message]);
setTimeout(() => {
setMessages((messages) => [...messages].splice(1));
}, MESSAGE_FLASH_TIME);
}}
>
<>
{children}
<div class="flash-container">
{messages.map((message) => {
const className = message.type === "error" ? "is-danger" : "is-success";
const icon =
message.type === "error" ? "fa-exclamation-circle" : "fa-check";
return (
<div class={`notification flash-message is-active ${className}`}>
<span class="icon">
<i class={`far ${icon}`}></i>
</span>{" "}
<span class="error-message">{message.message}</span>
</div>
);
})}
</div>
</>
</FlashContext.Provider>
);
};

20
src/components/App/TimezoneProvider.tsx Normal file
View File

@ -0,0 +1,20 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { useState } from "preact/hooks";
import { DateTime } from "luxon";
type TTimezoneContext = [string, (tz: string) => void];
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
export const TimezoneProvider = ({ children }) => {
const [timezone, setTimezone] = useState(DateTime.now().zoneName);
return (
<TimezoneContext.Provider value={[timezone, setTimezone]}>
{children}
</TimezoneContext.Provider>
);
};
export const useTimezone = () => useContext(TimezoneContext);

19
src/components/App/index.tsx
View File

@ -2,31 +2,32 @@ import { Sidebar } from "../Sidebar";
import { QueryClient, QueryClientProvider } from "react-query"; import { QueryClient, QueryClientProvider } from "react-query";
import { Route, Router, Switch } from "wouter"; import { Route, Router, Switch } from "wouter";
import { Welcome } from "../Welcome"; import { Welcome } from "../Welcome";
import { GuildReminders } from "../GuildReminders"; import { Guild } from "../Guild";
import { FlashProvider } from "./FlashProvider";
import { TimezoneProvider } from "./TimezoneProvider";
export function App() { export function App() {
const queryClient = new QueryClient(); const queryClient = new QueryClient();
return ( return (
<TimezoneProvider>
<FlashProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<>
<Router base={"/dashboard"}> <Router base={"/dashboard"}>
<div class="columns is-gapless dashboard-frame"> <div class="columns is-gapless dashboard-frame">
<Sidebar></Sidebar> <Sidebar />
<div class="column is-main-content"> <div class="column is-main-content">
<Switch> <Switch>
<Route <Route path={"/:guild/reminders"} component={Guild}></Route>
path={"/:guild/reminders"}
component={GuildReminders}
></Route>
<Route> <Route>
<Welcome></Welcome> <Welcome />
</Route> </Route>
</Switch> </Switch>
</div> </div>
</div> </div>
</Router> </Router>
</>
</QueryClientProvider> </QueryClientProvider>
</FlashProvider>
</TimezoneProvider>
); );
} }

27
src/components/EditReminder/ChannelSelector.tsx
View File

@ -1,27 +0,0 @@
import { useQuery } from "react-query";
import { QueryKeys } from "../../consts";
import { useParams } from "wouter";
import { fetchGuildChannels } from "../../api";
export const ChannelSelector = ({ channel }) => {
const { guild } = useParams();
const { isSuccess, data } = useQuery({
queryKey: [QueryKeys.GUILD_CHANNELS, guild],
queryFn: () => fetchGuildChannels(guild),
staleTime: 300,
});
return (
<div class="control has-icons-left">
<div class="select">
<select name="channel" class="channel-selector" value={channel}>
{isSuccess && data.map((c) => <option value={c.id}>{c.name}</option>)}
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
);
};

13
src/components/EditReminder/Content.tsx
View File

@ -1,13 +0,0 @@
export const Content = ({ value }) => (
<>
<label class="is-sr-only">Content</label>
<textarea
class="message-input autoresize discord-content"
placeholder="Content Content..."
maxlength={2000}
name="content"
rows={1}
value={value}
></textarea>
</>
);

31
src/components/EditReminder/Embed/Author.tsx
View File

@ -1,31 +0,0 @@
export const Author = ({ name, icon }) => {
return (
<div class="embed-author-box">
<div class="a">
<p class="image is-24x24 customizable">
<a>
<img
class="is-rounded embed_author_url"
src={icon || "/static/img/bg.webp"}
alt="Image for embed author"
></img>
</a>
</p>
</div>
<div class="b">
<label class="is-sr-only" for="embedAuthor">
Embed Author
</label>
<textarea
class="discord-embed-author message-input autoresize"
placeholder="Embed Author..."
rows={1}
maxlength={256}
name="embed_author"
value={name}
></textarea>
</div>
</div>
);
};

100
src/components/EditReminder/Embed/index.tsx
View File

@ -1,100 +0,0 @@
import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";
export const Embed = ({ reminder }) => {
return (
<div class="discord-embed">
<div class="embed-body">
<button class="change-color button is-rounded is-small">
<span class="is-sr-only">Choose embed color</span>
<i class="fas fa-eye-dropper"></i>
</button>
<div class="a">
<Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
<Title title={reminder.embed_title}></Title>
<br></br>
<Description description={reminder.embed_description}></Description>
<br></br>
<div class="embed-multifield-box">
<div data-inlined="1" class="embed-field-box">
<label class="is-sr-only" for="embedFieldTitle">
Field Title
</label>
<div class="is-flex">
<textarea
class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..."
rows={1}
maxlength={256}
name="embed_field_title[]"
></textarea>
<button class="button is-small inline-btn">
<span class="is-sr-only">Toggle field inline</span>
<i class="fas fa-arrows-h"></i>
</button>
</div>
<label class="is-sr-only" for="embedFieldValue">
Field Value
</label>
<textarea
class="discord-field-value field-input message-input autoresize "
placeholder="Field Value..."
maxlength={1024}
name="embed_field_value[]"
rows={1}
></textarea>
</div>
</div>
</div>
<div class="b">
<p class="image thumbnail customizable">
<a>
<img
class="embed_thumbnail_url"
src="/static/img/bg.webp"
alt="Square thumbnail embedded image"
></img>
</a>
</p>
</div>
</div>
<p class="image is-400x300 customizable">
<a>
<img
class="embed_image_url"
src="/static/img/bg.webp"
alt="Large embedded image"
></img>
</a>
</p>
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<a>
<img
class="is-rounded embed_footer_url"
src="/static/img/bg.webp"
alt="Footer profile-like image"
></img>
</a>
</p>
<label class="is-sr-only" for="embedFooter">
Embed Footer text
</label>
<textarea
class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength={2048}
name="embed_footer"
rows={1}
></textarea>
</div>
</div>
);
};

17
src/components/EditReminder/Name.tsx
View File

@ -1,17 +0,0 @@
export const Name = ({ value }) => (
<div class="name-bar">
<div class="field">
<div class="control">
<label class="label sr-only">Reminder Name</label>
<input
class="input"
type="text"
name="name"
placeholder="Reminder Name"
maxlength={100}
value={value}
></input>
</div>
</div>
</div>
);

12
src/components/EditReminder/Username.tsx
View File

@ -1,12 +0,0 @@
export const Username = ({ value }) => (
<div class="discord-message-header">
<label class="is-sr-only">Username Override</label>
<input
class="discord-username message-input"
placeholder="Username Override"
maxlength={32}
name="username"
value={value}
></input>
</div>
);

197
src/components/EditReminder/index.tsx
View File

@ -1,197 +0,0 @@
import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api";
import { useQueries } from "react-query";
import { QueryKeys } from "../../consts";
import { useParams } from "wouter";
import { Name } from "./Name";
import { Username } from "./Username";
import { Content } from "./Content";
import { ChannelSelector } from "./ChannelSelector";
import { useState } from "preact/hooks";
import { IntervalSelector } from "./IntervalSelector";
import { Embed } from "./Embed";
type Props = {
reminder: Reminder;
};
export const EditReminder = ({ reminder }: Props) => {
const { guild } = useParams();
const [
{ isSuccess: channelsFetched, data: guildChannels },
{ isSuccess: userFetched, data: userInfo },
] = useQueries([
{
queryKey: [QueryKeys.GUILD_CHANNELS, guild],
queryFn: () => fetchGuildChannels(guild),
staleTime: 300,
},
{
queryKey: [QueryKeys.USER_DATA],
queryFn: fetchUserInfo,
staleTime: Infinity,
},
]);
const [collapsed, setCollapsed] = useState(false);
if (!channelsFetched || !userFetched) {
// todo
return <></>;
}
const channelInfo = guildChannels.find((c) => c.id === reminder.channel);
return (
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
<div class="columns is-mobile column reminder-topbar">
<div class="invert-collapses channel-bar">#{channelInfo.name}</div>
<Name value={reminder.name}></Name>
<div class="hide-button-bar">
<button
class="button hide-box"
onClick={() => {
setCollapsed(!collapsed);
}}
>
<span class="is-sr-only">Hide reminder</span>
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<div class="columns reminder-settings">
<div class="column discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32 customizable">
<a>
<img
class="is-rounded avatar"
src="/static/img/bg.webp"
alt="Image for discord avatar"
></img>
</a>
</p>
</figure>
<div class="media-content">
<div class="content">
<Username value={reminder.username}></Username>
<Content value={reminder.content}></Content>
<Embed reminder={reminder}></Embed>
</div>
</div>
</article>
</div>
<div class="column settings">
<div class="field channel-field">
<div class="collapses">
<label class="label" for="channelOption">
Channel*
</label>
</div>
<ChannelSelector channel={reminder.channel}></ChannelSelector>
</div>
<div class="field">
<div class="control">
<label class="label collapses">
Time*
<input
class="input"
type="datetime-local"
step="1"
name="time"
value={reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
></input>
</label>
</div>
</div>
<div class="collapses split-controls">
<div>
<div class={!userInfo.patreon && "is-locked"}>
<div class="patreon-invert foreground">
Intervals available on{" "}
<a href="https://patreon.com/jellywx">Patreon</a> or{" "}
<a href="https://gitea.jellypro.xyz/jude/reminder-bot">
self-hosting
</a>
</div>
<div class="field">
<label class="label">
Interval{" "}
<a class="foreground" href="/help/intervals">
<i class="fas fa-question-circle"></i>
</a>
</label>
<IntervalSelector
months={reminder.interval_months}
days={reminder.interval_days}
seconds={reminder.interval_seconds}
></IntervalSelector>
</div>
<div class="field">
<div class="control">
<label class="label">
Expiration
<input
class="input"
type="datetime-local"
step="1"
name="expiration"
value={
reminder.expires !== null &&
reminder.expires.toFormat(
"yyyy-LL-dd'T'HH:mm:ss",
)
}
></input>
</label>
</div>
</div>
</div>
<div class="columns is-mobile tts-row">
<div class="column has-text-centered">
<div class="is-boxed">
<label class="label">
Enable TTS <input type="checkbox" name="tts"></input>
</label>
</div>
</div>
<div class="column has-text-centered">
<div class="file is-small is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="attachment"
></input>
<span class="file-cta">
<span class="file-label">Add Attachment</span>
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="button-row-edit">
<button class="button is-success save-btn">
<span>Save</span>{" "}
<span class="icon">
<i class="fas fa-save"></i>
</span>
</button>
<button class="button is-warning">{reminder.enabled ? "Disable" : "Enable"}</button>
<button class="button is-danger delete-reminder">Delete</button>
</div>
</div>
);
};

25
src/components/Guild/GuildError.tsx Normal file
View File

@ -0,0 +1,25 @@
export const GuildError = () => {
return (
<div class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">We couldn't get this server's data</p>
<p class="subtitle">
Please check Reminder Bot is in the server, and has correct permissions.
</p>
<a
class="button is-size-4 is-rounded is-success"
href="https://invite.reminder-bot.com"
>
<p class="is-size-4">
<span>Add to Server</span>{" "}
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</p>
</a>
</div>
</div>
</div>
);
};

130
src/components/Guild/GuildReminders.tsx Normal file
View File

@ -0,0 +1,130 @@
import { useParams } from "wouter";
import { useQuery } from "react-query";
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder";
import { useState } from "preact/hooks";
enum Sort {
Time = "time",
Name = "name",
Channel = "channel",
}
export const GuildReminders = () => {
const { guild } = useParams();
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
const { data: channels } = useQuery(fetchGuildChannels(guild));
const [collapsed, setCollapsed] = useState(false);
const [sort, setSort] = useState(Sort.Time);
let prevReminder = null;
return (
<div style={{ margin: "0 12px 12px 12px" }}>
<strong>Create Reminder</strong>
<div id={"reminderCreator"}>
<CreateReminder />
</div>
<br></br>
<div class={"field"}>
<div class={"columns is-mobile"}>
<div class={"column"}>
<strong>Reminders</strong>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select
id="orderBy"
onInput={(ev) => {
setSort(ev.currentTarget.value as Sort);
}}
>
<option value={Sort.Time} selected={sort == Sort.Time}>
Time
</option>
<option value={Sort.Name} selected={sort == Sort.Name}>
Name
</option>
<option value={Sort.Channel} selected={sort == Sort.Channel}>
Channel
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
</div>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select
id="expandAll"
onInput={(ev) => {
if (ev.currentTarget.value === "expand") {
setCollapsed(false);
} else if (ev.currentTarget.value === "collapse") {
setCollapsed(true);
}
}}
>
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
</div>
</div>
</div>
<div id={"guildReminders"}>
{isSuccess &&
guildReminders
.sort((r1, r2) => {
if (sort === Sort.Time) {
return r1.utc_time > r2.utc_time ? 1 : -1;
} else if (sort === Sort.Name) {
return r1.name > r2.name ? 1 : -1;
} else {
return r1.channel > r2.channel ? 1 : -1;
}
})
.map((reminder) => {
let breaker = <></>;
if (sort === Sort.Channel && channels) {
if (
prevReminder === null ||
prevReminder.channel !== reminder.channel
) {
const channel = channels.find(
(ch) => ch.id === reminder.channel,
);
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
}
}
prevReminder = reminder;
return (
<>
{breaker}
<EditReminder
key={reminder.uid}
reminder={reminder}
globalCollapse={collapsed}
/>
</>
);
})}
</div>
</div>
);
};

27
src/components/Guild/index.tsx Normal file
View File

@ -0,0 +1,27 @@
import { useQuery } from "react-query";
import { fetchGuildInfo } from "../../api";
import { useParams } from "wouter";
import { GuildReminders } from "./GuildReminders";
import { GuildError } from "./GuildError";
import { createPortal } from "preact/compat";
import { Import } from "../Import";
export const Guild = () => {
const { guild } = useParams();
const { isSuccess, data: guildInfo } = useQuery(fetchGuildInfo(guild));
if (!isSuccess) {
return <></>;
} else if (guildInfo.error) {
return <GuildError />;
} else {
const importModal = createPortal(<Import />, document.getElementById("bottom-sidebar"));
return (
<>
{importModal}
<GuildReminders />
</>
);
}
};

66
src/components/GuildReminders/index.tsx
View File

@ -1,66 +0,0 @@
import { useParams } from "wouter";
import { useQuery } from "react-query";
import { fetchGuildReminders } from "../../api";
import { QueryKeys } from "../../consts";
import { EditReminder } from "../EditReminder";
export const GuildReminders = () => {
const { guild } = useParams();
const { isSuccess, data } = useQuery({
queryKey: [QueryKeys.GUILD_REMINDERS, guild],
queryFn: () => fetchGuildReminders(guild),
});
return (
<div style={{ margin: "0 12px 12px 12px" }}>
<strong>Create Reminder</strong>
<div id={"reminderCreator"}>
<></>
</div>
<br></br>
<div class={"field"}>
<div class={"columns is-mobile"}>
<div class={"column"}>
<strong>Reminders</strong>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select id="orderBy">
<option value="time" selected>
Time
</option>
<option value="name">Name</option>
<option value="channel">Channel</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
</div>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select id="expandAll">
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
</div>
</div>
</div>
<div id={"guildReminders"}>
{isSuccess &&
data.map((reminder) => <EditReminder reminder={reminder}></EditReminder>)}
</div>
</div>
);
};

144
src/components/Import/index.tsx Normal file
View File

@ -0,0 +1,144 @@
import { Modal } from "../Modal";
import { useRef, useState } from "preact/hooks";
import { useParams } from "wouter";
import axios from "axios";
import { useFlash } from "../App/FlashContext";
export const Import = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
class="show-modal"
data-modal="chooseTimezoneModal"
onClick={() => {
setModalOpen(true);
}}
>
<span class="icon">
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
{modalOpen && <ImportModal setModalOpen={setModalOpen} />}
</>
);
};
const ImportModal = ({ setModalOpen }) => {
const { guild } = useParams();
const aRef = useRef<HTMLAnchorElement>();
const inputRef = useRef<HTMLInputElement>();
const flash = useFlash();
const [isImporting, setIsImporting] = useState(false);
return (
<Modal
setModalOpen={setModalOpen}
title={
<>
Import/Export Manager{" "}
<a href="/help/iemanager">
<span>
<i class="fa fa-question-circle"></i>
</span>
</a>
</>
}
>
<>
<div class="control">
<div class="field">
<label>
<input
type="radio"
class="default-width"
name="exportSelect"
value="reminders"
checked
/>
Reminders
</label>
</div>
</div>
<br />
<div class="has-text-centered">
<div style="color: red">
Please first read the <a href="/help/iemanager">support page</a>
</div>
<button
class="button is-success is-outlined"
style={{ margin: "2px" }}
id="import-data"
disabled={isImporting}
onClick={() => {
inputRef.current.click();
}}
>
Import Data
</button>
<button
class="button is-success"
style={{ margin: "2px" }}
id="export-data"
onClick={() =>
axios
.get(`/dashboard/api/guild/${guild}/export/reminders`)
.then(({ data, status }) => {
if (status === 200) {
aRef.current.href = `data:text/plain;charset=utf-8,${encodeURIComponent(
data.body,
)}`;
aRef.current.click();
} else {
flash({
message: `Unexpected status ${status}`,
type: "error",
});
}
})
}
>
Export Data
</button>
</div>
<a ref={aRef} id="downloader" download="export.csv" class="is-hidden" />
<input
ref={inputRef}
id="uploader"
type="file"
hidden
onChange={() => {
new Promise((resolve) => {
let fileReader = new FileReader();
fileReader.onload = (e) => resolve(fileReader.result);
fileReader.readAsDataURL(inputRef.current.files[0]);
}).then((dataUrl: string) => {
setIsImporting(true);
axios
.put(`/dashboard/api/guild/${guild}/export/reminders`, {
body: JSON.stringify({ body: dataUrl.split(",")[1] }),
})
.then(({ data }) => {
setIsImporting(false);
if (data.error) {
flash({ message: data.error, type: "error" });
} else {
flash({ message: data.message, type: "success" });
}
})
.then(() => {
delete inputRef.current.files[0];
});
});
}}
/>
</>
</Modal>
);
};

61
src/components/Modal/index.tsx Normal file
View File

@ -0,0 +1,61 @@
import { JSX } from "preact";
import { createPortal } from "preact/compat";
type Props = {
setModalOpen: (open: boolean) => never;
title: string | JSX.Element;
onSubmitText?: string;
onSubmit?: () => void;
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
};
export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
const body = document.querySelector("body");
return createPortal(
<div class="modal is-active">
<div
class="modal-background"
onClick={() => {
setModalOpen(false);
}}
></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title">{title}</label>
<button
class="delete close-modal"
aria-label="close"
onClick={() => {
setModalOpen(false);
}}
></button>
</header>
<section class="modal-card-body">{children}</section>
{onSubmit && (
<footer class="modal-card-foot">
<button class="button is-success" onInput={onSubmit}>
{onSubmitText || "Save"}
</button>
<button
class="button close-modal"
onClick={() => {
setModalOpen(false);
}}
>
Cancel
</button>
</footer>
)}
</div>
<button
class="modal-close is-large close-modal"
aria-label="close"
onClick={() => {
setModalOpen(false);
}}
></button>
</div>,
body,
);
};

46
src/components/Reminder/Attachment.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useReminder } from "./ReminderContext";
export const Attachment = () => {
const [{ attachment_name }, setReminder] = useReminder();
return (
<div class="file is-small is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="attachment"
onInput={async (ev) => {
const input = ev.currentTarget;
let file = input.files[0];
if (file.size >= 8 * 1024 * 1024) {
return { error: "File too large." };
}
let attachment: string = await new Promise((resolve) => {
let fileReader = new FileReader();
fileReader.onload = () => resolve(fileReader.result as string);
fileReader.readAsDataURL(file);
});
attachment = attachment.split(",")[1];
const attachment_name = file.name;
setReminder((reminder) => ({
...reminder,
attachment,
attachment_name,
}));
}}
></input>
<span class="file-cta">
<span class="file-label">{attachment_name || "Add Attachment"}</span>
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
</span>
</label>
</div>
);
};

122
src/components/Reminder/ButtonRow/CreateButtonRow.tsx Normal file
View File

@ -0,0 +1,122 @@
import { LoadTemplate } from "../LoadTemplate";
import { useReminder } from "../ReminderContext";
import { useMutation, useQueryClient } from "react-query";
import { postGuildReminder, postGuildTemplate } from "../../../api";
import { useParams } from "wouter";
import { useState } from "preact/hooks";
import { ICON_FLASH_TIME } from "../../../consts";
import { useFlash } from "../../App/FlashContext";
export const CreateButtonRow = () => {
const { guild } = useParams();
const [reminder] = useReminder();
const [recentlyCreated, setRecentlyCreated] = useState(false);
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
const flash = useFlash();
const queryClient = useQueryClient();
const mutation = useMutation({
...postGuildReminder(guild),
onSuccess: (data) => {
if (data.error) {
flash({
message: data.error,
type: "error",
});
} else {
flash({
message: "Reminder created",
type: "success",
});
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
setRecentlyCreated(true);
setTimeout(() => {
setRecentlyCreated(false);
}, ICON_FLASH_TIME);
}
},
});
const templateMutation = useMutation({
...postGuildTemplate(guild),
onSuccess: (data) => {
if (data.error) {
flash({
message: data.error,
type: "error",
});
} else {
flash({
message: "Template created",
type: "success",
});
queryClient.invalidateQueries({
queryKey: ["GUILD_TEMPLATES", guild],
});
setTemplateRecentlyCreated(true);
setTimeout(() => {
setTemplateRecentlyCreated(false);
}, ICON_FLASH_TIME);
}
},
});
return (
<div class="button-row">
<div class="button-row-reminder">
<button
class="button is-success"
onClick={() => {
mutation.mutate(reminder);
}}
>
<span>Create Reminder</span>{" "}
{mutation.isLoading ? (
<span class="icon">
<i class="fas fa-spin fa-cog"></i>
</span>
) : recentlyCreated ? (
<span class="icon">
<i class="fas fa-check"></i>
</span>
) : (
<span class="icon">
<i class="fas fa-sparkles"></i>
</span>
)}
</button>
</div>
<div class="button-row-template">
<div>
<button
class="button is-success is-outlined"
onClick={() => {
templateMutation.mutate(reminder);
}}
>
<span>Create Template</span>{" "}
{templateMutation.isLoading ? (
<span class="icon">
<i class="fas fa-spin fa-cog"></i>
</span>
) : templateRecentlyCreated ? (
<span class="icon">
<i class="fas fa-check"></i>
</span>
) : (
<span class="icon">
<i class="fas fa-file-spreadsheet"></i>
</span>
)}
</button>
</div>
<div>
<LoadTemplate />
</div>
</div>
</div>
);
};

74
src/components/Reminder/ButtonRow/DeleteButton.tsx Normal file
View File

@ -0,0 +1,74 @@
import { useState } from "preact/hooks";
import { Modal } from "../../Modal";
import { useMutation, useQueryClient } from "react-query";
import { useReminder } from "../ReminderContext";
import { deleteGuildReminder } from "../../../api";
import { useParams } from "wouter";
import { useFlash } from "../../App/FlashContext";
export const DeleteButton = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<button
class="button is-danger delete-reminder"
onClick={() => {
setModalOpen(true);
}}
>
Delete
</button>
{modalOpen && <DeleteModal setModalOpen={setModalOpen}></DeleteModal>}
</>
);
};
const DeleteModal = ({ setModalOpen }) => {
const [reminder] = useReminder();
const { guild } = useParams();
const flash = useFlash();
const queryClient = useQueryClient();
const mutation = useMutation({
...deleteGuildReminder(guild),
onSuccess: () => {
flash({
message: "Reminder deleted",
type: "success",
});
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
setModalOpen(false);
},
});
return (
<Modal setModalOpen={setModalOpen} title={"Delete Reminder"}>
<>
<p>This reminder will be permanently deleted. Are you sure?</p>
<br></br>
<div class="has-text-centered">
<button
class="button is-danger"
onClick={() => {
mutation.mutate(reminder);
}}
disabled={mutation.isLoading}
>
Delete
</button>
<button
class="button is-light close-modal"
onClick={() => {
setModalOpen(false);
}}
>
Cancel
</button>
</div>
</>
</Modal>
);
};

88
src/components/Reminder/ButtonRow/EditButtonRow.tsx Normal file
View File

@ -0,0 +1,88 @@
import { useRef, useState } from "preact/hooks";
import { useMutation, useQueryClient } from "react-query";
import { patchGuildReminder } from "../../../api";
import { useParams } from "wouter";
import { ICON_FLASH_TIME } from "../../../consts";
import { DeleteButton } from "./DeleteButton";
import { useReminder } from "../ReminderContext";
import { useFlash } from "../../App/FlashContext";
export const EditButtonRow = () => {
const { guild } = useParams();
const [reminder, setReminder] = useReminder();
const [recentlySaved, setRecentlySaved] = useState(false);
const queryClient = useQueryClient();
const iconFlashTimeout = useRef(0);
const flash = useFlash();
const mutation = useMutation({
...patchGuildReminder(guild),
onSuccess: (response) => {
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
if (iconFlashTimeout.current !== null) {
clearTimeout(iconFlashTimeout.current);
}
if (response.data.errors.length > 0) {
setRecentlySaved(false);
for (const error of response.data.errors) {
flash({ message: error, type: "error" });
}
} else {
setRecentlySaved(true);
iconFlashTimeout.current = setTimeout(() => {
setRecentlySaved(false);
}, ICON_FLASH_TIME);
setReminder(response.data.reminder);
}
},
});
return (
<div class="button-row-edit">
<button
class="button is-success save-btn"
onClick={() => {
mutation.mutate(reminder);
}}
disabled={mutation.isLoading}
>
<span>Save</span>{" "}
{mutation.isLoading ? (
<span class="icon">
<i class="fas fa-spin fa-cog"></i>
</span>
) : recentlySaved ? (
<span class="icon">
<i class="fas fa-check"></i>
</span>
) : (
<span class="icon">
<i class="fas fa-save"></i>
</span>
)}
</button>
<button
class="button is-warning"
onClick={() => {
mutation.mutate({
...reminder,
enabled: !reminder.enabled,
});
}}
disabled={mutation.isLoading}
>
{reminder.enabled ? "Disable" : "Enable"}
</button>
<DeleteButton />
</div>
);
};

32
src/components/Reminder/ChannelSelector.tsx Normal file
View File

@ -0,0 +1,32 @@
import { useQuery } from "react-query";
import { useParams } from "wouter";
import { fetchGuildChannels } from "../../api";
export const ChannelSelector = ({ channel, setChannel }) => {
const { guild } = useParams();
const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
return (
<div class="control has-icons-left">
<div class="select">
<select
name="channel"
class="channel-selector"
onInput={(ev) => {
setChannel(ev.currentTarget.value);
}}
>
{isSuccess &&
data.map((c) => (
<option value={c.id} selected={c.id === channel}>
{c.name}
</option>
))}
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
);
};

25
src/components/Reminder/Content.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useReminder } from "./ReminderContext";
export const Content = () => {
const [reminder, setReminder] = useReminder();
return (
<>
<label class="is-sr-only">Content</label>
<textarea
class="message-input autoresize discord-content"
placeholder="Content..."
maxlength={2000}
name="content"
rows={1}
value={reminder.content}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
content: ev.currentTarget.value,
}));
}}
></textarea>
</>
);
};

74
src/components/Reminder/CreateReminder.tsx Normal file
View File

@ -0,0 +1,74 @@
import { useState } from "preact/hooks";
import { fetchGuildChannels, Reminder } from "../../api";
import { DateTime } from "luxon";
import { CreateButtonRow } from "./ButtonRow/CreateButtonRow";
import { TopBar } from "./TopBar";
import { Message } from "./Message";
import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext";
import { useQuery } from "react-query";
import { useParams } from "wouter";
function defaultReminder(): Reminder {
return {
attachment: null,
attachment_name: null,
avatar: null,
channel: null,
content: "",
embed_author: "",
embed_author_url: null,
embed_color: 0,
embed_description: "",
embed_fields: [],
embed_footer: "",
embed_footer_url: null,
embed_image_url: null,
embed_thumbnail_url: null,
embed_title: "",
enabled: true,
expires: null,
interval_days: null,
interval_months: null,
interval_seconds: null,
name: "",
restartable: false,
tts: false,
uid: "",
username: "",
utc_time: DateTime.now(),
};
}
export const CreateReminder = () => {
const { guild } = useParams();
const [reminder, setReminder] = useState(defaultReminder());
const [collapsed, setCollapsed] = useState(false);
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
if (isSuccess && reminder.channel === null) {
setReminder((reminder) => ({
...reminder,
channel: reminder.channel || guildChannels[0].id,
}));
}
return (
<ReminderContext.Provider value={[reminder, setReminder]}>
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
<TopBar
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
/>
<div class="columns reminder-settings">
<Message />
<Settings />
</div>
<CreateButtonRow />
</div>
</ReminderContext.Provider>
);
};

45
src/components/Reminder/EditReminder.tsx Normal file
View File

@ -0,0 +1,45 @@
import { Reminder } from "../../api";
import { useEffect, useState } from "preact/hooks";
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
import { Message } from "./Message";
import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext";
import { TopBar } from "./TopBar";
type Props = {
reminder: Reminder;
globalCollapse: boolean;
};
export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Props) => {
const [propReminder, setPropReminder] = useState(initialReminder);
const [reminder, setReminder] = useState(initialReminder);
const [collapsed, setCollapsed] = useState(false);
useEffect(() => {
setCollapsed(globalCollapse);
}, [globalCollapse]);
// Reminder updated from web response
if (propReminder !== initialReminder) {
setReminder(initialReminder);
setPropReminder(initialReminder);
}
return (
<ReminderContext.Provider value={[reminder, setReminder]}>
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
<TopBar
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
/>
<div class="columns reminder-settings">
<Message />
<Settings />
</div>
<EditButtonRow />
</div>
</ReminderContext.Provider>
);
};

50
src/components/Reminder/Embed/Author.tsx Normal file
View File

@ -0,0 +1,50 @@
import { ImagePicker } from "../ImagePicker";
import { Reminder } from "../../../api";
type Props = {
name: string;
icon: string;
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
export const Author = ({ name, icon, setReminder }: Props) => {
return (
<div class="embed-author-box">
<div class="a">
<p class="image is-24x24 customizable">
<ImagePicker
class="is-rounded embed_author_url"
url={icon}
alt="Image for embed author"
setImage={(url) => {
setReminder((reminder) => ({
...reminder,
embed_author_url: url,
}));
}}
></ImagePicker>
</p>
</div>
<div class="b">
<label class="is-sr-only" for="embedAuthor">
Embed Author
</label>
<textarea
class="discord-embed-author message-input autoresize"
placeholder="Embed Author..."
rows={1}
maxlength={256}
name="embed_author"
value={name}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_author: ev.currentTarget.value,
}));
}}
></textarea>
</div>
</div>
);
};

68
src/components/Reminder/Embed/Color.tsx Normal file
View File

@ -0,0 +1,68 @@
import { useState } from "preact/hooks";
import { HexColorPicker } from "react-colorful";
import { Modal } from "../../Modal";
import { Reminder } from "../../../api";
type Props = {
color: string;
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
function colorToInt(hex: string) {
return parseInt(hex.substring(1), 16);
}
export const Color = ({ color, setReminder }: Props) => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
{modalOpen && (
<ColorModal
color={color}
setModalOpen={setModalOpen}
setReminder={setReminder}
></ColorModal>
)}
<button
class="change-color button is-rounded is-small"
onClick={() => {
setModalOpen(true);
}}
>
<span class="is-sr-only">Choose embed color</span>
<i class="fas fa-eye-dropper"></i>
</button>
</>
);
};
const ColorModal = ({ setModalOpen, color, setReminder }) => {
return (
<Modal setModalOpen={setModalOpen} title={"Select Color"}>
<div class="colorpicker-container">
<HexColorPicker
color={color}
onInput={(color) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(color),
}));
}}
></HexColorPicker>
</div>
<br></br>
<input
class="input"
id="colorInput"
value={color}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(ev.currentTarget.value),
}));
}}
></input>
</Modal>
);
};

5
src/components/EditReminder/Embed/Description.tsx → src/components/Reminder/Embed/Description.tsx
View File

@ -1,4 +1,4 @@
export const Description = ({ description }) => ( export const Description = ({ description, onInput }) => (
<> <>
<label class="is-sr-only" for="embedDescription"> <label class="is-sr-only" for="embedDescription">
Embed Description Embed Description
@ -10,6 +10,9 @@ export const Description = ({ description }) => (
name="embed_description" name="embed_description"
rows={1} rows={1}
value={description} value={description}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea> ></textarea>
</> </>
); );

57
src/components/Reminder/Embed/Fields/Field.tsx Normal file
View File

@ -0,0 +1,57 @@
export const Field = ({ title, value, inline, index, onUpdate }) => {
return (
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
<label class="is-sr-only" for="embedFieldTitle">
Field Title
</label>
<div class="is-flex">
<textarea
class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..."
rows={1}
maxlength={256}
name="embed_field_title[]"
value={title}
onInput={(ev) =>
onUpdate({
index,
title: ev.currentTarget.value,
})
}
/>
{(value !== "" || title !== "") && (
<button
class="button is-small inline-btn"
onClick={() => {
onUpdate({
index,
inline: !inline,
});
}}
>
<span class="is-sr-only">Toggle field inline</span>
<i class="fas fa-arrows-h"></i>
</button>
)}
</div>
<label class="is-sr-only" for="embedFieldValue">
Field Value
</label>
<textarea
class="discord-field-value field-input message-input autoresize "
placeholder="Field Value..."
maxlength={1024}
name="embed_field_value[]"
rows={1}
value={value}
onInput={(ev) =>
onUpdate({
index,
value: ev.currentTarget.value,
})
}
></textarea>
</div>
);
};

37
src/components/Reminder/Embed/Fields/index.tsx Normal file
View File

@ -0,0 +1,37 @@
import { useReminder } from "../../ReminderContext";
import { Field } from "./Field";
export const Fields = () => {
const [{ embed_fields }, setReminder] = useReminder();
return (
<div class={"embed-multifield-box"}>
{[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
<Field
{...field}
index={index}
onUpdate={({ index, ...props }) => {
setReminder((reminder) => ({
...reminder,
embed_fields: [
...reminder.embed_fields,
{ value: "", title: "", inline: true },
]
.map((f, i) => {
if (i === index) {
return {
...f,
...props,
};
} else {
return f;
}
})
.filter((f) => f.value || f.title),
}));
}}
></Field>
))}
</div>
);
};

43
src/components/Reminder/Embed/Footer.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
type Props = {
footer: string;
icon: string;
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
export const Footer = ({ footer, icon, setReminder }: Props) => (
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<ImagePicker
class="is-rounded embed_footer_url"
url={icon}
alt="Footer profile-like image"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
embed_footer_url: url,
}));
}}
></ImagePicker>
</p>
<label class="is-sr-only" for="embedFooter">
Embed Footer text
</label>
<textarea
class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength={2048}
name="embed_footer"
rows={1}
value={footer}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_footer: ev.currentTarget.value,
}));
}}
></textarea>
</div>
);

5
src/components/EditReminder/Embed/Title.tsx → src/components/Reminder/Embed/Title.tsx
View File

@ -1,4 +1,4 @@
export const Title = ({ title }) => ( export const Title = ({ title, onInput }) => (
<> <>
<label class="is-sr-only" for="embedTitle"> <label class="is-sr-only" for="embedTitle">
Embed Title Embed Title
@ -10,6 +10,9 @@ export const Title = ({ title }) => (
rows={1} rows={1}
name="embed_title" name="embed_title"
value={title} value={title}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea> ></textarea>
</> </>
); );

90
src/components/Reminder/Embed/index.tsx Normal file
View File

@ -0,0 +1,90 @@
import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";
import { Footer } from "./Footer";
import { Color } from "./Color";
import { Fields } from "./Fields";
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
import { useReminder } from "../ReminderContext";
function intToColor(num: number) {
return `#${num.toString(16).padStart(6, "0")}`;
}
const DEFAULT_COLOR = 9418359;
export const Embed = () => {
const [reminder, setReminder] = useReminder();
return (
<div
class="discord-embed"
style={{
borderLeftColor: intToColor(reminder.embed_color || DEFAULT_COLOR),
}}
>
<div class="embed-body">
<Color
color={intToColor(reminder.embed_color || DEFAULT_COLOR)}
setReminder={setReminder}
></Color>
<div class="a">
<Author
name={reminder.embed_author}
icon={reminder.embed_author_url}
setReminder={setReminder}
></Author>
<Title
title={reminder.embed_title}
onInput={(title: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_title: title,
}))
}
></Title>
<br></br>
<Description
description={reminder.embed_description}
onInput={(description: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_description: description,
}))
}
/>
<br />
<Fields />
</div>
<div class="b">
<p class="image thumbnail customizable">
<ImagePicker
class="embed_thumbnail_url"
url={reminder.embed_thumbnail_url}
alt="Square thumbnail embedded image"
setImage={() => {}}
/>
</p>
</div>
</div>
<p class="image is-400x300 customizable">
<ImagePicker
class="embed_image_url"
url={reminder.embed_image_url}
alt="Large embedded image"
setImage={() => {}}
/>
</p>
<Footer
footer={reminder.embed_footer}
icon={reminder.embed_footer_url}
setReminder={setReminder}
/>
</div>
);
};

49
src/components/Reminder/ImagePicker.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Modal } from "../Modal";
import { useState } from "preact/hooks";
export const ImagePicker = ({ alt, url, setImage, ...props }) => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
onClick={() => {
setModalOpen(true);
}}
role={"button"}
>
<img {...props} src={url || "/static/img/bg.webp"} alt={alt}></img>
</a>
{modalOpen && (
<ImagePickerModal
setModalOpen={setModalOpen}
setImage={setImage}
></ImagePickerModal>
)}
</>
);
};
const ImagePickerModal = ({ setModalOpen, setImage }) => {
const [value, setValue] = useState("");
return (
<Modal
setModalOpen={setModalOpen}
title={"Enter Image URL"}
onSubmit={() => {
setImage(value);
}}
onSubmitText={"Save"}
>
<input
class="input"
id="urlInput"
placeholder="Image URL..."
onInput={(ev) => {
setValue(ev.currentTarget.value);
}}
></input>
</Modal>
);
};

80
src/components/EditReminder/IntervalSelector.tsx → src/components/Reminder/IntervalSelector.tsx
View File

@ -1,4 +1,5 @@
import { useState } from "preact/hooks"; import { useCallback, useEffect, useState } from "preact/hooks";
import { useReminder } from "./ReminderContext";
function divmod(a: number, b: number) { function divmod(a: number, b: number) {
return [Math.floor(a / b), a % b]; return [Math.floor(a / b), a % b];
@ -13,16 +14,41 @@ function secondsToHMS(seconds: number) {
return [hours, minutes, seconds]; return [hours, minutes, seconds];
} }
export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: secondsProp }) => { export const IntervalSelector = ({
months: monthsProp,
days: daysProp,
seconds: secondsProp,
setInterval,
clearInterval,
}) => {
const [months, setMonths] = useState(monthsProp); const [months, setMonths] = useState(monthsProp);
const [days, setDays] = useState(daysProp); const [days, setDays] = useState(daysProp);
const [seconds, setSeconds] = useState(secondsProp);
let [hours, minutes, secondsRem] = [0, 0, 0]; let [_hours, _minutes, _seconds] = [0, 0, 0];
if (seconds !== null) { if (secondsProp !== null) {
[hours, minutes, secondsRem] = secondsToHMS(seconds); [_hours, _minutes, _seconds] = secondsToHMS(secondsProp);
} }
const [seconds, setSeconds] = useState(_seconds);
const [minutes, setMinutes] = useState(_minutes);
const [hours, setHours] = useState(_hours);
useEffect(() => {
if (seconds || minutes || hours || days || months) {
setInterval({
seconds: (seconds || 0) + (minutes || 0) * 60 + (hours || 0) * 3600,
days: days || 0,
months: months || 0,
});
} else {
clearInterval();
}
}, [seconds, minutes, hours, days, months]);
const placeholder = useCallback(() => {
return seconds || minutes || hours || days || months ? "0" : "";
}, [seconds, minutes, hours, days, months]);
return ( return (
<div class="control intervalSelector"> <div class="control intervalSelector">
<div class="input interval-group"> <div class="input interval-group">
@ -37,7 +63,13 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
name="interval_months" name="interval_months"
maxlength={2} maxlength={2}
placeholder="" placeholder=""
value={months || ""} value={months || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setMonths(parseInt(ev.currentTarget.value));
}
}}
></input>{" "} ></input>{" "}
<span class="half-rem"></span> months, <span class="half-rem"></span> <span class="half-rem"></span> months, <span class="half-rem"></span>
</label> </label>
@ -50,7 +82,13 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
name="interval_days" name="interval_days"
maxlength={4} maxlength={4}
placeholder="" placeholder=""
value={days || ""} value={days || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setDays(parseInt(ev.currentTarget.value));
}
}}
></input>{" "} ></input>{" "}
<span class="half-rem"></span> days, <span class="half-rem"></span> <span class="half-rem"></span> days, <span class="half-rem"></span>
</label> </label>
@ -65,7 +103,13 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
name="interval_hours" name="interval_hours"
maxlength={2} maxlength={2}
placeholder="HH" placeholder="HH"
value={hours || ""} value={hours || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setHours(parseInt(ev.currentTarget.value));
}
}}
></input> ></input>
: :
</label> </label>
@ -78,7 +122,13 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
name="interval_minutes" name="interval_minutes"
maxlength={2} maxlength={2}
placeholder="MM" placeholder="MM"
value={minutes || ""} value={minutes || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setMinutes(parseInt(ev.currentTarget.value));
}
}}
></input> ></input>
: :
</label> </label>
@ -91,7 +141,13 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
name="interval_seconds" name="interval_seconds"
maxlength={2} maxlength={2}
placeholder="SS" placeholder="SS"
value={secondsRem || ""} value={seconds || placeholder()}
onInput={(ev) => {
const value = ev.currentTarget.value;
if (value && !isNaN(parseInt(value))) {
setSeconds(parseInt(ev.currentTarget.value));
}
}}
></input> ></input>
</label> </label>
</span> </span>
@ -102,6 +158,8 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
setMonths(0); setMonths(0);
setDays(0); setDays(0);
setSeconds(0); setSeconds(0);
setMinutes(0);
setHours(0);
}} }}
> >
<span class="is-sr-only">Clear interval</span> <span class="is-sr-only">Clear interval</span>

114
src/components/Reminder/LoadTemplate.tsx Normal file
View File

@ -0,0 +1,114 @@
import { useState } from "preact/hooks";
import { Modal } from "../Modal";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
import { useParams } from "wouter";
import { useReminder } from "./ReminderContext";
import { useFlash } from "../App/FlashContext";
import { ICON_FLASH_TIME } from "../../consts";
export const LoadTemplate = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<div>
<button
class="button is-outlined show-modal is-pulled-right"
onClick={() => {
setModalOpen(true);
}}
>
Load Template
</button>
{modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
</div>
);
};
const LoadTemplateModal = ({ setModalOpen }) => {
const { guild } = useParams();
const [reminder, setReminder] = useReminder();
const [selected, setSelected] = useState(null);
const flash = useFlash();
const queryClient = useQueryClient();
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
const mutation = useMutation({
...deleteGuildTemplate(guild),
onSuccess: () => {
flash({ message: "Template deleted", type: "success" });
queryClient.invalidateQueries({
queryKey: ["GUILD_TEMPLATES", guild],
});
},
});
return (
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select
id="templateSelect"
onChange={(ev) => {
setSelected(ev.currentTarget.value);
}}
disabled={mutation.isLoading}
>
<option disabled={true} selected={true}>
Choose template...
</option>
{isSuccess &&
templates.map((template) => (
<option value={template.id}>{template.name}</option>
))}
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-file-spreadsheet"></i>
</div>
</div>
<br></br>
<div class="has-text-centered">
<button
class="button is-success close-modal"
id="load-template"
style={{ margin: "2px" }}
onClick={() => {
const template = templates.find(
(template) => template.id.toString() === selected,
);
setReminder((reminder) => ({
...reminder,
...template,
// drop the template's ID
id: undefined,
}));
flash({ message: "Template loaded", type: "success" });
setModalOpen(false);
}}
disabled={mutation.isLoading}
>
Load Template
</button>
<button
class="button is-danger"
id="delete-template"
style={{ margin: "2px" }}
onClick={() => {
const template = templates.find(
(template) => template.id.toString() === selected,
);
mutation.mutate(template);
}}
disabled={mutation.isLoading}
>
Delete
</button>
</div>
</Modal>
);
};

38
src/components/Reminder/Message.tsx Normal file
View File

@ -0,0 +1,38 @@
import { ImagePicker } from "./ImagePicker";
import { Username } from "./Username";
import { Content } from "./Content";
import { Embed } from "./Embed";
import { useReminder } from "./ReminderContext";
export const Message = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="column discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32 customizable">
<ImagePicker
class="is-rounded avatar"
url={reminder.avatar || "/static/img/icon.png"}
alt="Image for discord avatar"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
avatar: url,
}));
}}
></ImagePicker>
</p>
</figure>
<div class="media-content">
<div class="content">
<Username />
<Content />
<Embed />
</div>
</div>
</article>
</div>
);
};

29
src/components/Reminder/Name.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useReminder } from "./ReminderContext";
export const Name = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="name-bar">
<div class="field">
<div class="control">
<label class="label sr-only">Reminder Name</label>
<input
class="input"
type="text"
name="name"
placeholder="Reminder Name"
maxlength={100}
value={reminder.name}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
name: ev.currentTarget.value,
}));
}}
></input>
</div>
</div>
</div>
);
};

9
src/components/Reminder/ReminderContext.tsx Normal file
View File

@ -0,0 +1,9 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { Reminder } from "../../api";
export const ReminderContext = createContext<
[Reminder, (r: (reminder: Reminder) => Reminder) => void]
>([null, () => {}]);
export const useReminder = () => useContext(ReminderContext);

126
src/components/Reminder/Settings.tsx Normal file
View File

@ -0,0 +1,126 @@
import { ChannelSelector } from "./ChannelSelector";
import { DateTime } from "luxon";
import { IntervalSelector } from "./IntervalSelector";
import { useQuery } from "react-query";
import { fetchUserInfo } from "../../api";
import { useReminder } from "./ReminderContext";
import { Attachment } from "./Attachment";
import { TTS } from "./TTS";
import { useTimezone } from "../App/TimezoneProvider";
import { TimeInput } from "./TimeInput";
export const Settings = () => {
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
const [reminder, setReminder] = useReminder();
const [timezone] = useTimezone();
if (!userFetched) {
return <></>;
}
return (
<div class="column settings">
<div class="field channel-field">
<div class="collapses">
<label class="label" for="channelOption">
Channel*
</label>
</div>
<ChannelSelector
channel={reminder.channel}
setChannel={(channel: string) => {
setReminder((reminder) => ({
...reminder,
channel: channel,
}));
}}
/>
</div>
<div class="field">
<div class="control">
<label class="label collapses">
Time*
<TimeInput
defaultValue={reminder.utc_time}
onInput={(time: DateTime) => {
setReminder((reminder) => ({
...reminder,
utc_time: time,
}));
}}
/>
</label>
</div>
</div>
<div class="collapses split-controls">
<div>
<div class={userInfo.patreon ? "patreon-only" : "patreon-only is-locked"}>
<div class="patreon-invert foreground">
Intervals available on <a href="https://patreon.com/jellywx">Patreon</a>{" "}
or{" "}
<a href="https://gitea.jellypro.xyz/jude/reminder-bot">self-hosting</a>
</div>
<div class="field">
<label class="label">
Interval{" "}
<a class="foreground" href="/help/intervals">
<i class="fas fa-question-circle"></i>
</a>
</label>
<IntervalSelector
months={reminder.interval_months}
days={reminder.interval_days}
seconds={reminder.interval_seconds}
setInterval={({ seconds, days, months }) => {
setReminder((reminder) => ({
...reminder,
interval_months: months,
interval_days: days,
interval_seconds: seconds,
}));
}}
clearInterval={() => {
setReminder((reminder) => ({
...reminder,
interval_months: null,
interval_days: null,
interval_seconds: null,
}));
}}
></IntervalSelector>
</div>
<div class="field">
<div class="control">
<label class="label">
Expiration
<TimeInput
defaultValue={reminder.expires}
onInput={(time: DateTime) => {
setReminder((reminder) => ({
...reminder,
expires: time,
}));
}}
/>
</label>
</div>
</div>
</div>
<div class="columns is-mobile tts-row">
<div class="column has-text-centered">
<TTS />
</div>
<div class="column has-text-centered">
<Attachment />
</div>
</div>
</div>
</div>
</div>
);
};

24
src/components/Reminder/TTS.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useReminder } from "./ReminderContext";
export const TTS = () => {
const [{ tts }, setReminder] = useReminder();
return (
<div class="is-boxed">
<label class="label">
Enable TTS{" "}
<input
type="checkbox"
name="tts"
checked={tts}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
tts: ev.currentTarget.checked,
}));
}}
></input>
</label>
</div>
);
};

208
src/components/Reminder/TimeInput.tsx Normal file
View File

@ -0,0 +1,208 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { DateTime } from "luxon";
import { useFlash } from "../App/FlashContext";
export const TimeInput = ({ defaultValue, onInput }) => {
const ref = useRef(null);
const [time, setTime] = useState(defaultValue);
useEffect(() => {
onInput(time);
}, [time]);
const flash = useFlash();
return (
<>
<div
class={"input"}
onPaste={(ev) => {
ev.preventDefault();
const pasteValue = ev.clipboardData.getData("text/plain");
let dt = DateTime.fromISO(pasteValue);
if (dt.isValid) {
setTime(dt);
return;
}
dt = DateTime.fromSQL(pasteValue);
if (dt.isValid) {
setTime(dt);
return;
}
flash({
message: `Couldn't parse your clipboard data as a valid date-time`,
type: "error",
});
}}
>
<div style={{ flexGrow: "1" }}>
<label>
<span class="is-sr-only">Years input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(4ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={4}
placeholder="YYYY"
value={time?.year.toLocaleString("en-US", {
minimumIntegerDigits: 4,
useGrouping: false,
})}
onBlur={(ev) => {
setTime(time.set({ year: ev.currentTarget.value }));
}}
></input>{" "}
</label>
-
<label>
<span class="is-sr-only">Months input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="MM"
value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ month: ev.currentTarget.value }));
}}
></input>{" "}
</label>
-
<label>
<span class="is-sr-only">Days input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="DD"
value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ day: ev.currentTarget.value }));
}}
></input>{" "}
</label>
<label style={{ marginLeft: "8px" }}>
<span class="is-sr-only">Hours input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="hh"
value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ hour: ev.currentTarget.value }));
}}
></input>{" "}
</label>
:
<label>
<span class="is-sr-only">Minutes input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="mm"
value={time?.minute.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})}
onBlur={(ev) => {
setTime(time.set({ minute: ev.currentTarget.value }));
}}
></input>{" "}
</label>
:
<label>
<span class="is-sr-only">Seconds input</span>
<input
style={{
borderStyle: "none",
fontFamily: "monospace",
width: "calc(2ch + 4px)",
fontSize: "1rem",
}}
type="text"
pattern="\d*"
maxlength={2}
placeholder="ss"
value={time?.second.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})}
onBlur={(ev) => {
setTime(time.set({ second: ev.currentTarget.value }));
}}
></input>{" "}
</label>
</div>
<button
style={{
background: "none",
border: "none",
padding: "1px",
marginRight: "-3px",
}}
onClick={() => {
ref.current.showPicker();
}}
>
<span class="is-sr-only">Show time picker</span>
<span class="icon">
<i class="fas fa-calendar"></i>
</span>
</button>
</div>
<input
style={{
position: "absolute",
left: 0,
visibility: "hidden",
}}
class={"input"}
type="datetime-local"
step="1"
value={
time
? time.toFormat("yyyy-LL-dd'T'HH:mm:ss")
: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")
}
ref={ref}
onInput={(ev) => {
setTime(DateTime.fromISO(ev.currentTarget.value));
}}
></input>
</>
);
};

30
src/components/Reminder/TopBar.tsx Normal file
View File

@ -0,0 +1,30 @@
import { useReminder } from "./ReminderContext";
import { Name } from "./Name";
import { fetchGuildChannels, Reminder } from "../../api";
import { useQuery } from "react-query";
import { useParams } from "wouter";
export const TopBar = ({ toggleCollapsed }) => {
const { guild } = useParams();
const [reminder] = useReminder();
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
const channelName = (reminder: Reminder) => {
const channel = guildChannels.find((c) => c.id === reminder.channel);
return channel === undefined ? "" : channel.name;
};
return (
<div class="columns is-mobile column reminder-topbar">
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
<Name />
<div class="hide-button-bar">
<button class="button hide-box" onClick={toggleCollapsed}>
<span class="is-sr-only">Hide reminder</span>
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
);
};

24
src/components/Reminder/Username.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useReminder } from "./ReminderContext";
export const Username = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="discord-message-header">
<label class="is-sr-only">Username Override</label>
<input
class="discord-username message-input"
placeholder="Username Override"
maxlength={32}
name="username"
value={reminder.username || "Reminder"}
onBlur={(ev) => {
setReminder((reminder) => ({
...reminder,
username: ev.currentTarget.value,
}));
}}
></input>
</div>
);
};

49
src/components/Sidebar/MobileSidebar.tsx
View File

@ -1,7 +1,54 @@
import { useState } from "preact/hooks";
export const MobileSidebar = ({ children }) => { export const MobileSidebar = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
return ( return (
<div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar"> <>
<nav
class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
role="navigation"
aria-label="main navigation"
>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<figure class="image">
<img
width="28px"
height="28px"
src="/static/img/logo_nobg.webp"
alt="Reminder Bot Logo"
/>
</figure>
</a>
<p class="navbar-item pageTitle"></p>
<a
role="button"
class="dashboard-burger navbar-burger is-right"
aria-label="menu"
aria-expanded="false"
data-target="mobileSidebar"
onClick={() => {
setSidebarOpen(!sidebarOpen);
}}
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<div
class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
id="mobileSidebar"
style={{
display: sidebarOpen ? "block" : "none",
}}
>
{children} {children}
</div> </div>
</>
); );
}; };

26
src/components/Sidebar/index.tsx
View File

@ -5,7 +5,7 @@ import { Brand } from "./Brand";
import { Wave } from "./Wave"; import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry"; import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api"; import { fetchUserGuilds, GuildInfo } from "../../api";
import { QueryKeys } from "../../consts"; import { TimezonePicker } from "../TimezonePicker";
type ContentProps = { type ContentProps = {
guilds: GuildInfo[]; guilds: GuildInfo[];
@ -17,9 +17,9 @@ const SidebarContent = ({ guilds }: ContentProps) => {
return ( return (
<> <>
<a href="/"> <a href="/">
<Brand></Brand> <Brand />
</a> </a>
<Wave></Wave> <Wave />
<aside class="menu"> <aside class="menu">
<p class="menu-label">Servers</p> <p class="menu-label">Servers</p>
<ul class="menu-list guildList">{guildEntries}</ul> <ul class="menu-list guildList">{guildEntries}</ul>
@ -27,18 +27,8 @@ const SidebarContent = ({ guilds }: ContentProps) => {
<p class="menu-label">Options</p> <p class="menu-label">Options</p>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a class="show-modal" data-modal="dataManagerModal"> <div id="bottom-sidebar"></div>
<span class="icon"> <TimezonePicker />
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
<a class="show-modal" data-modal="chooseTimezoneModal">
<span class="icon">
<i class="fas fa-map-marked"></i>
</span>{" "}
Timezone
</a>
<a href="/login/discord/logout"> <a href="/login/discord/logout">
<span class="icon"> <span class="icon">
<i class="fas fa-sign-out"></i> <i class="fas fa-sign-out"></i>
@ -60,11 +50,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
}; };
export const Sidebar = () => { export const Sidebar = () => {
const { status, data } = useQuery({ const { status, data } = useQuery(fetchUserGuilds());
queryKey: [QueryKeys.USER_GUILDS],
queryFn: fetchUserGuilds,
staleTime: Infinity,
});
let content = <SidebarContent guilds={[]}></SidebarContent>; let content = <SidebarContent guilds={[]}></SidebarContent>;
if (status === "success") { if (status === "success") {

113
src/components/TimezonePicker/index.tsx
View File

@ -1,7 +1,9 @@
import { DateTime } from "luxon"; import { DateTime, SystemZone } from "luxon";
import { useQuery } from "react-query"; import { useMutation, useQuery, useQueryClient } from "react-query";
import { QueryKeys } from "../../consts"; import { fetchUserInfo, patchUserInfo } from "../../api";
import { fetchUserInfo } from "../../api"; import { Modal } from "../Modal";
import { useState } from "preact/hooks";
import { useTimezone } from "../App/TimezoneProvider";
type DisplayProps = { type DisplayProps = {
timezone: string; timezone: string;
@ -27,73 +29,106 @@ const TimezoneDisplay = ({ timezone }: DisplayProps) => {
); );
}; };
const TimezonePicker = () => { export const TimezonePicker = () => {
const browserTimezone = DateTime.now().zone.name; const [modalOpen, setModalOpen] = useState(false);
const { isLoading, isError, data } = useQuery({ return (
queryKey: QueryKeys.USER_DATA, <>
queryFn: fetchUserInfo, <a
class="show-modal"
data-modal="chooseTimezoneModal"
onClick={() => {
setModalOpen(true);
}}
>
<span class="icon">
<i class="fas fa-map-marked"></i>
</span>{" "}
Timezone
</a>
{modalOpen && <TimezoneModal setModalOpen={setModalOpen} />}
</>
);
};
const TimezoneModal = ({ setModalOpen }) => {
const browserTimezone = DateTime.now().zoneName;
const [selectedZone, setSelectedZone] = useTimezone();
const queryClient = useQueryClient();
const { isLoading, isError, data } = useQuery(fetchUserInfo());
const userInfoMutation = useMutation({
...patchUserInfo(),
onSuccess: () => {
queryClient.invalidateQueries(["USER_INFO"]);
},
}); });
return ( return (
<div class="modal" id="chooseTimezoneModal"> <Modal title={"Timezone"} setModalOpen={setModalOpen}>
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="urlInput">
Update Timezone{" "}
<a href="/help/timezone">
<span>
<i class="fa fa-question-circle"></i>
</span>
</a>
</label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p> <p>
Your configured timezone is:{" "} Your configured timezone is:{" "}
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay> <TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
<br></br> <br />
<br></br>
Your browser timezone is:{" "} Your browser timezone is:{" "}
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay> <TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
<br></br> <br />
{!isError && ( {!isError && (
<> <>
Your bot timezone is:{" "} Your bot timezone is:{" "}
{isLoading ? ( {isLoading ? (
<i className="fas fa-cog fa-spin"></i> <i className="fas fa-cog fa-spin"></i>
) : ( ) : (
<TimezoneDisplay <TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
timezone={data.timezone || "UTC"}
></TimezoneDisplay>
)} )}
</> </>
)} )}
</p> </p>
<br></br> <br></br>
<div class="has-text-centered"> <div class="has-text-centered">
<button class="button is-success close-modal" id="set-browser-timezone"> <button
class="button is-success"
style={{
margin: "2px",
}}
id="set-browser-timezone"
onClick={() => {
setSelectedZone(browserTimezone);
}}
>
<span>Use Browser Timezone</span>{" "} <span>Use Browser Timezone</span>{" "}
<span class="icon"> <span class="icon">
<i class="fab fa-firefox-browser"></i> <i class="fab fa-firefox-browser"></i>
</span> </span>
</button> </button>
<button class="button is-link close-modal" id="set-bot-timezone"> <button
class="button is-success"
id="set-bot-timezone"
style={{
margin: "2px",
}}
onClick={() => {
setSelectedZone(data.timezone);
}}
>
<span>Use Bot Timezone</span>{" "} <span>Use Bot Timezone</span>{" "}
<span class="icon"> <span class="icon">
<i class="fab fa-discord"></i> <i class="fab fa-discord"></i>
</span> </span>
</button> </button>
<button class="button is-warning close-modal" id="update-bot-timezone"> <button
class="button is-warning"
id="update-bot-timezone"
style={{
margin: "2px",
}}
onClick={() => {
userInfoMutation.mutate(browserTimezone);
}}
>
Set Bot Timezone Set Bot Timezone
</button> </button>
</div> </div>
</section> </Modal>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
); );
}; };

8
src/consts.ts
View File

@ -1,6 +1,2 @@
export enum QueryKeys { export const ICON_FLASH_TIME = 2_500;
USER_DATA = "userData", export const MESSAGE_FLASH_TIME = 5_000;
USER_GUILDS = "userGuilds",
GUILD_REMINDERS = "guildReminders",
GUILD_CHANNELS = "guildChannels",
}

1
vite.config.ts
View File

@ -7,5 +7,6 @@ export default defineConfig({
build: { build: {
assetsDir: "static/assets", assetsDir: "static/assets",
sourcemap: true, sourcemap: true,
copyPublicDir: false,
}, },
}); });