Add base site, needs clean-up

client/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

client/.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

client/.idea/client.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

client/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/client.iml" filepath="$PROJECT_DIR$/.idea/client.iml" />
+    </modules>
+  </component>
+</project>

client/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

client/README.md

@@ -0,0 +1,27 @@
+# Next.js + Tailwind CSS Example
+
+This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-tailwindcss with-tailwindcss-app
+# or
+yarn create next-app --example with-tailwindcss with-tailwindcss-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

client/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

client/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.38",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.0",
+    "typescript": "^4.5.4"
+  }
+}

client/pages/_app.tsx

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

client/pages/index.tsx

@@ -0,0 +1,186 @@
+import {Fragment, useEffect, useState} from "react";
+import axios, {AxiosResponse} from 'axios'
+
+interface DownloadRequestResponse {
+    id: string;
+    status: string;
+    link: string;
+}
+
+interface DownloadRequest {
+    link: string
+}
+
+const calculateProgressAndAppend = (di: DownloadRequestResponse): { di: DownloadRequestResponse, progress?: number } => {
+    if (!di.status?.match) {
+        return {di}
+    }
+    const matches = di.status.match(/in-progress:\s([\d\.]+)/)
+    if (!matches || matches.length < 2) {
+        return {di}
+    }
+    const progress = matches[1]
+    const progressNum = parseInt(progress)
+    if (typeof (progressNum) !== "number") {
+        console.log(progress)
+        return {di}
+    }
+
+    return {di, progress: progressNum}
+}
+
+const displayDownloads = (displayItems: DownloadRequestResponse[]) => {
+    if (displayItems.length === 0) {
+        return null
+    }
+
+    if (!displayItems.map) {
+        console.log(displayItems)
+    }
+
+    const items = displayItems.map(calculateProgressAndAppend)
+
+    const renderListItem = (di: DownloadRequestResponse, progress?: number) => {
+
+        if (typeof (progress) !== 'number') {
+            return <div className="space-y-1">
+                <div>
+                    <a href={di.link} target="_blank">{di.link}</a> : {di.status}
+                </div>
+            </div>
+        }
+
+        return (
+            <div className="space-y-1">
+                <p>
+                    <a href={di.link} target="_blank">
+                        {di.link}
+                    </a> : {progress}%
+                </p>
+                <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-orange-500 h-2.5 rounded-full" style={{width: `${progress}%`}}/>
+                </div>
+            </div>
+        )
+    }
+
+    return <div className="flex flex-col max-h-80 overflow-scroll overflow-x-hidden">
+        <ul className="space-y-3">
+            {
+                items
+                    .sort((a, b) => a.progress - b.progress)
+                    .map(({di, progress}, i) => (
+                        <Fragment key={di.id}>
+                            {i !== 0 && (<hr className="border-gray-400 border-1 rounded-full mx-8 m-auto"/>)}
+
+                            <li>
+                                {renderListItem(di, progress)}
+                            </li>
+                        </Fragment>
+                    ))}
+        </ul>
+    </div>
+}
+
+
+export default function Home() {
+    const [downloadUrl, setDownloadUrl] = useState("")
+    const [downloadingItems, setDownloadingItems] = useState<DownloadRequestResponse[]>([])
+    const [downloadedItems, setDownloadedItems] = useState<DownloadRequestResponse[]>([])
+
+    useEffect(() => {
+        getInitialDownloads()
+
+        const interval = setInterval(() => {
+            getInitialDownloads()
+        }, 3000)
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [])
+
+    function setMockedDownloadingItems() {
+        setDownloadingItems([
+            {id: "some-id-1", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-2", status: "in-progress: 0", link: "https://youtube.com"},
+            {id: "some-id-3", status: "in-progress: 100.0", link: "https://youtube.com"},
+            {id: "some-id-4", status: "in-progress: 0", link: "https://youtube.com"},
+            {id: "some-id-5", status: "in-progress: 100.0", link: "https://youtube.com"},
+            {id: "some-id-6", status: "in-progress: 0", link: "https://youtube.com"},
+            {id: "some-id-7", status: "in-progress: 100.0", link: "https://youtube.com"},
+            {id: "some-id-8", status: "in-progress: 0", link: "https://youtube.com"},
+            {id: "some-id-9", status: "in-progress: 100.0", link: "https://youtube.com"},
+            {id: "some-id-10", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-11", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-12", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-13", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-14", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-15", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-16", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-17", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-18", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-19", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-20", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-21", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-22", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-23", status: "in-progress: 10.3", link: "https://youtube.com"},
+            {id: "some-id-24", status: "scheduled", link: "https://youtube.com"},
+            {id: "some-id-25", status: "done", link: "https://youtube.com"},
+        ])
+    }
+
+    const getInitialDownloads = () => {
+        axios.get<DownloadRequestResponse[]>("http://localhost:3333/downloads?active=true"
+        ).then(res => {
+            setDownloadingItems(res.data)
+            //setMockedDownloadingItems();
+        })
+
+        axios.get<DownloadRequestResponse[]>("http://localhost:3333/downloads?done=true"
+        ).then(res => {
+            setDownloadedItems(res.data)
+        })
+    }
+
+    const download = (url: string) => {
+        axios.post<DownloadRequest, AxiosResponse<DownloadRequestResponse>>("http://localhost:3333/downloads", {
+            link: url
+        }).then(res => {
+            setDownloadingItems([{
+                id: res.data.id,
+                status: res.data.status,
+                link: res.data.link
+            }, ...downloadingItems.filter(di => di.id !== res.data.id)])
+        })
+    }
+
+
+    return (
+        <div
+            className="min-w-full min-h-screen flex justify-center items-center h-screen bg-cover bg-center absolute z-0 bg-[url('https://images.unsplash.com/photo-1539693565400-356293b6df0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')]"
+        >
+            <div className="bg-gray-200 p-4 rounded-xl w-full mx-2 sm:mx-10 lg:mx-40 space-y-6">
+                <div className="flex flex-col md:flex-row gap-2">
+                    <input
+                        className="bg-gray-200 border-2 border-gray-400 focus:border-gray-600 px-4 py-2 flex-1 rounded-xl outline-none appearance-none"
+                        placeholder="Your download url"
+                        value={downloadUrl} onChange={(e) => setDownloadUrl(e.target.value)}>
+                    </input>
+                    <button type="button"
+                            className="py-2 px-4 bg-orange-600 rounded-xl text-white active:bg-orange-800"
+                            onClick={() => {
+                                if (downloadUrl) {
+                                    download(downloadUrl)
+                                }
+                            }}>
+                        Download
+                    </button>
+                </div>
+
+                {downloadingItems && downloadingItems.length > 0 && displayDownloads(downloadingItems)}
+                {downloadedItems && downloadedItems.length > 0 && displayDownloads(downloadedItems)}
+            </div>
+        </div>
+    )
+}

client/postcss.config.js

@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

client/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

client/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}