From 5654bc42054792a610341d12e1c2d77b227ffd0d Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 14:07:30 +0900 Subject: [PATCH 01/18] Move channel list viewer to `Channel/` See also: #5 --- wlm-ui/src/MainPage/{ => Channel}/ChannelList.tsx | 6 +++--- wlm-ui/src/MainPage/MainPage.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename wlm-ui/src/MainPage/{ => Channel}/ChannelList.tsx (88%) diff --git a/wlm-ui/src/MainPage/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx similarity index 88% rename from wlm-ui/src/MainPage/ChannelList.tsx rename to wlm-ui/src/MainPage/Channel/ChannelList.tsx index 04a64f0..9a88d4a 100644 --- a/wlm-ui/src/MainPage/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -1,9 +1,9 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { channelListActions, selectChannelList } from '../store/slices/channel/channel'; +import { channelListActions, selectChannelList } from '../../store/slices/channel/channel'; -const ChannelListTable = () => { +const ChannelList = () => { const channelListState = useSelector(selectChannelList); useEffect(() => { localStorage.setItem('channel.channelList', JSON.stringify(channelListState.channels)); @@ -38,4 +38,4 @@ const ChannelListTable = () => { ); }; -export default ChannelListTable; +export default ChannelList; diff --git a/wlm-ui/src/MainPage/MainPage.tsx b/wlm-ui/src/MainPage/MainPage.tsx index 49c7f71..e3900df 100644 --- a/wlm-ui/src/MainPage/MainPage.tsx +++ b/wlm-ui/src/MainPage/MainPage.tsx @@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'; import { AppDispatch } from '../store'; import { signout } from '../store/slices/user/user'; import { fetchList } from '../store/slices/channel/channel'; -import ChannelListTable from './ChannelList'; +import ChannelList from './Channel/ChannelList'; const MainPage = () => { const dispatch = useDispatch(); @@ -23,7 +23,7 @@ const MainPage = () => {

Channel list

