From bb6ec852b0741ab976d874f29f7961a1d4936962 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 21:16:20 +0300 Subject: [PATCH 1/9] some logic rewritten in add dialog --- web/src/components/Add/AddDialog.jsx | 91 ++++++++++++++++++---------- web/src/utils/usePreviousState.js | 11 ++++ 2 files changed, 70 insertions(+), 32 deletions(-) create mode 100755 web/src/utils/usePreviousState.js diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 678c231..abc25ab 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -15,6 +15,7 @@ import { useMediaQuery } from '@material-ui/core' import parseTorrent from 'parse-torrent' import ptt from 'parse-torrent-title' import CircularProgress from '@material-ui/core/CircularProgress' +import usePreviousState from 'utils/usePreviousState' import { checkImageURL, getMoviePosters, chechTorrentSource } from './helpers' import { @@ -38,6 +39,23 @@ import { RightSideContainer, } from './style' +const parseTorrentTitle = (parsingSource, callback) => { + parseTorrent.remote(parsingSource, (err, { name, files } = {}) => { + if (!name || err) return callback(null) + + const torrentName = ptt.parse(name).title + const nameOfFileInsideTorrent = files ? ptt.parse(files[0].name).title : null + + let newTitle = torrentName + if (nameOfFileInsideTorrent) { + // taking shorter title because in most cases it is more accurate + newTitle = torrentName.length < nameOfFileInsideTorrent.length ? torrentName : nameOfFileInsideTorrent + } + + callback(newTitle) + }) +} + export default function AddDialog({ handleClose }) { const { t } = useTranslation() const [torrentSource, setTorrentSource] = useState('') @@ -48,11 +66,11 @@ export default function AddDialog({ handleClose }) { const [isTorrentSourceCorrect, setIsTorrentSourceCorrect] = useState(false) const [posterList, setPosterList] = useState() const [isUserInteractedWithPoster, setIsUserInteractedWithPoster] = useState(false) - const [isUserInteractedWithTitle, setIsUserInteractedWithTitle] = useState(false) const [currentLang] = useChangeLanguage() const [selectedFile, setSelectedFile] = useState() const [posterSearchLanguage, setPosterSearchLanguage] = useState(currentLang === 'ru' ? 'ru' : 'en') const [isLoadingButton, setIsLoadingButton] = useState(false) + const [skipDebounce, setSkipDebounce] = useState(false) const fullScreen = useMediaQuery('@media (max-width:930px)') @@ -60,6 +78,7 @@ export default function AddDialog({ handleClose }) { () => (movieName, language, settings = {}) => { const { shouldRefreshMainPoster = false } = settings + getMoviePosters(movieName, language).then(urlList => { if (urlList) { setPosterList(urlList) @@ -83,37 +102,51 @@ export default function AddDialog({ handleClose }) { [isUserInteractedWithPoster], ) - const delayedPosterSearch = useMemo(() => debounce(posterSearch, 700), [posterSearch]) + const delayedPosterSearch = useMemo(() => debounce(posterSearch, 2700), [posterSearch]) + + const prevTitleState = usePreviousState(title) + const prevTorrentSourceState = usePreviousState(torrentSource) useEffect(() => { - if (isUserInteractedWithTitle) return + // if torrentSource is updated then we are checking that source is valid and getting title from the source + const torrentSourceChanged = torrentSource !== prevTorrentSourceState - parseTorrent.remote(selectedFile || torrentSource, (err, parsedTorrent) => { - if (err) throw err - if (!parsedTorrent.name) return + const isCorrectSource = chechTorrentSource(torrentSource) + if (!isCorrectSource) return - const torrentName = ptt.parse(parsedTorrent.name).title - const fileInsideTorrentName = parsedTorrent.files ? ptt.parse(parsedTorrent.files[0].name).title : null + setIsTorrentSourceCorrect(true) - let value = torrentName - if (fileInsideTorrentName) { - value = torrentName.length < fileInsideTorrentName.length ? torrentName : fileInsideTorrentName - } + if (torrentSourceChanged) { + parseTorrentTitle(selectedFile || torrentSource, newTitle => { + if (!newTitle) return - setTitle(value) - delayedPosterSearch(value, posterSearchLanguage) - }) - }, [selectedFile, delayedPosterSearch, torrentSource, posterSearchLanguage, isUserInteractedWithTitle]) + setSkipDebounce(true) + setTitle(newTitle) + }) + } + }, [prevTorrentSourceState, selectedFile, torrentSource]) useEffect(() => { - setIsTorrentSourceCorrect(chechTorrentSource(torrentSource)) + // if title exists and title was changed then search poster. + const titleChanged = title !== prevTitleState + if (!titleChanged || !title) return - if (!torrentSource) { + if (skipDebounce) { + posterSearch(title, posterSearchLanguage) + setSkipDebounce(false) + } else { + delayedPosterSearch(title, posterSearchLanguage) + } + }, [title, prevTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce]) + + useEffect(() => { + if (!selectedFile && !torrentSource) { + setTitle('') setPosterUrl('') setPosterList() setIsPosterUrlCorrect(false) } - }, [torrentSource]) + }, [selectedFile, torrentSource]) const handleCapture = files => { const [file] = files @@ -132,12 +165,7 @@ export default function AddDialog({ handleClose }) { } const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value) - const handleTitleChange = ({ target: { value } }) => { - setTitle(value) - delayedPosterSearch(value, posterSearchLanguage) - - torrentSource && setIsUserInteractedWithTitle(true) - } + const handleTitleChange = ({ target: { value } }) => setTitle(value) const handlePosterUrlChange = ({ target: { value } }) => { setPosterUrl(value) checkImageURL(value).then(setIsPosterUrlCorrect) @@ -155,10 +183,7 @@ export default function AddDialog({ handleClose }) { data.append('file', selectedFile) title && data.append('title', title) posterUrl && data.append('poster', posterUrl) - axios - .post(torrentUploadHost(), data) - // .then(res => console.log(res)) - .finally(handleClose) + axios.post(torrentUploadHost(), data).finally(handleClose) } else { // link save axios @@ -170,7 +195,6 @@ export default function AddDialog({ handleClose }) { const clearSelectedFile = () => { setSelectedFile() setTorrentSource('') - setIsUserInteractedWithTitle(false) } const userChangesPosterUrl = url => { @@ -232,7 +256,8 @@ export default function AddDialog({ handleClose }) { - + {/* */} + diff --git a/web/src/utils/usePreviousState.js b/web/src/utils/usePreviousState.js new file mode 100755 index 0000000..ca2a535 --- /dev/null +++ b/web/src/utils/usePreviousState.js @@ -0,0 +1,11 @@ +import { useEffect, useRef } from 'react' + +export default function usePreviousState(value) { + const ref = useRef(value) + + useEffect(() => { + ref.current = value + }, [value]) + + return ref.current +} From ef9a16daa951317654da65cedc82a14d15fd80fd Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 21:53:29 +0300 Subject: [PATCH 2/9] =?UTF-8?q?=D0=BA=D1=83=D0=B0=D1=84=D1=81=D0=B5=D1=89?= =?UTF-8?q?=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/Add/AddDialog.jsx | 2 +- web/src/components/Add/helpers.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index abc25ab..3bc36f5 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -129,7 +129,7 @@ export default function AddDialog({ handleClose }) { useEffect(() => { // if title exists and title was changed then search poster. const titleChanged = title !== prevTitleState - if (!titleChanged || !title) return + if (!titleChanged) return if (skipDebounce) { posterSearch(title, posterSearchLanguage) diff --git a/web/src/components/Add/helpers.js b/web/src/components/Add/helpers.js index 7203d9e..c3fa16a 100644 --- a/web/src/components/Add/helpers.js +++ b/web/src/components/Add/helpers.js @@ -1,6 +1,7 @@ import axios from 'axios' export const getMoviePosters = (movieName, language = 'en') => { + if (!movieName) return new Promise(resolve => resolve(null)) const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&language=${language}&include_image_language=${language},null&query=${movieName}` return axios From 6df5f1c4893b6060d2e920c78f39d26eb0bb7395 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 21:54:00 +0300 Subject: [PATCH 3/9] =?UTF-8?q?Revert=20"=D0=BA=D1=83=D0=B0=D1=84=D1=81?= =?UTF-8?q?=D0=B5=D1=89=D0=BA"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit ef9a16daa951317654da65cedc82a14d15fd80fd. --- web/src/components/Add/AddDialog.jsx | 2 +- web/src/components/Add/helpers.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 3bc36f5..abc25ab 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -129,7 +129,7 @@ export default function AddDialog({ handleClose }) { useEffect(() => { // if title exists and title was changed then search poster. const titleChanged = title !== prevTitleState - if (!titleChanged) return + if (!titleChanged || !title) return if (skipDebounce) { posterSearch(title, posterSearchLanguage) diff --git a/web/src/components/Add/helpers.js b/web/src/components/Add/helpers.js index c3fa16a..7203d9e 100644 --- a/web/src/components/Add/helpers.js +++ b/web/src/components/Add/helpers.js @@ -1,7 +1,6 @@ import axios from 'axios' export const getMoviePosters = (movieName, language = 'en') => { - if (!movieName) return new Promise(resolve => resolve(null)) const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&language=${language}&include_image_language=${language},null&query=${movieName}` return axios From d4d117dcc4a42b669cdea0f0f14eea44c823e783 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 21:55:56 +0300 Subject: [PATCH 4/9] refactor --- web/src/components/Add/AddDialog.jsx | 2 +- web/src/components/Add/helpers.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index abc25ab..3bc36f5 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -129,7 +129,7 @@ export default function AddDialog({ handleClose }) { useEffect(() => { // if title exists and title was changed then search poster. const titleChanged = title !== prevTitleState - if (!titleChanged || !title) return + if (!titleChanged) return if (skipDebounce) { posterSearch(title, posterSearchLanguage) diff --git a/web/src/components/Add/helpers.js b/web/src/components/Add/helpers.js index 7203d9e..c3fa16a 100644 --- a/web/src/components/Add/helpers.js +++ b/web/src/components/Add/helpers.js @@ -1,6 +1,7 @@ import axios from 'axios' export const getMoviePosters = (movieName, language = 'en') => { + if (!movieName) return new Promise(resolve => resolve(null)) const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&language=${language}&include_image_language=${language},null&query=${movieName}` return axios From 4eb934ae9c1804f8c28bf62f1eb70f36f05d165a Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 22:31:54 +0300 Subject: [PATCH 5/9] refactor --- web/src/components/Add/AddDialog.jsx | 5 +++++ web/src/components/Add/helpers.js | 12 +++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 3bc36f5..ad9a1a3 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -77,6 +77,11 @@ export default function AddDialog({ handleClose }) { const posterSearch = useMemo( () => (movieName, language, settings = {}) => { + if (!movieName) { + setPosterList() + removePoster() + return + } const { shouldRefreshMainPoster = false } = settings getMoviePosters(movieName, language).then(urlList => { diff --git a/web/src/components/Add/helpers.js b/web/src/components/Add/helpers.js index c3fa16a..8371a95 100644 --- a/web/src/components/Add/helpers.js +++ b/web/src/components/Add/helpers.js @@ -1,11 +1,17 @@ import axios from 'axios' export const getMoviePosters = (movieName, language = 'en') => { - if (!movieName) return new Promise(resolve => resolve(null)) - const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&language=${language}&include_image_language=${language},null&query=${movieName}` + const url = 'http://api.themoviedb.org/3/search/multi' return axios - .get(request) + .get(url, { + params: { + api_key: process.env.REACT_APP_TMDB_API_KEY, + language, + include_image_language: `${language},null`, + query: movieName, + }, + }) .then(({ data: { results } }) => results.filter(el => el.poster_path).map(el => `https://image.tmdb.org/t/p/w300${el.poster_path}`), ) From b53648afa499d1df8687b146f91288ed96ca16b0 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 22:45:31 +0300 Subject: [PATCH 6/9] refactor --- web/src/components/Add/AddDialog.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index ad9a1a3..fd1d294 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -302,7 +302,6 @@ export default function AddDialog({ handleClose }) { const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en' setPosterSearchLanguage(newLanguage) posterSearch(title, newLanguage, { shouldRefreshMainPoster: true }) - console.log(':334') }} showbutton={+isPosterUrlCorrect} color='primary' From 1c8b5f74474702569bf29edfff40f54047638d17 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 23:06:49 +0300 Subject: [PATCH 7/9] refactor --- web/src/components/Add/AddDialog.jsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index fd1d294..728da31 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -107,7 +107,7 @@ export default function AddDialog({ handleClose }) { [isUserInteractedWithPoster], ) - const delayedPosterSearch = useMemo(() => debounce(posterSearch, 2700), [posterSearch]) + const delayedPosterSearch = useMemo(() => debounce(posterSearch, 700), [posterSearch]) const prevTitleState = usePreviousState(title) const prevTorrentSourceState = usePreviousState(torrentSource) @@ -117,7 +117,7 @@ export default function AddDialog({ handleClose }) { const torrentSourceChanged = torrentSource !== prevTorrentSourceState const isCorrectSource = chechTorrentSource(torrentSource) - if (!isCorrectSource) return + if (!isCorrectSource) return setIsTorrentSourceCorrect(false) setIsTorrentSourceCorrect(true) @@ -144,12 +144,17 @@ export default function AddDialog({ handleClose }) { } }, [title, prevTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce]) + const removePoster = () => { + setIsPosterUrlCorrect(false) + setPosterUrl('') + } + useEffect(() => { if (!selectedFile && !torrentSource) { setTitle('') - setPosterUrl('') setPosterList() - setIsPosterUrlCorrect(false) + removePoster() + setIsUserInteractedWithPoster(false) } }, [selectedFile, torrentSource]) @@ -164,11 +169,6 @@ export default function AddDialog({ handleClose }) { const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' }) - const removePoster = () => { - setIsPosterUrlCorrect(false) - setPosterUrl('') - } - const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value) const handleTitleChange = ({ target: { value } }) => setTitle(value) const handlePosterUrlChange = ({ target: { value } }) => { @@ -261,8 +261,7 @@ export default function AddDialog({ handleClose }) { - {/* */} - + From 3391fef9b5225a26db00d85a4b00819b1ed7fef1 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 23:18:36 +0300 Subject: [PATCH 8/9] refactor --- web/src/components/Add/AddDialog.jsx | 24 ++---------------------- web/src/components/Add/helpers.js | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 728da31..cb9e1d7 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -12,12 +12,10 @@ import useChangeLanguage from 'utils/useChangeLanguage' import { Cancel as CancelIcon } from '@material-ui/icons' import { useDropzone } from 'react-dropzone' import { useMediaQuery } from '@material-ui/core' -import parseTorrent from 'parse-torrent' -import ptt from 'parse-torrent-title' import CircularProgress from '@material-ui/core/CircularProgress' import usePreviousState from 'utils/usePreviousState' -import { checkImageURL, getMoviePosters, chechTorrentSource } from './helpers' +import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { ButtonWrapper, CancelIconWrapper, @@ -39,23 +37,6 @@ import { RightSideContainer, } from './style' -const parseTorrentTitle = (parsingSource, callback) => { - parseTorrent.remote(parsingSource, (err, { name, files } = {}) => { - if (!name || err) return callback(null) - - const torrentName = ptt.parse(name).title - const nameOfFileInsideTorrent = files ? ptt.parse(files[0].name).title : null - - let newTitle = torrentName - if (nameOfFileInsideTorrent) { - // taking shorter title because in most cases it is more accurate - newTitle = torrentName.length < nameOfFileInsideTorrent.length ? torrentName : nameOfFileInsideTorrent - } - - callback(newTitle) - }) -} - export default function AddDialog({ handleClose }) { const { t } = useTranslation() const [torrentSource, setTorrentSource] = useState('') @@ -76,13 +57,12 @@ export default function AddDialog({ handleClose }) { const posterSearch = useMemo( () => - (movieName, language, settings = {}) => { + (movieName, language, { shouldRefreshMainPoster = false } = {}) => { if (!movieName) { setPosterList() removePoster() return } - const { shouldRefreshMainPoster = false } = settings getMoviePosters(movieName, language).then(urlList => { if (urlList) { diff --git a/web/src/components/Add/helpers.js b/web/src/components/Add/helpers.js index 8371a95..2c52395 100644 --- a/web/src/components/Add/helpers.js +++ b/web/src/components/Add/helpers.js @@ -1,4 +1,6 @@ import axios from 'axios' +import parseTorrent from 'parse-torrent' +import ptt from 'parse-torrent-title' export const getMoviePosters = (movieName, language = 'en') => { const url = 'http://api.themoviedb.org/3/search/multi' @@ -34,3 +36,20 @@ const hashRegex = /^\b[0-9a-f]{32}\b$|^\b[0-9a-f]{40}\b$|^\b[0-9a-f]{64}\b$/i const torrentRegex = /^.*\.(torrent)$/i export const chechTorrentSource = source => source.match(hashRegex) !== null || source.match(magnetRegex) !== null || source.match(torrentRegex) !== null + +export const parseTorrentTitle = (parsingSource, callback) => { + parseTorrent.remote(parsingSource, (err, { name, files } = {}) => { + if (!name || err) return callback(null) + + const torrentName = ptt.parse(name).title + const nameOfFileInsideTorrent = files ? ptt.parse(files[0].name).title : null + + let newTitle = torrentName + if (nameOfFileInsideTorrent) { + // taking shorter title because in most cases it is more accurate + newTitle = torrentName.length < nameOfFileInsideTorrent.length ? torrentName : nameOfFileInsideTorrent + } + + callback(newTitle) + }) +} From 21806f6cadaaaca5e4263cf3b054033e2113910b Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 10 Jun 2021 23:46:00 +0300 Subject: [PATCH 9/9] refactor --- web/src/components/Add/AddDialog.jsx | 198 +++--------------- web/src/components/Add/LeftSideComponent.jsx | 87 ++++++++ web/src/components/Add/RightSideComponent.jsx | 120 +++++++++++ 3 files changed, 235 insertions(+), 170 deletions(-) create mode 100644 web/src/components/Add/LeftSideComponent.jsx create mode 100644 web/src/components/Add/RightSideComponent.jsx diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index cb9e1d7..6e5bdbf 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -1,46 +1,23 @@ import { useEffect, useMemo, useState } from 'react' import Button from '@material-ui/core/Button' -import TextField from '@material-ui/core/TextField' import Dialog from '@material-ui/core/Dialog' import { torrentsHost, torrentUploadHost } from 'utils/Hosts' import axios from 'axios' import { useTranslation } from 'react-i18next' -import { NoImageIcon, AddItemIcon, TorrentIcon } from 'icons' import debounce from 'lodash/debounce' -import { v4 as uuidv4 } from 'uuid' import useChangeLanguage from 'utils/useChangeLanguage' -import { Cancel as CancelIcon } from '@material-ui/icons' -import { useDropzone } from 'react-dropzone' import { useMediaQuery } from '@material-ui/core' import CircularProgress from '@material-ui/core/CircularProgress' import usePreviousState from 'utils/usePreviousState' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' -import { - ButtonWrapper, - CancelIconWrapper, - ClearPosterButton, - PosterLanguageSwitch, - Content, - Header, - IconWrapper, - RightSide, - Poster, - PosterSuggestions, - PosterSuggestionsItem, - PosterWrapper, - LeftSide, - LeftSideBottomSectionFileSelected, - LeftSideBottomSectionNoFile, - LeftSideTopSection, - TorrentIconWrapper, - RightSideContainer, -} from './style' +import { ButtonWrapper, Content, Header } from './style' +import RightSideComponent from './RightSideComponent' +import LeftSideComponent from './LeftSideComponent' export default function AddDialog({ handleClose }) { const { t } = useTranslation() const [torrentSource, setTorrentSource] = useState('') - const [isTorrentSourceActive, setIsTorrentSourceActive] = useState(false) const [title, setTitle] = useState('') const [posterUrl, setPosterUrl] = useState('') const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false) @@ -138,26 +115,6 @@ export default function AddDialog({ handleClose }) { } }, [selectedFile, torrentSource]) - const handleCapture = files => { - const [file] = files - if (!file) return - - setIsUserInteractedWithPoster(false) - setSelectedFile(file) - setTorrentSource(file.name) - } - - const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' }) - - const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value) - const handleTitleChange = ({ target: { value } }) => setTitle(value) - const handlePosterUrlChange = ({ target: { value } }) => { - setPosterUrl(value) - checkImageURL(value).then(setIsPosterUrlCorrect) - setIsUserInteractedWithPoster(!!value) - setPosterList() - } - const handleSave = () => { setIsLoadingButton(true) @@ -177,17 +134,6 @@ export default function AddDialog({ handleClose }) { } } - const clearSelectedFile = () => { - setSelectedFile() - setTorrentSource('') - } - - const userChangesPosterUrl = url => { - setPosterUrl(url) - checkImageURL(url).then(setIsPosterUrlCorrect) - setIsUserInteractedWithPoster(true) - } - return ( {t('AddNewTorrent')} - - - setIsTorrentSourceActive(true)} - onBlur={() => setIsTorrentSourceActive(false)} - inputProps={{ autoComplete: 'off' }} - disabled={!!selectedFile} - /> - + - {selectedFile ? ( - - - - - - - - - - ) : ( - - -
{t('AppendFile.Or')}
- - - -
{t('AppendFile.ClickOrDrag')}
- - - )} - - - - - - - - - - {isPosterUrlCorrect ? poster : } - - - - {posterList - ?.filter(url => url !== posterUrl) - .slice(0, 12) - .map(url => ( - userChangesPosterUrl(url)} key={uuidv4()}> - poster - - ))} - - - {currentLang !== 'en' && ( - { - const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en' - setPosterSearchLanguage(newLanguage) - posterSearch(title, newLanguage, { shouldRefreshMainPoster: true }) - }} - showbutton={+isPosterUrlCorrect} - color='primary' - variant='contained' - size='small' - > - {posterSearchLanguage === 'en' ? 'EN' : 'RU'} - - )} - - { - removePoster() - setIsUserInteractedWithPoster(true) - }} - color='primary' - variant='contained' - size='small' - > - {t('Clear')} - - - - - - + diff --git a/web/src/components/Add/LeftSideComponent.jsx b/web/src/components/Add/LeftSideComponent.jsx new file mode 100644 index 0000000..11c9df9 --- /dev/null +++ b/web/src/components/Add/LeftSideComponent.jsx @@ -0,0 +1,87 @@ +import { useTranslation } from 'react-i18next' +import { useDropzone } from 'react-dropzone' +import { AddItemIcon, TorrentIcon } from 'icons' +import TextField from '@material-ui/core/TextField' +import { Cancel as CancelIcon } from '@material-ui/icons' +import { useState } from 'react' + +import { + CancelIconWrapper, + IconWrapper, + LeftSide, + LeftSideBottomSectionFileSelected, + LeftSideBottomSectionNoFile, + LeftSideTopSection, + TorrentIconWrapper, +} from './style' + +export default function LeftSideComponent({ + setIsUserInteractedWithPoster, + setSelectedFile, + torrentSource, + setTorrentSource, + selectedFile, +}) { + const { t } = useTranslation() + + const handleCapture = files => { + const [file] = files + if (!file) return + + setIsUserInteractedWithPoster(false) + setSelectedFile(file) + setTorrentSource(file.name) + } + + const clearSelectedFile = () => { + setSelectedFile() + setTorrentSource('') + } + + const [isTorrentSourceActive, setIsTorrentSourceActive] = useState(false) + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' }) + + const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value) + + return ( + + + setIsTorrentSourceActive(true)} + onBlur={() => setIsTorrentSourceActive(false)} + inputProps={{ autoComplete: 'off' }} + disabled={!!selectedFile} + /> + + + {selectedFile ? ( + + + + + + + + + + ) : ( + + +
{t('AppendFile.Or')}
+ + + +
{t('AppendFile.ClickOrDrag')}
+ + + )} + + ) +} diff --git a/web/src/components/Add/RightSideComponent.jsx b/web/src/components/Add/RightSideComponent.jsx new file mode 100644 index 0000000..b76e917 --- /dev/null +++ b/web/src/components/Add/RightSideComponent.jsx @@ -0,0 +1,120 @@ +import { useTranslation } from 'react-i18next' +import { v4 as uuidv4 } from 'uuid' +import { NoImageIcon } from 'icons' +import { TextField } from '@material-ui/core' + +import { + ClearPosterButton, + PosterLanguageSwitch, + RightSide, + Poster, + PosterSuggestions, + PosterSuggestionsItem, + PosterWrapper, + RightSideContainer, +} from './style' +import { checkImageURL } from './helpers' + +export default function RightSideComponent({ + setTitle, + setPosterUrl, + setIsPosterUrlCorrect, + setIsUserInteractedWithPoster, + setPosterList, + isTorrentSourceCorrect, + title, + posterUrl, + isPosterUrlCorrect, + posterList, + currentLang, + posterSearchLanguage, + setPosterSearchLanguage, + posterSearch, + removePoster, + torrentSource, +}) { + const { t } = useTranslation() + + const handleTitleChange = ({ target: { value } }) => setTitle(value) + const handlePosterUrlChange = ({ target: { value } }) => { + setPosterUrl(value) + checkImageURL(value).then(setIsPosterUrlCorrect) + setIsUserInteractedWithPoster(!!value) + setPosterList() + } + const userChangesPosterUrl = url => { + setPosterUrl(url) + checkImageURL(url).then(setIsPosterUrlCorrect) + setIsUserInteractedWithPoster(true) + } + + return ( + + + + + + + + {isPosterUrlCorrect ? poster : } + + + + {posterList + ?.filter(url => url !== posterUrl) + .slice(0, 12) + .map(url => ( + userChangesPosterUrl(url)} key={uuidv4()}> + poster + + ))} + + + {currentLang !== 'en' && ( + { + const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en' + setPosterSearchLanguage(newLanguage) + posterSearch(title, newLanguage, { shouldRefreshMainPoster: true }) + }} + showbutton={+isPosterUrlCorrect} + color='primary' + variant='contained' + size='small' + > + {posterSearchLanguage === 'en' ? 'EN' : 'RU'} + + )} + + { + removePoster() + setIsUserInteractedWithPoster(true) + }} + color='primary' + variant='contained' + size='small' + > + {t('Clear')} + + + + + + + ) +}