D1 Rewrite

.github/workflows/e2e.yml

@@ -5,15 +5,11 @@ jobs:
   cypress-run:
     runs-on: ubuntu-latest
     services:
-      dynamodb:
-        image: amazon/dynamodb-local:latest
-        ports:
-          - 8000:8000
       minio:
         image: bitnami/minio:latest
         env:
-          MINIO_ROOT_USER: minio
-          MINIO_ROOT_PASSWORD: minio123
+          MINIO_ROOT_USER: minioadmin
+          MINIO_ROOT_PASSWORD: minioadmin
         ports:
           - 9000:9000
     steps:
@@ -22,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/[email protected]
         with:
-          node-version: 16
+          node-version: 20
       - name: Get cache directory
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -34,42 +30,25 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - name: Create DynamoDB Table
-        uses: giboow/action-aws-cli@v1
-        with:
-          args: dynamodb --endpoint-url http://dynamodb:8000 create-table --region eu-west-1 --table-name vh7 --key-schema AttributeName=id,KeyType=HASH --attribute-definitions AttributeName=id,AttributeType=S --provisioned-throughput ReadCapacityUnits=1,WriteCapacityUnits=1
-        env:
-          AWS_ACCESS_KEY_ID: testid
-          AWS_SECRET_ACCESS_KEY: testkey
       - name: Create S3 Bucket
         uses: giboow/action-aws-cli@v1
         with:
           args: s3api --endpoint-url http://minio:9000 create-bucket --bucket vh7-uploads
         env:
-          AWS_ACCESS_KEY_ID: minio
-          AWS_SECRET_ACCESS_KEY: minio123
+          AWS_ACCESS_KEY_ID: minioadmin
+          AWS_SECRET_ACCESS_KEY: minioadmin
       - name: Install dependencies
-        run: yarn install --dev
+        run: |
+          yarn install --dev
+          yarn global add wrangler
+      - name: Migrate database
+        working-directory: ./worker
+        run: wrangler d1 migrations apply DB --local
       - name: Run API
         working-directory: ./worker
         run: |
-          env > .env
-          yarn run preview > ../worker.log 2>&1 &
+          wrangler dev --port 8787 > ../worker.log 2>&1 &
           npx -y wait-on --timeout 30000 http-get://localhost:8787
-        env:
-          S3_ACCESS_KEY_ID: minio
-          S3_SECRET_ACCESS_KEY: minio123
-          S3_DEFAULT_REGION: eu-west-1
-          S3_ENDPOINT_URL: http://localhost:9000
-          S3_BUCKET: vh7-uploads
-          DYNAMODB_ACCESS_KEY_ID: testid
-          DYNAMODB_SECRET_ACCESS_KEY: testkey
-          DYNAMODB_TABLE: vh7
-          DYNAMODB_ENDPOINT_URL: http://localhost:8000
-          VH7_ENV: testing
-          SENTRY_DSN: ${{ secrets.WORKER_SENTRY_DSN }}
-          SENTRY_CLIENT_ID: ${{ secrets.WORKER_SENTRY_CLIENT_ID }}
-          SENTRY_CLIENT_SECRET: ${{ secrets.WORKER_SENTRY_CLIENT_SECRET }}
       - name: Build & Run App
         working-directory: ./app
         run: |

.github/workflows/worker.yml

@@ -5,13 +5,21 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
+    services:
+      minio:
+        image: bitnami/minio:latest
+        env:
+          MINIO_ROOT_USER: minioadmin
+          MINIO_ROOT_PASSWORD: minioadmin
+        ports:
+          - 9000:9000
     steps:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Setup Node
         uses: actions/[email protected]
         with:
-          node-version: 16
+          node-version: 20
       - name: Get cache directory
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -23,28 +31,41 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
+      - name: Create S3 Bucket
+        uses: giboow/action-aws-cli@v1
+        with:
+          args: s3api --endpoint-url http://minio:9000 create-bucket --bucket vh7-uploads
+        env:
+          AWS_ACCESS_KEY_ID: minioadmin
+          AWS_SECRET_ACCESS_KEY: minioadmin
       - name: Install dependencies
         working-directory: ./worker
         run: |
           yarn install --dev
-          yarn global add @cloudflare/wrangler
+          yarn global add wrangler
+      - name: Migrate database
+        working-directory: ./worker
+        run: wrangler d1 migrations apply DB --local
       - name: Lint
         working-directory: ./worker
         run: yarn run lint
-      # - name: Test
-      #   working-directory: ./worker
-      #   run: yarn run test
-      - name: Build
+      - name: Test
         working-directory: ./worker
-        run: wrangler build
+        run: yarn run test
   deploy:
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Publish
-        uses: web3-storage/wrangler-action@node16
+      - name: Setup Node
+        uses: actions/[email protected]
         with:
-          apiToken: ${{ secrets.CF_API_TOKEN }}
-          workingDirectory: ./worker
+          node-version: 20
+      - name: Publish
+        working-directory: ./worker
+        run: |
+          npx wrangler d1 migrations apply DB --env production
+          npx wrangler --env production
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

