diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index 812ebc329..5c7b0ada6 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -1585,22 +1585,6 @@ } } }, - "@react-dnd/asap": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", - "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==" - }, - "@react-dnd/invariant": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz", - "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==" - }, - "@react-dnd/shallowequal": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", - "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==", - "dev": true - }, "@styled-system/background": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", @@ -3909,21 +3893,6 @@ "randombytes": "^2.0.0" } }, - "dnd-core": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz", - "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==", - "requires": { - "@react-dnd/asap": "^4.0.0", - "@react-dnd/invariant": "^2.0.0", - "redux": "^4.0.4" - } - }, - "dnd-multi-backend": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-6.0.0.tgz", - "integrity": "sha512-qfUO4V0IACs24xfE9m9OUnwIzoL+SWzSiFbKVIHE0pFddJeZ93BZOdHS1XEYr8X3HNh+CfnfjezXgOMgjvh74g==" - }, "dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -7872,53 +7841,6 @@ "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.1.tgz", "integrity": "sha512-rutEKVgvFhWcy/GeVA1hFbqrO89qLqgqdhUr7YhYgIzdyICdlRQv+ztuNvOFQMXrO0fLt0VkaYOdMdYdQgsSUA==" }, - "react-dnd": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz", - "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==", - "dev": true, - "requires": { - "@react-dnd/shallowequal": "^2.0.0", - "@types/hoist-non-react-statics": "^3.3.1", - "dnd-core": "^11.1.3", - "hoist-non-react-statics": "^3.3.0" - } - }, - "react-dnd-html5-backend": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz", - "integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==", - "requires": { - "dnd-core": "^11.1.3" - } - }, - "react-dnd-multi-backend": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-6.0.2.tgz", - "integrity": "sha512-SwpqRv0HkJYu244FbHf9NbvGzGy14Ir9wIAhm909uvOVaHgsOq6I1THMSWSgpwUI31J3Bo5uS19tuvGpVPjzZw==", - "requires": { - "dnd-multi-backend": "^6.0.0", - "prop-types": "^15.7.2", - "react-dnd-preview": "^6.0.2" - } - }, - "react-dnd-preview": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-6.0.2.tgz", - "integrity": "sha512-F2+uK4Be+q+7mZfNh9kaZols7wp1hX6G7UBTVaTpDsBpMhjFvY7/v7odxYSerSFBShh23MJl33a4XOVRFj1zoQ==", - "requires": { - "prop-types": "^15.7.2" - } - }, - "react-dnd-touch-backend": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-11.1.3.tgz", - "integrity": "sha512-8lz4fxfYwUuJ6Y2seQYwh8+OfwKcbBX0CIbz7AwXfBYz54Wg2nIDU6CP8Dyybt/Wyx4D3oXmTPEaOMB62uqJvQ==", - "requires": { - "@react-dnd/invariant": "^2.0.0", - "dnd-core": "^11.1.3" - } - }, "react-dom": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", @@ -8095,15 +8017,6 @@ "picomatch": "^2.2.1" } }, - "redux": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", - "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", - "requires": { - "loose-envify": "^1.4.0", - "symbol-observable": "^1.2.0" - } - }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -9446,11 +9359,6 @@ "xml-reader": "2.4.3" } }, - "symbol-observable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" - }, "synchronous-promise": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.13.tgz", @@ -10204,8 +10112,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -10226,14 +10133,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -10248,20 +10153,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -10378,8 +10280,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -10391,7 +10292,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10406,7 +10306,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10414,14 +10313,12 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10440,7 +10337,6 @@ "version": "0.5.3", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -10502,8 +10398,7 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "npm-packlist": { "version": "1.4.8", @@ -10531,8 +10426,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10544,7 +10438,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10622,8 +10515,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -10659,7 +10551,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10679,7 +10570,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10723,14 +10613,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -11211,8 +11099,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -11233,14 +11120,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11255,20 +11140,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -11385,8 +11267,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -11398,7 +11279,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11413,7 +11293,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -11421,14 +11300,12 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11447,7 +11324,6 @@ "version": "0.5.3", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -11509,8 +11385,7 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "npm-packlist": { "version": "1.4.8", @@ -11538,8 +11413,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -11551,7 +11425,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -11629,8 +11502,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -11666,7 +11538,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11686,7 +11557,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -11730,14 +11600,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/pkg/interface/package.json b/pkg/interface/package.json index 619ccae0f..1e33fd4fb 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -26,9 +26,6 @@ "prop-types": "^15.7.2", "react": "^16.5.2", "react-codemirror2": "^6.0.1", - "react-dnd-html5-backend": "^11.1.3", - "react-dnd-multi-backend": "^6.0.2", - "react-dnd-touch-backend": "^11.1.3", "react-dom": "^16.8.6", "react-helmet": "^6.1.0", "react-markdown": "^4.3.1", @@ -73,7 +70,6 @@ "file-loader": "^6.0.0", "html-webpack-plugin": "^4.2.0", "moment-locales-webpack-plugin": "^1.2.0", - "react-dnd": "^11.1.3", "react-hot-loader": "^4.12.21", "sass": "^1.26.5", "sass-loader": "^8.0.2", diff --git a/pkg/interface/src/logic/api/launch.ts b/pkg/interface/src/logic/api/launch.ts index 30661df83..bbe49db73 100644 --- a/pkg/interface/src/logic/api/launch.ts +++ b/pkg/interface/src/logic/api/launch.ts @@ -1,9 +1,7 @@ import BaseApi from './base'; import { StoreState } from '../store/type'; - export default class LaunchApi extends BaseApi { - add(name: string, tile = { basic : { title: '', linkedUrl: '', iconUrl: '' }}) { return this.launchAction({ add: { name, tile } }); } @@ -12,10 +10,6 @@ export default class LaunchApi extends BaseApi { return this.launchAction({ remove: name }); } - changeOrder(orderedTiles: string[] = []) { - return this.launchAction({ 'change-order': orderedTiles }); - } - changeFirstTime(firstTime = true) { return this.launchAction({ 'change-first-time': firstTime }); } @@ -31,6 +25,5 @@ export default class LaunchApi extends BaseApi { private launchAction(data) { return this.action('launch', 'launch-action', data); } - } diff --git a/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx b/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx index ef76a10fc..9ae53a29c 100644 --- a/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx +++ b/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx @@ -1,34 +1,28 @@ -import React from "react"; +import React from 'react'; import { Box, - Label, ManagedCheckboxField as Checkbox, - Button, -} from "@tlon/indigo-react"; -import { Formik, Form } from "formik"; -import * as Yup from "yup"; -import _ from "lodash"; + Button +} from '@tlon/indigo-react'; +import { Formik, Form } from 'formik'; +import * as Yup from 'yup'; -import GlobalApi from "../../../../api/global"; -import { LaunchState } from "../../../../types/launch-update"; -import { DropLaunchTiles } from "./DropLaunch"; -import { S3State, BackgroundConfig } from "../../../../types"; -import { BackgroundPicker, BgType } from "./BackgroundPicker"; +import GlobalApi from '~/logic/api/global'; +import { S3State, BackgroundConfig } from '~/types'; +import { BackgroundPicker, BgType } from './BackgroundPicker'; const formSchema = Yup.object().shape({ - tileOrdering: Yup.array().of(Yup.string()), bgType: Yup.string() - .oneOf(["none", "color", "url"], "invalid") - .required("Required"), + .oneOf(['none', 'color', 'url'], 'invalid') + .required('Required'), bgUrl: Yup.string().url(), - bgColor: Yup.string().matches(/#([A-F]|[a-f]|[0-9]){6}/, "Invalid color"), + bgColor: Yup.string().matches(/#([A-F]|[a-f]|[0-9]){6}/, 'Invalid color'), avatars: Yup.boolean(), - nicknames: Yup.boolean(), + nicknames: Yup.boolean() }); interface FormSchema { - tileOrdering: string[]; bgType: BgType; bgColor: string | undefined; bgUrl: string | undefined; @@ -38,7 +32,6 @@ interface FormSchema { interface DisplayFormProps { api: GlobalApi; - launch: LaunchState; dark: boolean; background: BackgroundConfig; hideAvatars: boolean; @@ -47,16 +40,16 @@ interface DisplayFormProps { } export default function DisplayForm(props: DisplayFormProps) { - const { api, launch, background, hideAvatars, hideNicknames, s3 } = props; + const { api, background, hideAvatars, hideNicknames, s3 } = props; let bgColor, bgUrl; - if (background?.type === "url") { + if (background?.type === 'url') { bgUrl = background.url; } - if (background?.type === "color") { + if (background?.type === 'color') { bgColor = background.color; } - const bgType = background?.type || "none"; + const bgType = background?.type || 'none'; return ( { - api.launch.changeOrder(values.tileOrdering); - const bgConfig: BackgroundConfig = - values.bgType === "color" - ? { type: "color", color: values.bgColor || "" } - : values.bgType === "url" - ? { type: "url", url: values.bgUrl || "" } + values.bgType === 'color' + ? { type: 'color', color: values.bgColor || '' } + : values.bgType === 'url' + ? { type: 'url', url: values.bgUrl || '' } : undefined; api.local.setBackground(bgConfig); @@ -88,7 +78,7 @@ export default function DisplayForm(props: DisplayFormProps) { actions.setSubmitting(false); }} > - {(props) => ( + {props => (
Display Preferences - - - - ` - ${(p) => - p.theme.colors.white !== "rgba(255,255,255,1)" ? `filter: invert(1);` : ``} - - ${(p) => - !p.invert - ? `` - : p.theme.colors.white !== "rgba(255,255,255,1)" - ? ` - filter: invert(0); - ` - : `filter: invert(1);`} -`; - -interface DragTileProps { - index: number; - tile: Tile; - title: string; - style?: any; -} - -function DragTileBox({ title, index, tile, ...props }: any) { - const [, dragRef] = useDrag({ - item: { type: "launchTile", index, tile, title }, - collect: (monitor) => ({}), - }); - - return ( - - ); -} - -function DragTileCustom({ index, title, style }: any) { - const tile = { type: { custom: null } }; - return ( - - {capitalize(title)} - - ); -} - -function DragTileBasic(props: { - tile: TileTypeBasic; - index: number; - style: any; -}) { - const { basic: tile } = props.tile; - const isDojo = useMemo(() => tile.title === "Dojo", [tile.title]); - return ( - - - - {tile.title} - - - ); -} - -export function DragTile(props: DragTileProps) { - if ("basic" in props.tile.type) { - return ( - - ); - } else { - return ( - - ); - } -} - -export function DragTilePreview() { - let { display, style, item } = usePreview(); - - if (!display) { - return null; - } - - style = { ...style, height: "96px", width: "96px", "z-index": "5" }; - return ; -} diff --git a/pkg/interface/src/views/apps/profile/components/lib/DropLaunch.tsx b/pkg/interface/src/views/apps/profile/components/lib/DropLaunch.tsx deleted file mode 100644 index da6d2c45e..000000000 --- a/pkg/interface/src/views/apps/profile/components/lib/DropLaunch.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, { useCallback, ReactNode } from "react"; -import { useDrop } from "react-dnd"; -import { DndProvider, usePreview } from "react-dnd-multi-backend"; -import HTML5toTouch from "react-dnd-multi-backend/dist/esm/HTML5toTouch"; -import { Box } from "@tlon/indigo-react"; - -import { DragTile, DragTilePreview } from "./DragTile"; -import { useField } from "formik"; - -function DropLaunchTile({ - children, - index, - didDrop, -}: { - index: number; - children: ReactNode; - didDrop: (item: number, location: number) => void; -}) { - const onDrop = useCallback( - (item: any, monitor: any) => { - didDrop(item.index, index); - }, - [index, didDrop] - ); - - const { display, style, item } = usePreview(); - - const [{ isOver }, drop] = useDrop({ - accept: "launchTile", - drop: onDrop, - collect: (monitor) => ({ - isOver: !!monitor.isOver(), - }), - }); - - return ( -
- {children} -
- ); -} - -export function DropLaunchTiles({ tiles, name }: any) { - const [field, meta, helpers] = useField(name); - - const { value } = meta; - const { setValue } = helpers; - - const onChange = useCallback( - (x: number, y: number) => { - // swap tiles - let t = value.slice(); - const c = t[x]; - t[x] = t[y]; - t[y] = c; - setValue(t); - }, - [setValue, value] - ); - - return ( - - - - {value.map((tile, i) => ( - - - - ))} - - - ); -} diff --git a/pkg/interface/src/views/apps/profile/components/settings.tsx b/pkg/interface/src/views/apps/profile/components/settings.tsx index 6c9bf6866..ac2843ae6 100644 --- a/pkg/interface/src/views/apps/profile/components/settings.tsx +++ b/pkg/interface/src/views/apps/profile/components/settings.tsx @@ -1,31 +1,18 @@ -import React from "react"; +import React from 'react'; -import { - Box, - Text, - Button, - Col, - Input, - InputLabel, - Radio, - Checkbox, -} from "@tlon/indigo-react"; -import * as Yup from "yup"; -import { Formik, Form } from "formik"; -import _ from "lodash"; +import { Box } from '@tlon/indigo-react'; -import GlobalApi from "../../../api/global"; -import { StoreState } from "../../../store/type"; -import DisplayForm from "./lib/DisplayForm"; -import S3Form from "./lib/S3Form"; -import SecuritySettings from "./lib/Security"; -import RemoteContentForm from "./lib/RemoteContent"; +import GlobalApi from '~/logic/api/global'; +import { StoreState } from '~/logic/store/type'; +import DisplayForm from './lib/DisplayForm'; +import S3Form from './lib/S3Form'; +import SecuritySettings from './lib/Security'; +import RemoteContentForm from './lib/RemoteContent'; type ProfileProps = StoreState & { api: GlobalApi; ship: string }; export default function Settings({ api, - launch, s3, dark, hideAvatars, @@ -45,14 +32,13 @@ export default function Settings({ > - +