style(format): format all files using Prettier

senar-ai · Jun 12, 2022 · be60ba4 · be60ba4
1 parent e1e16f8
commit be60ba4
Show file tree

Hide file tree

Showing 24 changed files with 428 additions and 159 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -3,7 +3,7 @@ on:
   push:
     branches: [main]
   schedule:
-    - cron: "0 9 * * *"
+    - cron: '0 9 * * *'
 
 jobs:
   deploy:
@@ -30,13 +30,13 @@ jobs:
 
       - name: 📂 Make deno dir
         run: mkdir -p ./deno
-      
+
       - name: 📝 Copy Remix build files into output dir
         run: cp -R ./{build,public} ./deno
 
       - name: 🚛 Deploy to Deno Deploy
         uses: denoland/deployctl@v1
         with:
           project: senarai # the name of the project on Deno Deploy
-          entrypoint: "./build/index.js" # the entrypoint to deploy
-          root: "./deno" # the root directory of the build assets
+          entrypoint: './build/index.js' # the entrypoint to deploy
+          root: './deno' # the root directory of the build assets
diff --git a/.prettierignore b/.prettierignore
@@ -9,3 +9,6 @@ public/build
 
 # Next.js
 .next/
+
+# Senarai Data
+app/data/*.json
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,5 +1,3 @@
 {
-  "recommendations": [
-    "denoland.vscode-deno"
-  ]
-}
+  "recommendations": ["denoland.vscode-deno"]
+}
diff --git a/README.md b/README.md
@@ -12,20 +12,29 @@ npx create-remix@latest --template deno
 
 ## Managing dependencies
 
-Read about [how we recommend to manage dependencies for Remix projects using Deno](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md).
+Read about
+[how we recommend to manage dependencies for Remix projects using Deno](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md).
 
 - ✅ You should use `npm` to install NPM packages
+
   ```sh
   npm install react
   ```
+
   ```ts
   import { useState } from 'react'
   ```
-- ✅ You may use inlined URL imports or [deps.ts](https://deno.land/manual/examples/manage_dependencies#managing-dependencies) for Deno modules.
+
+- ✅ You may use inlined URL imports or
+  [deps.ts](https://deno.land/manual/examples/manage_dependencies#managing-dependencies)
+  for Deno modules.
+
   ```ts
   import { copy } from 'https://deno.land/[email protected]/streams/conversion.ts'
   ```
-- ❌ Do not use [import maps](https://deno.land/manual/linking_to_external_code/import_maps).
+
+- ❌ Do not use
+  [import maps](https://deno.land/manual/linking_to_external_code/import_maps).
 
 ## Development
 
@@ -39,11 +48,14 @@ This starts your app in development mode, rebuilding assets on file changes.
 
 ### Type hints
 
-This template provides type hinting to VS Code via a [dedicated import map](./.vscode/resolve_npm_imports.json).
+This template provides type hinting to VS Code via a
+[dedicated import map](./.vscode/resolve_npm_imports.json).
 
-To get types in another editor, use an extension for Deno that supports import maps and point your editor to `./.vscode/resolve_npm_imports.json`.
+To get types in another editor, use an extension for Deno that supports import
+maps and point your editor to `./.vscode/resolve_npm_imports.json`.
 
-For more, see [our decision doc for interop between Deno and NPM](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md#vs-code-type-hints).
+For more, see
+[our decision doc for interop between Deno and NPM](https://github.com/remix-run/remix/blob/main/decisions/0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md#vs-code-type-hints).
 
 ## Production
 
@@ -66,40 +78,47 @@ Building the Deno app (`npm run build`) results in two outputs:
 - `build/` (server bundle)
 - `public/build/` (browser bundle)
 
-You can deploy these bundles to any host that runs Deno, but here we'll focus on deploying to [Deno Deploy](https://deno.com/deploy).
+You can deploy these bundles to any host that runs Deno, but here we'll focus on
+deploying to [Deno Deploy](https://deno.com/deploy).
 
 ## Setting up Deno Deploy
 
 1. [Sign up](https://dash.deno.com/signin) for Deno Deploy.
 
 2. [Create a new Deno Deploy project](https://dash.deno.com/new) for this app.
 
-3. Replace `<your deno deploy project>` in the `deploy` script in `package.json` with your Deno Deploy project name:
+3. Replace `<your deno deploy project>` in the `deploy` script in `package.json`
+   with your Deno Deploy project name:
 
-```json
-{
-  "scripts": {
-    "deploy": "deployctl deploy --project=<your deno deploy project> --include=.cache,build,public ./build/index.js"
-  }
-}
-```
+   ```json
+   {
+     "scripts": {
+       "deploy": "deployctl deploy --project=<your deno deploy project> --include=.cache,build,public ./build/index.js"
+     }
+   }
+   ```
 
-4. [Create a personal access token](https://dash.deno.com/account) for the Deno Deploy API and export it as `DENO_DEPLOY_TOKEN`:
+4. [Create a personal access token](https://dash.deno.com/account) for the Deno
+   Deploy API and export it as `DENO_DEPLOY_TOKEN`:
 
-```sh
-export DENO_DEPLOY_TOKEN=<your Deno Deploy API token>
-```
+   ```sh
+   export DENO_DEPLOY_TOKEN=<your Deno Deploy API token>
+   ```
 
-You may want to add this to your `rc` file (e.g. `.bashrc` or `.zshrc`) to make it available for new terminal sessions, but make sure you don't commit this token into `git`.
-If you want to use this token in GitHub Actions, set it as a GitHub secret.
+   You may want to add this to your `rc` file (e.g. `.bashrc` or `.zshrc`) to
+   make it available for new terminal sessions, but make sure you don't commit
+   this token into `git`. If you want to use this token in GitHub Actions, set
+   it as a GitHub secret.
 
-5. Install the Deno Deploy CLI, [`deployctl`](https://github.com/denoland/deployctl):
+5. Install the Deno Deploy CLI,
+   [`deployctl`](https://github.com/denoland/deployctl):
 
-```sh
-deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
-```
+   ```sh
+   deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
+   ```
 
-6. If you have previously installed the Deno Deploy CLI, you should update it to the latest version:
+6. If you have previously installed the Deno Deploy CLI, you should update it to
+   the latest version:
 
 ```sh
 deployctl upgrade
@@ -118,7 +137,10 @@ npm run deploy
 #### How to use FontAwesome in the project
 
 1. Search [FontAwesome Icons](https://fontawesome.com/icons)
-2. Download the SVG code (if it's a Pro icon, please ask @zainfathoni to download it for you)
-3. Paste the SVG code into the `SVG INPUT` panel of [SVGR with these params](https://react-svgr.com/playground/?svgProps=role%3Dimg%2Cfill%3DcurrentColor&typescript=true)
+2. Download the SVG code (if it's a Pro icon, please ask @zainfathoni to
+   download it for you)
+3. Paste the SVG code into the `SVG INPUT` panel of
+   [SVGR with these params](https://react-svgr.com/playground/?svgProps=role%3Dimg%2Cfill%3DcurrentColor&typescript=true)
 4. Copy the resulting `<svg>` tag in the `JSX OUTPUT` panel
-5. Paste the `<svg>` tag into the corresponding file under the [icons](/app/icons/) directory
+5. Paste the `<svg>` tag into the corresponding file under the
+   [icons](/app/icons/) directory
diff --git a/app/components/action-cards.tsx b/app/components/action-cards.tsx
@@ -10,10 +10,14 @@ export function ActionCards({ categories }: { categories: Categories }) {
         <div
           key={category.title}
           className={classNames(
-            categoryIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '',
+            categoryIdx === 0
+              ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none'
+              : '',
             categoryIdx === 1 ? 'sm:rounded-tr-lg' : '',
             categoryIdx === categories.length - 3 ? 'sm:rounded-bl-lg' : '',
-            categoryIdx === categories.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '',
+            categoryIdx === categories.length - 1
+              ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none'
+              : '',
             'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500'
           )}
         >
@@ -30,7 +34,10 @@ export function ActionCards({ categories }: { categories: Categories }) {
           </div>
           <div className="mt-8">
             <h3 className="text-lg font-medium">
-              <Link to={`/activities/${category.slug}`} className="focus:outline-none">
+              <Link
+                to={`/activities/${category.slug}`}
+                className="focus:outline-none"
+              >
                 {/* Extend touch target to entire panel */}
                 <span className="absolute inset-0" aria-hidden="true" />
                 {category.title}