- +
); From f65f2ae624344af1045fdfb1658c40fb18d1a4b6 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 14:09:10 +0900 Subject: [PATCH 02/18] Apply blank line convention See also: #5 --- wlm-ui/src/InitPage/InitPage.tsx | 1 - wlm-ui/src/MainPage/Channel/ChannelList.tsx | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/wlm-ui/src/InitPage/InitPage.tsx b/wlm-ui/src/InitPage/InitPage.tsx index 067b31e..6f3018d 100644 --- a/wlm-ui/src/InitPage/InitPage.tsx +++ b/wlm-ui/src/InitPage/InitPage.tsx @@ -7,7 +7,6 @@ import { signin } from '../store/slices/user/user'; const InitPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); - const dispatch = useDispatch(); const onClickSignin = async () => { diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index 9a88d4a..fe2e4c0 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -5,6 +5,7 @@ import { channelListActions, selectChannelList } from '../../store/slices/channe const ChannelList = () => { const channelListState = useSelector(selectChannelList); + useEffect(() => { localStorage.setItem('channel.channelList', JSON.stringify(channelListState.channels)); }, [channelListState]); From 766b77e3e3a1d6d3c541aa6976eb61b537974a35 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 14:26:53 +0900 Subject: [PATCH 03/18] Add `section` for channel list viewer I used `scss` instead of `css`, which is the advanced version of `css`. See also: #5 --- wlm-ui/package.json | 1 + wlm-ui/src/MainPage/Channel/ChannelList.scss | 7 + wlm-ui/src/MainPage/Channel/ChannelList.tsx | 21 +-- wlm-ui/yarn.lock | 129 ++++++++++++++++++- 4 files changed, 138 insertions(+), 20 deletions(-) create mode 100644 wlm-ui/src/MainPage/Channel/ChannelList.scss diff --git a/wlm-ui/package.json b/wlm-ui/package.json index d0de65c..004e783 100644 --- a/wlm-ui/package.json +++ b/wlm-ui/package.json @@ -21,6 +21,7 @@ "react-router-dom": "^6.28.0", "react-scripts": "5.0.1", "redux": "^5.0.1", + "sass": "^1.81.0", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.scss b/wlm-ui/src/MainPage/Channel/ChannelList.scss new file mode 100644 index 0000000..d8e29cd --- /dev/null +++ b/wlm-ui/src/MainPage/Channel/ChannelList.scss @@ -0,0 +1,7 @@ +.container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; +} diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index fe2e4c0..ac21db6 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { channelListActions, selectChannelList } from '../../store/slices/channel/channel'; +import './ChannelList.scss'; const ChannelList = () => { const channelListState = useSelector(selectChannelList); @@ -17,25 +18,7 @@ const ChannelList = () => { }; return ( - - - - - - - {channelListState.channels.map((chinfo) => { - const channel = chinfo.channel.channel; - return ( - - - - - - ); - })} -
UseChannelName
{channel}{chinfo.channel.name}
+
); }; diff --git a/wlm-ui/yarn.lock b/wlm-ui/yarn.lock index 150117c..c27f4ac 100644 --- a/wlm-ui/yarn.lock +++ b/wlm-ui/yarn.lock @@ -1672,6 +1672,95 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@parcel/watcher-android-arm64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz#e32d3dda6647791ee930556aee206fcd5ea0fb7a" + integrity sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ== + +"@parcel/watcher-darwin-arm64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz#0d9e680b7e9ec1c8f54944f1b945aa8755afb12f" + integrity sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw== + +"@parcel/watcher-darwin-x64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz#f9f1d5ce9d5878d344f14ef1856b7a830c59d1bb" + integrity sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA== + +"@parcel/watcher-freebsd-x64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz#2b77f0c82d19e84ff4c21de6da7f7d096b1a7e82" + integrity sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw== + +"@parcel/watcher-linux-arm-glibc@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz#92ed322c56dbafa3d2545dcf2803334aee131e42" + integrity sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA== + +"@parcel/watcher-linux-arm-musl@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz#cd48e9bfde0cdbbd2ecd9accfc52967e22f849a4" + integrity sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA== + +"@parcel/watcher-linux-arm64-glibc@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz#7b81f6d5a442bb89fbabaf6c13573e94a46feb03" + integrity sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA== + +"@parcel/watcher-linux-arm64-musl@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz#dcb8ff01077cdf59a18d9e0a4dff7a0cfe5fd732" + integrity sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q== + +"@parcel/watcher-linux-x64-glibc@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz#2e254600fda4e32d83942384d1106e1eed84494d" + integrity sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw== + +"@parcel/watcher-linux-x64-musl@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz#01fcea60fedbb3225af808d3f0a7b11229792eef" + integrity sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA== + +"@parcel/watcher-win32-arm64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz#87cdb16e0783e770197e52fb1dc027bb0c847154" + integrity sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig== + +"@parcel/watcher-win32-ia32@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz#778c39b56da33e045ba21c678c31a9f9d7c6b220" + integrity sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA== + +"@parcel/watcher-win32-x64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz#33873876d0bbc588aacce38e90d1d7480ce81cb7" + integrity sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw== + +"@parcel/watcher@^2.4.1": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.0.tgz#5c88818b12b8de4307a9d3e6dc3e28eba0dfbd10" + integrity sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ== + dependencies: + detect-libc "^1.0.3" + is-glob "^4.0.3" + micromatch "^4.0.5" + node-addon-api "^7.0.0" + optionalDependencies: + "@parcel/watcher-android-arm64" "2.5.0" + "@parcel/watcher-darwin-arm64" "2.5.0" + "@parcel/watcher-darwin-x64" "2.5.0" + "@parcel/watcher-freebsd-x64" "2.5.0" + "@parcel/watcher-linux-arm-glibc" "2.5.0" + "@parcel/watcher-linux-arm-musl" "2.5.0" + "@parcel/watcher-linux-arm64-glibc" "2.5.0" + "@parcel/watcher-linux-arm64-musl" "2.5.0" + "@parcel/watcher-linux-x64-glibc" "2.5.0" + "@parcel/watcher-linux-x64-musl" "2.5.0" + "@parcel/watcher-win32-arm64" "2.5.0" + "@parcel/watcher-win32-ia32" "2.5.0" + "@parcel/watcher-win32-x64" "2.5.0" + "@pkgjs/parseargs@^0.11.0": version "0.11.0" resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" @@ -3375,6 +3464,13 @@ chokidar@^3.4.2, chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" +chokidar@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.1.tgz#4a6dff66798fb0f72a94f616abbd7e1a19f31d41" + integrity sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA== + dependencies: + readdirp "^4.0.1" + chrome-trace-event@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b" @@ -3972,6 +4068,11 @@ destroy@1.2.0: resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015" integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg== +detect-libc@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" + integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg== + detect-newline@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" @@ -5530,6 +5631,11 @@ immer@^9.0.7: resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176" integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA== +immutable@^5.0.2: + version "5.0.3" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.0.3.tgz#aa037e2313ea7b5d400cd9298fa14e404c933db1" + integrity sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw== + import-fresh@^3.1.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -7015,6 +7121,11 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" +node-addon-api@^7.0.0: + version "7.1.1" + resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558" + integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ== + node-forge@^1: version "1.3.1" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3" @@ -8306,6 +8417,11 @@ readable-stream@^3.0.6: string_decoder "^1.1.1" util-deprecate "^1.0.1" +readdirp@^4.0.1: + version "4.0.2" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.0.2.tgz#388fccb8b75665da3abffe2d8f8ed59fe74c230a" + integrity sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA== + readdirp@~3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" @@ -8594,6 +8710,17 @@ sass-loader@^12.3.0: klona "^2.0.4" neo-async "^2.6.2" +sass@^1.81.0: + version "1.81.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.81.0.tgz#a9010c0599867909dfdbad057e4a6fbdd5eec941" + integrity sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA== + dependencies: + chokidar "^4.0.0" + immutable "^5.0.2" + source-map-js ">=0.6.2 <2.0.0" + optionalDependencies: + "@parcel/watcher" "^2.4.1" + sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -8827,7 +8954,7 @@ source-list-map@^2.0.0, source-list-map@^2.0.1: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== -source-map-js@^1.0.1, source-map-js@^1.2.1: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== From 357d40c3154d66ed48d24482d8e8eba71bddf9e4 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 14:49:01 +0900 Subject: [PATCH 04/18] Add `article` for single channel viewer See also: #5 --- wlm-ui/src/MainPage/Channel/ChannelList.scss | 5 +++++ wlm-ui/src/MainPage/Channel/ChannelList.tsx | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.scss b/wlm-ui/src/MainPage/Channel/ChannelList.scss index d8e29cd..a4e7d61 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.scss +++ b/wlm-ui/src/MainPage/Channel/ChannelList.scss @@ -5,3 +5,8 @@ align-items: flex-start; flex-wrap: wrap; } + +.item { + width: auto; + height: auto; +} diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index ac21db6..2a9a1f9 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -18,7 +18,11 @@ const ChannelList = () => { }; return ( -
+
+ {channelListState.channels.map((info) => ( +
+ ))} +
); }; From b7b161d334c40c028e8c1fc2abfebc6539dea89a Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 15:32:45 +0900 Subject: [PATCH 05/18] Define single channel viewer See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 9 +++++++++ wlm-ui/src/MainPage/Channel/ChannelList.tsx | 5 ++++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 wlm-ui/src/MainPage/Channel/Channel.tsx diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx new file mode 100644 index 0000000..5b8b4aa --- /dev/null +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -0,0 +1,9 @@ +import { ChannelInfo } from '../../store/slices/channel/channel'; + +const Channel = ({ info }: { info: ChannelInfo }) => { + return ( +
+ ); +}; + +export default Channel; diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index 2a9a1f9..5c0a97c 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { channelListActions, selectChannelList } from '../../store/slices/channel/channel'; +import Channel from './Channel'; import './ChannelList.scss'; const ChannelList = () => { @@ -20,7 +21,9 @@ const ChannelList = () => { return (
{channelListState.channels.map((info) => ( -
+
+ +
))}
); From 831d7bc67758164a4f9105d6b10bec2cd305fa6a Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 18:32:30 +0900 Subject: [PATCH 06/18] Import `React` in single channel viewer See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index 5b8b4aa..e3fe6a8 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { ChannelInfo } from '../../store/slices/channel/channel'; const Channel = ({ info }: { info: ChannelInfo }) => { From a55d369f82aaaee7bd4fcd39f5a02d0d0b6b6c93 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 18:52:11 +0900 Subject: [PATCH 07/18] Pass `onClickUse()` as an argument See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 10 ++++++++-- wlm-ui/src/MainPage/Channel/ChannelList.tsx | 9 ++++++--- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index e3fe6a8..f645e94 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -2,9 +2,15 @@ import React from 'react'; import { ChannelInfo } from '../../store/slices/channel/channel'; -const Channel = ({ info }: { info: ChannelInfo }) => { +interface IProps extends ChannelInfo { + onClickUse: () => void; +} + +const Channel = (props: IProps) => { return ( -
+
+ +
); }; diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index 5c0a97c..3912343 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -14,15 +14,18 @@ const ChannelList = () => { const dispatch = useDispatch(); - const onClickUse = (channel: number) => () => { + const onClickUse = (channel: number) => { dispatch(channelListActions.toggleUse({ channel: channel })); }; return (
{channelListState.channels.map((info) => ( -
- +
+ onClickUse(info.channel.channel)} + />
))}
From 21954f5c4017d6f92437b020c133706acb21c3dd Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 19:43:29 +0900 Subject: [PATCH 08/18] Add exposure time viewer See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.scss | 20 ++++++++++++++++++++ wlm-ui/src/MainPage/Channel/Channel.tsx | 15 +++++++++++++-- wlm-ui/src/MainPage/Channel/ChannelList.scss | 8 ++------ wlm-ui/src/MainPage/Channel/ChannelList.tsx | 4 ++-- 4 files changed, 37 insertions(+), 10 deletions(-) create mode 100644 wlm-ui/src/MainPage/Channel/Channel.scss diff --git a/wlm-ui/src/MainPage/Channel/Channel.scss b/wlm-ui/src/MainPage/Channel/Channel.scss new file mode 100644 index 0000000..dbcfbaf --- /dev/null +++ b/wlm-ui/src/MainPage/Channel/Channel.scss @@ -0,0 +1,20 @@ +.channel-item { + display: flex; + flex-direction: column; + gap: 10px; + border: 1px solid black; + padding: 10px; +} + +.channel-title { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.channel-attr-container { + display: grid; + grid-template-columns: auto 60px auto auto; + grid-template-rows: auto auto; + gap: 10px; +} \ No newline at end of file diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index f645e94..99195ac 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { ChannelInfo } from '../../store/slices/channel/channel'; +import './Channel.scss' interface IProps extends ChannelInfo { onClickUse: () => void; @@ -8,8 +9,18 @@ interface IProps extends ChannelInfo { const Channel = (props: IProps) => { return ( -
- +
+
+ CH {props.channel.channel} + {props.channel.name} + +
+
+ Exp. time + + ms + +
); }; diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.scss b/wlm-ui/src/MainPage/Channel/ChannelList.scss index a4e7d61..a06ed17 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.scss +++ b/wlm-ui/src/MainPage/Channel/ChannelList.scss @@ -1,12 +1,8 @@ -.container { +.channel-container { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; -} - -.item { - width: auto; - height: auto; + gap: 20px; } diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index 3912343..01666f9 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -19,9 +19,9 @@ const ChannelList = () => { }; return ( -
+
{channelListState.channels.map((info) => ( -
+
onClickUse(info.channel.channel)} From 47080323f433c2564e77a578492937fc2b9f9a5c Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 19:47:31 +0900 Subject: [PATCH 09/18] Add period viewer See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index 99195ac..788f143 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -16,10 +16,14 @@ const Channel = (props: IProps) => {
- Exp. time + Exp. time ms + Period + + s +
); From 3d4ffdfe2cb8aae5ef6868193ff02e4dbfed2622 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 19:48:47 +0900 Subject: [PATCH 10/18] Add trailing blank line See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.scss b/wlm-ui/src/MainPage/Channel/Channel.scss index dbcfbaf..b836d10 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.scss +++ b/wlm-ui/src/MainPage/Channel/Channel.scss @@ -17,4 +17,4 @@ grid-template-columns: auto 60px auto auto; grid-template-rows: auto auto; gap: 10px; -} \ No newline at end of file +} From 00a9aaf7b8465b63939f6decbc7ec30074cea139 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 19:58:03 +0900 Subject: [PATCH 11/18] Move refresh button to channel list viewer See also: #5 --- wlm-ui/src/MainPage/Channel/ChannelList.tsx | 32 +++++++++++++-------- wlm-ui/src/MainPage/MainPage.tsx | 11 +------ 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index 01666f9..2a7266d 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -1,7 +1,8 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { channelListActions, selectChannelList } from '../../store/slices/channel/channel'; +import { AppDispatch } from '../../store'; +import { channelListActions, fetchList, selectChannelList } from '../../store/slices/channel/channel'; import Channel from './Channel'; import './ChannelList.scss'; @@ -12,23 +13,30 @@ const ChannelList = () => { localStorage.setItem('channel.channelList', JSON.stringify(channelListState.channels)); }, [channelListState]); - const dispatch = useDispatch(); + const dispatch = useDispatch(); + + const onClickRefreshChannelList = async () => { + dispatch(fetchList()); + }; const onClickUse = (channel: number) => { dispatch(channelListActions.toggleUse({ channel: channel })); }; return ( -
- {channelListState.channels.map((info) => ( -
- onClickUse(info.channel.channel)} - /> -
- ))} -
+
+ +
+ {channelListState.channels.map((info) => ( +
+ onClickUse(info.channel.channel)} + /> +
+ ))} +
+
); }; diff --git a/wlm-ui/src/MainPage/MainPage.tsx b/wlm-ui/src/MainPage/MainPage.tsx index e3900df..3796b2f 100644 --- a/wlm-ui/src/MainPage/MainPage.tsx +++ b/wlm-ui/src/MainPage/MainPage.tsx @@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux'; import { AppDispatch } from '../store'; import { signout } from '../store/slices/user/user'; -import { fetchList } from '../store/slices/channel/channel'; import ChannelList from './Channel/ChannelList'; const MainPage = () => { @@ -13,18 +12,10 @@ const MainPage = () => { dispatch(signout()); }; - const onClickRefreshChannelList = async () => { - dispatch(fetchList()); - }; - return (
-
-

Channel list

- - -
+
); }; From 78455f0ce8ded68ae0840c7256113bdc5be4db4d Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 20:54:50 +0900 Subject: [PATCH 12/18] Implement to request for updating exposure time See also: #5 --- wlm-ui/src/store/slices/channel/channel.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/wlm-ui/src/store/slices/channel/channel.ts b/wlm-ui/src/store/slices/channel/channel.ts index 8fa5e03..454e64f 100644 --- a/wlm-ui/src/store/slices/channel/channel.ts +++ b/wlm-ui/src/store/slices/channel/channel.ts @@ -11,6 +11,8 @@ export interface ChannelType { export interface ChannelInfo { channel: ChannelType; inUse: boolean; + exposure: number; + period: number; }; export interface ChannelListInfo { @@ -29,6 +31,13 @@ export const fetchList = createAsyncThunk( }, ); +export const postExposure = createAsyncThunk( + 'channel/postExposure', + async (payload: Pick & Pick) => { + await axios.post(`/setting/${payload.channel}/`, { 'exposure': payload.exposure }); + }, +); + export const channelListSlice = createSlice({ name: 'channelList', initialState, From d4a4e91f69990f1623cd89c0fa0a0612caee71fa Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 20:55:14 +0900 Subject: [PATCH 13/18] Implement listener to set exposure time See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 16 +++++++++++++--- wlm-ui/src/MainPage/Channel/ChannelList.tsx | 8 +++++++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index 788f143..a967026 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -1,13 +1,16 @@ -import React from 'react'; +import React, { useState } from 'react'; import { ChannelInfo } from '../../store/slices/channel/channel'; import './Channel.scss' interface IProps extends ChannelInfo { onClickUse: () => void; + onClickSetExposure: (exposure: number) => void; } const Channel = (props: IProps) => { + const [exposure, setExposure] = useState(0); + return (
@@ -17,9 +20,16 @@ const Channel = (props: IProps) => {
Exp. time - + setExposure(Number(e.target.value) / 1e3)} + style={{ textAlign: 'right' }} + /> ms - + Period s diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index 2a7266d..b722cfb 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AppDispatch } from '../../store'; -import { channelListActions, fetchList, selectChannelList } from '../../store/slices/channel/channel'; +import { channelListActions, fetchList, postExposure, selectChannelList } from '../../store/slices/channel/channel'; import Channel from './Channel'; import './ChannelList.scss'; @@ -23,6 +23,10 @@ const ChannelList = () => { dispatch(channelListActions.toggleUse({ channel: channel })); }; + const onClickSetExposure = (channel: number, exposure: number) => { + dispatch(postExposure({ channel: channel, exposure: exposure })); + }; + return (
@@ -32,6 +36,8 @@ const ChannelList = () => { onClickUse(info.channel.channel)} + onClickSetExposure={(exposure: number) => + onClickSetExposure(info.channel.channel, exposure)} /> ))} From f600c8d0e0dcc3bb0edf573017145fed0f023d8e Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 20:57:47 +0900 Subject: [PATCH 14/18] Implement to request for updating period See also: #5 --- wlm-ui/src/store/slices/channel/channel.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/wlm-ui/src/store/slices/channel/channel.ts b/wlm-ui/src/store/slices/channel/channel.ts index 454e64f..1e40aaa 100644 --- a/wlm-ui/src/store/slices/channel/channel.ts +++ b/wlm-ui/src/store/slices/channel/channel.ts @@ -38,6 +38,13 @@ export const postExposure = createAsyncThunk( }, ); +export const postPeriod = createAsyncThunk( + 'channel/postPeriod', + async (payload: Pick & Pick) => { + await axios.post(`/setting/${payload.channel}/`, { 'period': payload.period }); + }, +); + export const channelListSlice = createSlice({ name: 'channelList', initialState, From b5c371ed814d29b38942205f63da5928fa948d1b Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Wed, 27 Nov 2024 21:06:00 +0900 Subject: [PATCH 15/18] Implement listener to set period See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 13 +++++++++++-- wlm-ui/src/MainPage/Channel/ChannelList.tsx | 10 +++++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index a967026..fb4d9fb 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -6,10 +6,12 @@ import './Channel.scss' interface IProps extends ChannelInfo { onClickUse: () => void; onClickSetExposure: (exposure: number) => void; + onClickSetPeriod: (period: number) => void; } const Channel = (props: IProps) => { const [exposure, setExposure] = useState(0); + const [period, setPeriod] = useState(0); return (
@@ -31,9 +33,16 @@ const Channel = (props: IProps) => { ms Period - + setPeriod(Number(e.target.value))} + style={{ textAlign: 'right' }} + /> s - +
); diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index b722cfb..5764dc8 100644 --- a/wlm-ui/src/MainPage/Channel/ChannelList.tsx +++ b/wlm-ui/src/MainPage/Channel/ChannelList.tsx @@ -2,7 +2,9 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AppDispatch } from '../../store'; -import { channelListActions, fetchList, postExposure, selectChannelList } from '../../store/slices/channel/channel'; +import { + channelListActions, fetchList, postExposure, postPeriod, selectChannelList, +} from '../../store/slices/channel/channel'; import Channel from './Channel'; import './ChannelList.scss'; @@ -26,6 +28,10 @@ const ChannelList = () => { const onClickSetExposure = (channel: number, exposure: number) => { dispatch(postExposure({ channel: channel, exposure: exposure })); }; + + const onClickSetPeriod = (channel: number, period: number) => { + dispatch(postPeriod({ channel: channel, period: period })); + }; return (
@@ -38,6 +44,8 @@ const ChannelList = () => { onClickUse={() => onClickUse(info.channel.channel)} onClickSetExposure={(exposure: number) => onClickSetExposure(info.channel.channel, exposure)} + onClickSetPeriod={(period: number) => + onClickSetPeriod(info.channel.channel, period)} /> ))} From 2750d3aba1da78a115abe3e34eefa096b638ca39 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Thu, 28 Nov 2024 18:28:58 +0900 Subject: [PATCH 16/18] Rename css class name See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.scss | 2 +- wlm-ui/src/MainPage/Channel/Channel.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.scss b/wlm-ui/src/MainPage/Channel/Channel.scss index b836d10..4b0c762 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.scss +++ b/wlm-ui/src/MainPage/Channel/Channel.scss @@ -12,7 +12,7 @@ justify-content: space-between; } -.channel-attr-container { +.channel-attr-editor-container { display: grid; grid-template-columns: auto 60px auto auto; grid-template-rows: auto auto; diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index fb4d9fb..dc1aa6b 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -20,7 +20,7 @@ const Channel = (props: IProps) => { {props.channel.name}
-
+
Exp. time Date: Thu, 28 Nov 2024 18:42:42 +0900 Subject: [PATCH 17/18] Modify css style See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index dc1aa6b..474ad73 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -30,7 +30,7 @@ const Channel = (props: IProps) => { onChange={(e) => setExposure(Number(e.target.value) / 1e3)} style={{ textAlign: 'right' }} /> - ms + ms Period { onChange={(e) => setPeriod(Number(e.target.value))} style={{ textAlign: 'right' }} /> - s + s
From 1fba8db4e3a2403847c1a34dbce3077945265632 Mon Sep 17 00:00:00 2001 From: Jaehun You Date: Tue, 3 Dec 2024 17:31:56 +0900 Subject: [PATCH 18/18] Add semicolon See also: #5 --- wlm-ui/src/MainPage/Channel/Channel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx index 474ad73..1461a6c 100644 --- a/wlm-ui/src/MainPage/Channel/Channel.tsx +++ b/wlm-ui/src/MainPage/Channel/Channel.tsx @@ -7,7 +7,7 @@ interface IProps extends ChannelInfo { onClickUse: () => void; onClickSetExposure: (exposure: number) => void; onClickSetPeriod: (period: number) => void; -} +}; const Channel = (props: IProps) => { const [exposure, setExposure] = useState(0);