1
Fork 0

Remove semantic-ui + cleanup comments

This commit is contained in:
viktorstrate 2021-07-18 16:27:24 +02:00
parent 5fb6b432af
commit 10b2410db9
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
18 changed files with 84 additions and 403 deletions

View File

@ -1,30 +0,0 @@
module.exports = function (api) {
const isTest = api.env('test')
const isProduction = api.env('NODE_ENV') == 'production'
let presets = ['@babel/preset-react', '@babel/preset-typescript']
let plugins = []
if (isTest) {
presets.push('@babel/preset-env')
plugins.push('@babel/plugin-transform-runtime')
} else {
if (!isProduction) {
// plugins.push([
// 'i18next-extract',
// {
// locales: ['en', 'da', 'fr', 'sv', 'es', 'it', 'pl', 'de'],
// defaultValue: null,
// },
// ])
}
plugins.push(['styled-components', { pure: true }])
plugins.push('graphql-tag')
}
return {
presets: presets,
plugins: plugins,
}
}

191
ui/package-lock.json generated
View File

@ -47,7 +47,6 @@
"react-scripts": "^4.0.3",
"react-spring": "^8.0.27",
"react-test-renderer": "^17.0.2",
"semantic-ui-react": "^2.0.3",
"styled-components": "^5.3.0",
"subscriptions-transport-ws": "^0.9.19",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
@ -1921,31 +1920,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fluentui/react-component-event-listener": {
"version": "0.51.7",
"resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.7.tgz",
"integrity": "sha512-NjVm+crN0T9A7vITL8alZeHnuV8zi2gos0nezU/2YOxaUAB9E4zKiPxt/6k5U50rJs/gj8Nu45iXxnjO41HbZg==",
"dependencies": {
"@babel/runtime": "^7.10.4"
},
"peerDependencies": {
"react": "^16.8.0 || ^17",
"react-dom": "^16.8.0 || ^17"
}
},
"node_modules/@fluentui/react-component-ref": {
"version": "0.51.7",
"resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.51.7.tgz",
"integrity": "sha512-CX27jVJYaFoBCWpuWAizQZ2se137ku1dmDyn8sw+ySNJa+kkQf7LnMydiPW5K7cRdUSqUJW3eS4EjKRvVAx8xA==",
"dependencies": {
"@babel/runtime": "^7.10.4",
"react-is": "^16.6.3"
},
"peerDependencies": {
"react": "^16.8.0 || ^17",
"react-dom": "^16.8.0 || ^17"
}
},
"node_modules/@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@ -2275,15 +2249,6 @@
"node": ">=10"
}
},
"node_modules/@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@react-aria/focus": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.4.0.tgz",
@ -2425,19 +2390,6 @@
"rollup": "^1.20.0||^2.0.0"
}
},
"node_modules/@semantic-ui-react/event-stack": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz",
"integrity": "sha512-Yd0Qf7lPCIjzJ9bZYfurlNu2RDXT6KKSyubHfYK3WjRauhxCsq6Fk2LMRI9DEvShoEU+AsLSv3NGkqXAcVp0zg==",
"dependencies": {
"exenv": "^1.2.2",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0",
"react-dom": "^16.0.0 || ^17.0.0"
}
},
"node_modules/@sinonjs/commons": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
@ -8386,11 +8338,6 @@
"url": "https://github.com/sindresorhus/execa?sponsor=1"
}
},
"node_modules/exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
},
"node_modules/exit": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@ -11498,11 +11445,6 @@
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
},
"node_modules/keyboard-key": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
"integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
},
"node_modules/killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@ -11884,11 +11826,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -15681,19 +15618,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17"
}
},
"node_modules/react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@ -18416,30 +18340,6 @@
"node-forge": "^0.10.0"
}
},
"node_modules/semantic-ui-react": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-2.0.3.tgz",
"integrity": "sha512-a0hGN6XXw64sRSKwWqMCKSI/AGLohxNeWuErS39eswvBbUnLjBij8ZoEdiqDiz/PuWpwYIRjgmQVrut+7h3b2g==",
"dependencies": {
"@babel/runtime": "^7.10.5",
"@fluentui/react-component-event-listener": "~0.51.6",
"@fluentui/react-component-ref": "~0.51.6",
"@popperjs/core": "^2.6.0",
"@semantic-ui-react/event-stack": "^3.1.2",
"clsx": "^1.1.1",
"keyboard-key": "^1.1.0",
"lodash": "^4.17.19",
"lodash-es": "^4.17.15",
"prop-types": "^15.7.2",
"react-is": "^16.8.6 || ^17.0.0",
"react-popper": "^2.2.4",
"shallowequal": "^1.1.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -20931,14 +20831,6 @@
"makeerror": "1.0.x"
}
},
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@ -23998,23 +23890,6 @@
}
}
},
"@fluentui/react-component-event-listener": {
"version": "0.51.7",
"resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.7.tgz",
"integrity": "sha512-NjVm+crN0T9A7vITL8alZeHnuV8zi2gos0nezU/2YOxaUAB9E4zKiPxt/6k5U50rJs/gj8Nu45iXxnjO41HbZg==",
"requires": {
"@babel/runtime": "^7.10.4"
}
},
"@fluentui/react-component-ref": {
"version": "0.51.7",
"resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.51.7.tgz",
"integrity": "sha512-CX27jVJYaFoBCWpuWAizQZ2se137ku1dmDyn8sw+ySNJa+kkQf7LnMydiPW5K7cRdUSqUJW3eS4EjKRvVAx8xA==",
"requires": {
"@babel/runtime": "^7.10.4",
"react-is": "^16.6.3"
}
},
"@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@ -24278,11 +24153,6 @@
}
}
},
"@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
},
"@react-aria/focus": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.4.0.tgz",
@ -24379,15 +24249,6 @@
"picomatch": "^2.2.2"
}
},
"@semantic-ui-react/event-stack": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz",
"integrity": "sha512-Yd0Qf7lPCIjzJ9bZYfurlNu2RDXT6KKSyubHfYK3WjRauhxCsq6Fk2LMRI9DEvShoEU+AsLSv3NGkqXAcVp0zg==",
"requires": {
"exenv": "^1.2.2",
"prop-types": "^15.6.2"
}
},
"@sinonjs/commons": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
@ -29047,11 +28908,6 @@
"strip-final-newline": "^2.0.0"
}
},
"exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
},
"exit": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@ -31436,11 +31292,6 @@
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
},
"keyboard-key": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
"integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@ -31726,11 +31577,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -34746,15 +34592,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
},
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@ -36897,26 +36734,6 @@
"node-forge": "^0.10.0"
}
},
"semantic-ui-react": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-2.0.3.tgz",
"integrity": "sha512-a0hGN6XXw64sRSKwWqMCKSI/AGLohxNeWuErS39eswvBbUnLjBij8ZoEdiqDiz/PuWpwYIRjgmQVrut+7h3b2g==",
"requires": {
"@babel/runtime": "^7.10.5",
"@fluentui/react-component-event-listener": "~0.51.6",
"@fluentui/react-component-ref": "~0.51.6",
"@popperjs/core": "^2.6.0",
"@semantic-ui-react/event-stack": "^3.1.2",
"clsx": "^1.1.1",
"keyboard-key": "^1.1.0",
"lodash": "^4.17.19",
"lodash-es": "^4.17.15",
"prop-types": "^15.7.2",
"react-is": "^16.8.6 || ^17.0.0",
"react-popper": "^2.2.4",
"shallowequal": "^1.1.0"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -38913,14 +38730,6 @@
"makeerror": "1.0.x"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

View File

@ -47,7 +47,6 @@
"react-scripts": "^4.0.3",
"react-spring": "^8.0.27",
"react-test-renderer": "^17.0.2",
"semantic-ui-react": "^2.0.3",
"styled-components": "^5.3.0",
"subscriptions-transport-ws": "^0.9.19",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",

View File

@ -44,12 +44,6 @@ const InitialSetupPage = () => {
formState: { errors: formErrors },
} = useForm<InitialSetupFormData>()
// const [state, setState] = useState({
// username: '',
// password: '',
// rootPath: '',
// })
if (authToken()) {
return <Redirect to="/" />
}
@ -73,17 +67,6 @@ const InitialSetupPage = () => {
},
})
// const handleChange = (
// event: React.ChangeEvent<HTMLInputElement>,
// key: string
// ) => {
// const value = event.target.value
// setState(prevState => ({
// ...prevState,
// [key]: value,
// }))
// }
const signIn = handleSubmit(data => {
authorize({
variables: {

View File

@ -115,7 +115,7 @@ export const FaceDetails = ({ group }: FaceDetailsProps) => {
}
}, [loading])
const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key == 'Escape') {
resetLabel()
return
@ -155,9 +155,10 @@ export const FaceDetails = ({ group }: FaceDetailsProps) => {
},
})
}
onKeyDown={onKeyUp}
onKeyDown={onKeyDown}
onChange={e => setInputValue(e.target.value)}
onBlur={() => {
onBlur={e => {
console.log(e)
resetLabel()
}}
/>
@ -177,17 +178,6 @@ const FaceImagesCount = styled.span`
border-radius: 4px;
`
// const EditIcon = styled(Icon)`
// margin-left: 6px !important;
// opacity: 0 !important;
// transition: opacity 100ms;
// ${FaceDetailsButton}:hover &, ${FaceDetailsButton}:focus-visible & {
// opacity: 1 !important;
// }
// `
type FaceGroupProps = {
group: myFaces_myFaceGroups
}

View File

@ -1,9 +1,13 @@
import { useMutation } from '@apollo/client'
import React, { useState, useEffect, createRef } from 'react'
import React, {
useState,
useEffect,
createRef,
KeyboardEventHandler,
} from 'react'
import { useTranslation } from 'react-i18next'
import { Input } from 'semantic-ui-react'
import { isNil } from '../../../helpers/utils'
import { Button } from '../../../primitives/form/Input'
import { Button, TextField } from '../../../primitives/form/Input'
import { SET_GROUP_LABEL_MUTATION } from '../PeoplePage'
import {
setGroupLabel,
@ -23,7 +27,7 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
const [editLabel, setEditLabel] = useState(false)
const [inputValue, setInputValue] = useState(faceGroup?.label ?? '')
const inputRef = createRef<Input>()
const inputRef = createRef<HTMLInputElement>()
const [mergeModalOpen, setMergeModalOpen] = useState(false)
const [moveModalOpen, setMoveModalOpen] = useState(false)
const [detachModalOpen, setDetachModalOpen] = useState(false)
@ -50,23 +54,11 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
}
}, [setLabelLoading])
const onKeyUp = (e: KeyboardEvent & React.ChangeEvent<HTMLInputElement>) => {
if (isNil(faceGroup)) throw new Error('Expected faceGroup to be defined')
const onKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
if (e.key == 'Escape') {
resetLabel()
return
}
if (e.key == 'Enter') {
setGroupLabel({
variables: {
groupID: faceGroup.id,
label: e.target.value == '' ? null : e.target.value,
},
})
return
}
}
let title
@ -86,13 +78,23 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
} else {
title = (
<>
<Input
<TextField
loading={setLabelLoading}
ref={inputRef}
placeholder={t('people_page.face_group.label_placeholder', 'Label')}
icon="arrow right"
action={() => {
if (isNil(faceGroup))
throw new Error('Expected faceGroup to be defined')
setGroupLabel({
variables: {
groupID: faceGroup.id,
label: inputValue ? inputValue : null,
},
})
}}
value={inputValue}
onKeyUp={onKeyUp}
onKeyDown={onKeyDown}
onChange={e => setInputValue(e.target.value)}
onBlur={() => {
resetLabel()
@ -145,45 +147,6 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
<Button onClick={() => setMoveModalOpen(true)}>Move faces</Button>
</li>
</ul>
{/* <TitleDropdown
icon={{
name: 'settings',
size: 'large',
}}
>
<Dropdown.Menu>
<Dropdown.Item
icon="pencil"
text={
faceGroup?.label
? t(
'people_page.face_group.action.change_label',
'Change Label'
)
: t('people_page.face_group.action.add_label', 'Add Label')
}
onClick={() => setEditLabel(true)}
/>
<Dropdown.Item
icon="object group"
text={t('people_page.face_group.action.merge_face', 'Merge Face')}
onClick={() => setMergeModalOpen(true)}
/>
<Dropdown.Item
icon="object ungroup"
text={t(
'people_page.face_group.action.detach_face',
'Detach Face'
)}
onClick={() => setDetachModalOpen(true)}
/>
<Dropdown.Item
icon="clone"
text={t('people_page.face_group.action.move_faces', 'Move Faces')}
onClick={() => setMoveModalOpen(true)}
/>
</Dropdown.Menu>
</TitleDropdown> */}
</div>
{modals}
</>

View File

@ -84,15 +84,8 @@ const SelectFaceGroupTable = ({
}: SelectFaceGroupTableProps) => {
const { t } = useTranslation()
// const PAGE_SIZE = 6
// const [page, setPage] = useState(0)
const [searchValue, setSearchValue] = useState('')
// useEffect(() => {
// setPage(0)
// }, [searchValue])
const rows = faceGroups
.filter(
x =>
@ -108,10 +101,6 @@ const SelectFaceGroupTable = ({
/>
))
// const pageRows = rows.filter(
// (_, i) => i >= page * PAGE_SIZE && i < (page + 1) * PAGE_SIZE
// )
return (
<>
<Table className="w-full">

View File

@ -1,7 +1,6 @@
import { gql } from '@apollo/client'
import React, { useRef, useState } from 'react'
import { useMutation, useQuery } from '@apollo/client'
import { Loader } from 'semantic-ui-react'
import { InputLabelDescription } from './SettingsPage'
import { useTranslation } from 'react-i18next'
import { scanIntervalQuery } from './__generated__/scanIntervalQuery'
@ -12,6 +11,7 @@ import {
import Checkbox from '../../primitives/form/Checkbox'
import { TextField } from '../../primitives/form/Input'
import Dropdown, { DropdownItem } from '../../primitives/form/Dropdown'
import Loader from '../../primitives/Loader'
const SCAN_INTERVAL_QUERY = gql`
query scanIntervalQuery {
@ -234,7 +234,6 @@ const PeriodicScanner = () => {
</div>
<Loader
active={scanIntervalQuery.loading || scanIntervalMutationLoading}
inline
size="small"
style={{ marginLeft: 16 }}
/>

View File

@ -1,6 +1,5 @@
import React, { useRef, useState } from 'react'
import { useQuery, useMutation, gql } from '@apollo/client'
// import { Input, Loader } from 'semantic-ui-react'
import { InputLabelTitle, InputLabelDescription } from './SettingsPage'
import { useTranslation } from 'react-i18next'
import { concurrentWorkersQuery } from './__generated__/concurrentWorkersQuery'
@ -84,12 +83,6 @@ const ScannerConcurrentWorkers = () => {
event.key == 'Enter' && updateWorkerAmount(workerAmount)
}
/>
{/* <Loader
active={workerAmountQuery.loading || workersMutationData.loading}
inline
size="small"
style={{ marginLeft: 16 }}
/> */}
</div>
)
}

View File

@ -118,10 +118,7 @@ const UserPreferences = () => {
},
})
}}
// selection
// search
selected={data?.myUserPreferences.language || undefined}
// loading={loadingPrefs}
disabled={loadingPrefs}
/>
</UserPreferencesWrapper>

View File

@ -1,6 +1,4 @@
import React, { useState } from 'react'
import { Loader, Icon } from 'semantic-ui-react'
import {
Table,
TableHeader,
@ -17,6 +15,7 @@ import { SectionTitle } from '../SettingsPage'
import { useTranslation } from 'react-i18next'
import { settingsUsersQuery } from './__generated__/settingsUsersQuery'
import { Button } from '../../../primitives/form/Input'
import Loader from '../../../primitives/Loader'
export const USERS_QUERY = gql`
query settingsUsersQuery {
@ -100,7 +99,6 @@ const UsersTable = () => {
disabled={showAddUser}
onClick={() => setShowAddUser(true)}
>
<Icon name="add" />
{t('settings.users.table.new_user', 'New user')}
</Button>
</TableHeaderCell>

View File

@ -1,8 +1,8 @@
import React from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Icon, Modal } from 'semantic-ui-react'
import Checkbox from '../../../primitives/form/Checkbox'
import { Button } from '../../../primitives/form/Input'
import Modal from '../../../primitives/Modal'
import { TableCell, TableRow } from '../../../primitives/Table'
import ChangePasswordModal from './UserChangePassword'
import { UserRowChildProps } from './UserRow'
@ -52,11 +52,9 @@ const ViewUserRow = ({
disabled={scanUserCalled}
onClick={() => scanUser({ variables: { userId: user.id } })}
>
<Icon name="sync" />
{t('settings.users.table.row.action.scan', 'Scan')}
</Button>
<Button onClick={() => setChangePassword(true)}>
<Icon name="key" />
{t(
'settings.users.table.row.action.change_password',
'Change password'
@ -73,14 +71,37 @@ const ViewUserRow = ({
setConfirmDelete(true)
}}
>
<Icon name="delete" />
{t('settings.users.table.row.action.delete', 'Delete')}
</Button>
<Modal open={showConfirmDelete}>
<Modal.Header>
{t('settings.users.confirm_delete_user.title', 'Delete user')}
</Modal.Header>
<Modal.Content>
<Modal
open={showConfirmDelete}
onClose={() => setConfirmDelete(false)}
title={t('settings.users.confirm_delete_user.title', 'Delete user')}
actions={[
{
key: 'cancel',
label: t('general.action.cancel', 'Cancel'),
onClick: () => setConfirmDelete(false),
},
{
key: 'delete',
label: t(
'settings.users.confirm_delete_user.action',
'Delete {{user}}',
{ user: user.username }
),
onClick: () => {
setConfirmDelete(false)
deleteUser({
variables: {
id: user.id,
},
})
},
variant: 'negative',
},
]}
description={
<Trans
t={t}
i18nKey="settings.users.confirm_delete_user.description"
@ -91,30 +112,8 @@ const ViewUserRow = ({
</p>
<p>{`This action cannot be undone`}</p>
</Trans>
</Modal.Content>
<Modal.Actions>
<Button onClick={() => setConfirmDelete(false)}>
{t('general.action.cancel', 'Cancel')}
</Button>
<Button
variant="negative"
onClick={() => {
setConfirmDelete(false)
deleteUser({
variables: {
id: user.id,
},
})
}}
>
{t(
'settings.users.confirm_delete_user.action',
'Delete {{user}}',
{ user: user.username }
)}
</Button>
</Modal.Actions>
</Modal>
}
/>
</div>
</TableCell>
</TableRow>

View File

@ -3,7 +3,6 @@ import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { TextField } from '../../primitives/form/Input'
import { MessageContainer } from './SharePage'
// import { Message, Header, Form, Input, Icon } from 'semantic-ui-react'
type ProtectedTokenEnterPasswordProps = {
refetchWithPassword(password: string): void
@ -23,7 +22,6 @@ const PasswordProtectedShare = ({
handleSubmit,
} = useForm()
// const [passwordValue, setPasswordValue] = useState('')
const [invalidPassword, setInvalidPassword] = useState(false)
const onSubmit = () => {
@ -66,21 +64,6 @@ const PasswordProtectedShare = ({
fullWidth={true}
sizeVariant="big"
/>
{/* <Form.Field>
<label>{t('login_page.field.password', 'Password')}</label>
<Input
loading={loading}
disabled={loading}
onKeyUp={(event: KeyboardEvent) =>
event.key == 'Enter' && onSubmit()
}
onChange={e => setPasswordValue(e.target.value)}
placeholder={t('login_page.field.password', 'Password')}
type="password"
icon={<Icon onClick={onSubmit} link name="arrow right" />}
/>
</Form.Field>
{errorMessage} */}
</MessageContainer>
)
}

View File

@ -1,5 +1,5 @@
import React from 'react'
import { Loader } from 'semantic-ui-react'
import Loader from '../primitives/Loader'
type PaginateLoaderProps = {
active: boolean
@ -8,12 +8,10 @@ type PaginateLoaderProps = {
const PaginateLoader = ({ active, text }: PaginateLoaderProps) => (
<Loader
style={{ margin: '42px 0 24px 0', opacity: active ? '1' : '0' }}
inline="centered"
active={true}
>
{text}
</Loader>
active
message={text}
className={active ? 'opacity-100' : 'opacity-0'}
/>
)
export default PaginateLoader

View File

@ -1,10 +1,10 @@
import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { Loader } from 'semantic-ui-react'
import Layout from '../layout/Layout'
import { clearTokenCookie } from '../../helpers/authentication'
import { useTranslation } from 'react-i18next'
import Loader from '../../primitives/Loader'
const AuthorizedRoute = React.lazy(() => import('./AuthorizedRoute'))
@ -33,7 +33,7 @@ const Routes = () => {
<React.Suspense
fallback={
<Layout title={t('general.loading.page', 'Loading page')}>
<Loader active>{t('general.loading.page', 'Loading page')}</Loader>
<Loader message={t('general.loading.page', 'Loading page')} active />
</Layout>
}
>

View File

@ -1,13 +1,20 @@
import React from 'react'
import React, { CSSProperties } from 'react'
type LoaderProps = {
active: boolean
message?: string
size?: 'small' | 'default'
className?: string
style?: CSSProperties
}
const Loader = ({ active, message }: LoaderProps) => {
const Loader = ({ active, message, className, style }: LoaderProps) => {
if (!active) return null
return <div>{message ?? 'Loading...'}</div>
return (
<div className={className} style={style}>
{message ?? 'Loading...'}
</div>
)
}
export default Loader

View File

@ -12,7 +12,7 @@ export type ModalAction = {
type ModalProps = {
title: string
description: React.ReactNode
children: React.ReactNode
children?: React.ReactNode
actions: ModalAction[]
open: boolean
onClose(): void

View File

@ -1,6 +1,5 @@
import React, { forwardRef } from 'react'
import classNames, { Argument as ClassNamesArg } from 'classnames'
import { ReactComponent as ActionArrowIcon } from './icons/textboxActionArrow.svg'
import { ReactComponent as LoadingSpinnerIcon } from './icons/textboxLoadingSpinner.svg'
import styled from 'styled-components'
@ -92,7 +91,12 @@ export const TextField = forwardRef(
className={classNames(
'absolute top-[1px] right-0 p-2 text-gray-600 disabled:text-gray-400 disabled:cursor-default'
)}
onClick={() => action()}
onClick={e => {
e.preventDefault()
e.stopPropagation()
action()
return false
}}
>
<ActionArrowIcon
className={classNames(