@@ -45,7 +52,12 @@ export function ActionCards({ categories }: { categories: Categories }) {
             className="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
             aria-hidden="true"
           >
-            <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+            <svg
+              className="h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
               <path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
             </svg>
           </span>

diff --git a/app/components/activities-grid.tsx b/app/components/activities-grid.tsx
@@ -11,34 +11,41 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
   const matches = useMatches()
   const categorySlug = matches[matches.length - 1].params?.categorySlug
   const category = getCategoryByCategorySlug(categorySlug)
-  const addNewActivityLink = `${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(category.title)}`
+  const addNewActivityLink = `${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(
+    category.title
+  )}`
   if (activities.length) {
     return (
       <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-        {activities.map(({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
-          const { icon, iconForeground, iconBackground, title } = getCategoryByCategorySlug(categorySlug)
-          return (
-            <Card
-              key={id}
-              name={nama}
-              cta="Kunjungi"
-              link={link}
-              secondaryCta="Koreksi"
-              secondaryLink={`${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(
-                usia
-              )}&entry.105812429=${encodeURIComponent(nama)}&entry.1084985767=${encodeURIComponent(
-                ringkasan
-              )}&entry.1503344235=${encodeURIComponent(link)}`}
-              description={ringkasan}
-              image={image}
-              category={title}
-              categorySlug={categorySlug}
-              icon={icon}
-              foregroundColor={iconForeground}
-              backgroundColor={iconBackground}
-            />
-          )
-        })}
+        {activities.map(
+          ({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
+            const { icon, iconForeground, iconBackground, title } =
+              getCategoryByCategorySlug(categorySlug)
+            return (
+              <Card
+                key={id}
+                name={nama}
+                cta="Kunjungi"
+                link={link}
+                secondaryCta="Koreksi"
+                secondaryLink={`${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(
+                  usia
+                )}&entry.105812429=${encodeURIComponent(
+                  nama
+                )}&entry.1084985767=${encodeURIComponent(
+                  ringkasan
+                )}&entry.1503344235=${encodeURIComponent(link)}`}
+                description={ringkasan}
+                image={image}
+                category={title}
+                categorySlug={categorySlug}
+                icon={icon}
+                foregroundColor={iconForeground}
+                backgroundColor={iconBackground}
+              />
+            )
+          }
+        )}
         <Card
           name="Tambah Aktivitas Baru"
           description={`Usulkan aktivitas baru untuk kategori ${category.title}`}
@@ -63,9 +70,12 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
         >
           <category.icon className="w-16 h-16 flex-shrink-0 mx-auto " />
         </div>
-        <h3 className="mt-2 text-sm font-medium text-gray-900">Belum ada aktivitas {category.title}</h3>
+        <h3 className="mt-2 text-sm font-medium text-gray-900">
+          Belum ada aktivitas {category.title}
+        </h3>
         <p className="mt-1 text-sm text-gray-500">
-          Ada usulan? Silakan tambahkan aktivitas untuk {category.description} melalui formulir berikut ini.
+          Ada usulan? Silakan tambahkan aktivitas untuk {category.description}{' '}
+          melalui formulir berikut ini.
         </p>
         <div className="mt-6">
           <a

diff --git a/app/components/breadcrumbs.tsx b/app/components/breadcrumbs.tsx
@@ -5,7 +5,9 @@ import { House } from '../icons/duotone'
 
 export default function Breadcrumbs() {
   const matches = useMatches()
-  const filteredMatches = matches.filter((match) => match.pathname !== '/' || !match.pathname.endsWith('/'))
+  const filteredMatches = matches.filter(
+    (match) => match.pathname !== '/' || !match.pathname.endsWith('/')
+  )
   if (filteredMatches.length && filteredMatches[0].pathname === '/activities') {
     return (
       <nav className="flex" aria-label="Breadcrumbs">
@@ -19,7 +21,15 @@ export default function Breadcrumbs() {
             </div>
           </li>
           {filteredMatches.map(
-            ({ pathname, handle, params }: { pathname: string; handle?: string; params: Record<string, string> }) => (
+            ({
+              pathname,
+              handle,
+              params,
+            }: {
+              pathname: string
+              handle?: string
+              params: Record<string, string>
+            }) => (
               <li key={pathname} className="flex">
                 <div className="flex items-center">
                   <svg
@@ -37,7 +47,9 @@ export default function Breadcrumbs() {
                     className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                     aria-current={'page'}
                   >
-                    {handle ?? categoriesRecord[params.categorySlug]?.title ?? 'Semua Aktivitas'}
+                    {handle ??
+                      categoriesRecord[params.categorySlug]?.title ??
+                      'Semua Aktivitas'}
                   </Link>
                 </div>
               </li>

diff --git a/app/components/card.tsx b/app/components/card.tsx
@@ -37,9 +37,18 @@ export const Card: React.FC<CardProps> = ({
     <li className="col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200">
       <div className="flex-1 flex flex-col p-8">
         {image ? (
-          <img className="w-32 h-32 flex-shrink-0 mx-auto rounded-full" src={image} alt="" />
+          <img
+            className="w-32 h-32 flex-shrink-0 mx-auto rounded-full"
+            src={image}
+            alt=""
+          />
         ) : Icon ? (
-          <Icon className={classNames(iconForeground, 'w-16 h-16 flex-shrink-0 mx-auto')} />
+          <Icon
+            className={classNames(
+              iconForeground,
+              'w-16 h-16 flex-shrink-0 mx-auto'
+            )}
+          />
         ) : null}
 
         <h3 className="mt-6 text-gray-900 text-sm font-medium">{name}</h3>
@@ -83,21 +92,31 @@ export const Card: React.FC<CardProps> = ({
                 rel="noopener noreferrer"
                 className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
               >
-                <PenToSquare className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                <PenToSquare
+                  className="w-5 h-5 text-gray-400"
+                  aria-hidden="true"
+                />
                 <span className="ml-3">{secondaryCta}</span>
               </a>
             </div>
           ) : null}
           <div className="-ml-px w-0 flex-1 flex">
             {link && cta ? (
               <a
-                href={link.startsWith('http') || link.startsWith('/') ? link : `http://${link}`}
+                href={
+                  link.startsWith('http') || link.startsWith('/')
+                    ? link
+                    : `http://${link}`
+                }
                 target="_blank"
                 rel="noopener noreferrer"
                 className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
               >
                 <span className="mr-3">{cta}</span>
-                <ArrowUpRightFromSquare className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                <ArrowUpRightFromSquare
+                  className="w-5 h-5 text-gray-400"
+                  aria-hidden="true"
+                />
               </a>
             ) : (
               <button