.gitignore

@@ -208,3 +208,4 @@ accessgrant.txt
 cleanup/backup-*
 app/cypress/downloads
 cleanup/prod.env
+.wrangler

app/cypress/e2e/view.cy.js

@@ -2,8 +2,13 @@
 describe('View Page', () => {
   it('can view a short link', () => {
     // first, create a new short link
-    cy.request('POST', 'http://localhost:8787/api/shorten', {
-      url: 'http://localhost:3000/testing123'
+    cy.request({
+      method: 'POST',
+      url: 'http://localhost:8787/api/shorten',
+      form: true,
+      body: {
+        url: 'http://localhost:3000/testing123'
+      }
     }).then((res) => {
       // then visit it
       cy.visit(`/view/${res.body.id}`);
@@ -21,9 +26,14 @@ describe('View Page', () => {
   it('can view a paste', () => {
     cy.fixture('paste').then((code) => {
       // first, create a new paste
-      cy.request('POST', 'http://localhost:8787/api/paste', {
-        language: 'python',
-        code
+      cy.request({
+        method: 'POST',
+        url: 'http://localhost:8787/api/paste',
+        form: true,
+        body: {
+          language: 'python',
+          code: code,
+        }
       }).then((res) => {
         // then visit it
         const id = res.body.id;

app/src/components/UploadForm.jsx

@@ -3,7 +3,7 @@ import { upload } from "../controller";
 import { Dropzone } from '@mantine/dropzone';
 import { Group, Text } from "@mantine/core";
 import { Upload } from "react-feather";
-import { useForm } from "@mantine/hooks";
+import { useForm } from "@mantine/form";
 import { AdvancedControls, initialValues, validationRules } from "./AdvancedControls";
 import { CreateInfo } from "./CreateInfo";
 

app/src/controller.js

@@ -34,21 +34,23 @@ function parseExpiry(expiryDays) {
 export async function shorten(url, expiryDays) {
   const expires = parseExpiry(expiryDays);
 
-  const res = await instance.post('/shorten', {
-    url,
-    expires
-  });
+  const form = new FormData();
+  form.append('url', url);
+  form.append('expires', expires);
+
+  const res = await instance.post('/shorten', form);
   return res.data;
 }
 
 export async function paste(code, language, expiryDays) {
   const expires = parseExpiry(expiryDays);
 
-  const res = await instance.post('/paste', {
-    code,
-    language,
-    expires
-  });
+  const form = new FormData();
+  form.append('code', code);
+  form.append('language', language);
+  form.append('expires', expires);
+
+  const res = await instance.post('/paste', form);
   return res.data;
 }
 

app/src/views/View.jsx

@@ -41,16 +41,16 @@ function View() {
       content = <Text mt={6}>Error: {data.error.message}. Please try again.</Text>;
     } else {
       switch (data.type) {
-        case "url:1":
-          title = shortUrl(data.data.url, 30);
+        case "url":
+          title = shortUrl(data.url, 30);
           content = <>
-            <TimedRedirect href={data.data.url} />
+            <TimedRedirect href={data.url} />
           </>;
           break;
-        case "paste:1":
+        case "paste":
           title = "Paste";
           content = <>
-            <Prism language={data.data.language} id="paste-content">{data.data.code}</Prism>
+            <Prism language={data.language} id="paste-content">{data.code}</Prism>
             <Button
               leftIcon={<Download size={16} />}
               component="a"
@@ -61,13 +61,13 @@ function View() {
             </Button>
           </>;
           break;
-        case "upload:1":
-          title = data.data.filename;
-          let size = `${data.data.size} bytes`;
-          if (data.data.size > 1000000) {
-            size = `${(data.data.size / 1000000).toFixed(1)} MB`
-          } else if (data.data.size > 1000) {
-            size = `${(data.data.size / 1000).toFixed(1)} KB`
+        case "upload":
+          title = data.filename;
+          let size = `${data.size} bytes`;
+          if (data.size > 1000000) {
+            size = `${(data.size / 1000000).toFixed(1)} MB`
+          } else if (data.size > 1000) {
+            size = `${(data.size / 1000).toFixed(1)} KB`
           }
 
           content = <>
@@ -78,7 +78,7 @@ function View() {
 
             <Text style={{ overflowX: "auto" }}>
               <ul>
-                <li><b>SHA256 Hash:</b> <span id="upload-sha256">{data.data.hash}</span></li>
+                <li><b>SHA256 Hash:</b> <span id="upload-sha256">{data.hash}</span></li>
                 <li><b>File Size:</b> {size}</li>
               </ul>
             </Text>
@@ -88,12 +88,12 @@ function View() {
               component="a"
               href={`${baseURL}${link}?direct=1`}
             >
-              Download {data.data.filename}
+              Download {data.filename}
             </Button>
           </>;
           break;
       }
-      subtitle = `Created ${(new Date(data.created).toLocaleDateString())}`;
+      subtitle = `Created ${(new Date(data.createdAt).toLocaleDateString())}`;
     }
   }