From 314ecee95c1c05326dceb70fdffdf650c767a381 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Tue, 12 Oct 2021 15:43:17 +0100 Subject: [PATCH] Start implementing kanban view. --- package.json | 1 + src/pages/settings/server/Categories.tsx | 68 +++++++++++++++++++++++- yarn.lock | 51 +++++++++++++++++- 3 files changed, 117 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 997bee52..94ac4338 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "dependencies": { "fs-extra": "^10.0.0", "klaw": "^3.0.0", + "react-beautiful-dnd": "^13.1.0", "sirv-cli": "^1.0.14", "vite": "npm:@insertish/vite@2.4.0-beta.3-dynamic-import-css-3c1466b" }, diff --git a/src/pages/settings/server/Categories.tsx b/src/pages/settings/server/Categories.tsx index 85884f37..b8ed1482 100644 --- a/src/pages/settings/server/Categories.tsx +++ b/src/pages/settings/server/Categories.tsx @@ -2,6 +2,7 @@ import isEqual from "lodash.isequal"; import { observer } from "mobx-react-lite"; import { Category } from "revolt-api/types/Servers"; import { Server } from "revolt.js/dist/maps/Servers"; +import styled from "styled-components"; import { ulid } from "ulid"; import { useState } from "preact/hooks"; @@ -12,12 +13,77 @@ import ComboBox from "../../../components/ui/ComboBox"; import InputBox from "../../../components/ui/InputBox"; import Tip from "../../../components/ui/Tip"; +/* interface CreateCategoryProps { + callback: (name: string) => void; +} + +function CreateCategory({ callback }: CreateCategoryProps) { + const [name, setName] = useState(""); + + return <>; +} */ + +const KanbanEntry = styled.div` + display: flex; + align-items: center; + justify-content: center; + + margin: 4px; + height: 40px; + flex-shrink: 0; + background: var(--primary-background); +`; + +const KanbanList = styled.div` + gap: 8px; + width: 180px; + display: flex; + flex-shrink: 0; + overflow-y: auto; + flex-direction: column; + background: var(--secondary-background); +`; + +const KanbanBoard = styled.div` + gap: 8px; + display: flex; + overflow-x: scroll; + flex-direction: row; +`; + interface Props { server: Server; } -// ! FIXME: really bad code export const Categories = observer(({ server }: Props) => { + const [categories, setCategories] = useState( + server.categories ?? [], + ); + + return ( + + {categories.map((category, i) => ( + +

{category.title}

+ {category.channels.map((x) => { + const channel = server.client.channels.get(x); + if (!channel) return null; + + return ( + + {" "} + {channel.name} + + ); + })} + + ))} + + ); +}); + +// ! FIXME: really bad code +export const Categories0 = observer(({ server }: Props) => { const channels = server.channels.filter((x) => typeof x !== "undefined"); const [cats, setCats] = useState(server.categories ?? []); diff --git a/yarn.lock b/yarn.lock index 61375864..1965b5bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1981,6 +1981,13 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-box-model@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" + integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== + dependencies: + tiny-invariant "^1.0.6" + css-color-keywords@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" @@ -3069,6 +3076,11 @@ mdurl@^1.0.1: sdp-transform "^2.14.1" supports-color "^8.1.1" +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + merge-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" @@ -3365,6 +3377,11 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== +raf-schd@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -3372,6 +3389,19 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" +react-beautiful-dnd@^13.1.0: + version "13.1.0" + resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" + integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== + dependencies: + "@babel/runtime" "^7.9.2" + css-box-model "^1.2.0" + memoize-one "^5.1.1" + raf-schd "^4.0.2" + react-redux "^7.2.0" + redux "^4.0.4" + use-memo-one "^1.1.1" + react-device-detect@^1.17.0: version "1.17.0" resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.17.0.tgz#a00b4fd6880cebfab3fd8a42a79dc0290cdddca9" @@ -3409,6 +3439,18 @@ react-overlapping-panels@1.2.2: resolved "https://registry.yarnpkg.com/react-overlapping-panels/-/react-overlapping-panels-1.2.2.tgz#16b60ed60045a7fa40bcf321de113c655f6e0acd" integrity sha512-jZ8ZT4tnqM2YQF91Ct+9dLk7rSjnNiudxzgKlsaVfgwEjdBAWtE8nWJX9d2jDZZ9qimWgg43u5+SF6U+ELjyKQ== +react-redux@^7.2.0: + version "7.2.5" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.5.tgz#213c1b05aa1187d9c940ddfc0b29450957f6a3b8" + integrity sha512-Dt29bNyBsbQaysp6s/dN0gUodcq+dVKKER8Qv82UrpeygwYeX1raTtil7O/fftw/rFqzaf6gJhDZRkkZnn6bjg== + dependencies: + "@babel/runtime" "^7.12.1" + "@types/react-redux" "^7.1.16" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^16.13.1" + react-redux@^7.2.4: version "7.2.4" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225" @@ -3484,7 +3526,7 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" -redux@^4.0.0, redux@^4.1.0: +redux@^4.0.0, redux@^4.0.4, redux@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.1.tgz#76f1c439bb42043f985fbd9bf21990e60bd67f47" integrity sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw== @@ -3963,7 +4005,7 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= -tiny-invariant@^1.0.2: +tiny-invariant@^1.0.2, tiny-invariant@^1.0.6: version "1.1.0" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== @@ -4115,6 +4157,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-memo-one@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" + integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== + use-resize-observer@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-7.1.0.tgz#709ea7540fbe0a60ceae41ee2bef933d7782e4d4"