From adf879ad85e50e4e2a052b929125ef1e699b66b9 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Mon, 24 Jul 2023 22:38:44 +0900 Subject: [PATCH 1/9] fix : change color --- source/Login.js | 4 ++-- source/Register.js | 14 +++++++------- source/app.js | 4 ++-- source/component/intro.js | 2 +- source/select_user_info.js | 34 +++++++++++++++++----------------- 5 files changed, 29 insertions(+), 29 deletions(-) diff --git a/source/Login.js b/source/Login.js index 0023413..2488156 100644 --- a/source/Login.js +++ b/source/Login.js @@ -28,7 +28,7 @@ const Login = ({Id, setId, setShow}) => { return ( - ID: + ID: {nextStepInfo ? ( {Id} ) : ( @@ -37,7 +37,7 @@ const Login = ({Id, setId, setShow}) => { {nextStepInfo ? ( - PASSWORD: + PASSWORD: ) : ( diff --git a/source/Register.js b/source/Register.js index 577ada7..c5e432a 100644 --- a/source/Register.js +++ b/source/Register.js @@ -15,7 +15,7 @@ const Register = ({setIsSelected, setSpaceStep}) => { if (key.return) { if (nextStepInfo === 2) { setSpaceStep('login'); - setIsSelected(false); + setIsSelected(true); } setNextStepInfo(nextStepInfo + 1); } @@ -31,7 +31,7 @@ const Register = ({setIsSelected, setSpaceStep}) => { return ( - NEW ID: + NEW ID: {nextStepInfo === 0 ? ( ) : ( @@ -41,12 +41,12 @@ const Register = ({setIsSelected, setSpaceStep}) => { {nextStepInfo === 1 ? ( <> - NEW PASSWORD: + NEW PASSWORD: ) : nextStepInfo === 2 ? ( <> - NEW PASSWORD: + NEW PASSWORD: {Password} ) : ( @@ -55,18 +55,18 @@ const Register = ({setIsSelected, setSpaceStep}) => { {nextStepInfo === 2 ? ( - Do you have a girlfriend? (y/n): + Do you have a girlfriend? (y/n): ) : ( {girlfriend} )} {openMessage === 'complete' ? ( - + Sign up is complete. (Please press space to login.) ) : openMessage === 'fail' ? ( - Sign up is not possible. + Sign up is not possible. ) : ( '' )} diff --git a/source/app.js b/source/app.js index 1f8b17d..652d8ca 100644 --- a/source/app.js +++ b/source/app.js @@ -17,7 +17,7 @@ const App = () => { press "help" to see the list of commands {show ? ( - Username : {Id} + Username : {Id} ) : ( { '' ) ) : ( - + )} diff --git a/source/component/intro.js b/source/component/intro.js index 5a937bb..45d2174 100644 --- a/source/component/intro.js +++ b/source/component/intro.js @@ -3,7 +3,7 @@ import { Text, Newline } from 'ink'; const Intro = () => { return ( - + __ __ __ __ ____ ____ ____ ____________________ / / / /___ ____/ /___ _/ /____ / __ \/ __ \/ __ \ / / ____/ ____/_ __/ / / / / __ \______/ __ / __ `/ __/ _ \ / /_/ / /_/ / / / /_ / / __/ / / / / diff --git a/source/select_user_info.js b/source/select_user_info.js index d903788..c487e15 100644 --- a/source/select_user_info.js +++ b/source/select_user_info.js @@ -13,33 +13,33 @@ const SelectUserInfo = ({isSelected, setIsSelected, setSpaceStep}) => { if (key.return) { if (isSelected) { - // register 페이지로 이동 - setSpaceStep('register'); - } else { // login 페이지로 이동 setSpaceStep('login'); + } else { + // register 페이지로 이동 + setSpaceStep('register'); } } }); return ( - - - {isSelected ? ( - - Register - + + Select Menu + + + + {isSelected ? ( + Login + ) : ( + Login + )} + + {!isSelected ? ( + Register ) : ( - Register + Register )} - {!isSelected ? ( - - Login - - ) : ( - Login - )} ); }; From bfbccd1dbc48dde2311fefb11040fca1be3170ae Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Mon, 24 Jul 2023 22:39:48 +0900 Subject: [PATCH 2/9] feat : like terminal --- source/Search.js | 68 ++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 54 insertions(+), 14 deletions(-) diff --git a/source/Search.js b/source/Search.js index 57e70e9..7f1722b 100644 --- a/source/Search.js +++ b/source/Search.js @@ -2,43 +2,82 @@ import React, {useState} from 'react'; import {Text, Box, useInput, Newline} from 'ink'; import TextInput from 'ink-text-input'; import {TypeMoive} from './api.js'; +import data from './examples/location.js'; const Search = () => { const [search, setSearch] = useState(''); const [list, setList] = useState([]); const [errorMessage, setErrorMessage] = useState(false); + const [output, setOutput] = useState(false); + + const [structureCount, setStructureCount] = useState(1); + + const renderStructures = () => { + const structures = []; + for (let i = 0; i < structureCount; i++) { + if (i !== 0) { + structures.push( + + $ + , + ); + } + } + structures.push( + + $ + + , + ); + return structures; + }; useInput((input, key) => { if (!key) return; if (key.return) { + if (search === 'ls') { + setOutput(true); + setStructureCount(0); + setSearch(''); + } if (search === 'popular' || search === 'upcoming') { setErrorMessage(false); - TypeMoive(search).then(response => { - setList(response.data.results.slice(0, 4)); - }).catch(error => { - console.error(error); - }); + TypeMoive(search) + .then(response => { + setList(response.data.results.slice(0, 4)); + }) + .catch(error => { + console.error(error); + }); + setStructureCount(0); + setSearch(''); } else { - setErrorMessage(false); - setErrorMessage(true); + // setErrorMessage(false); + // setErrorMessage(true); + setStructureCount(prevCount => prevCount + 1); } } }); return ( - - search : - - - - {errorMessage ? return!! : ''} + {output + ? data.location.map(item => { + return ( + <> + {item} + + + ); + }) + : ''} + {/* {errorMessage ? return!! : ''} */} {list.map((item, key) => { return ( <> - + {item.original_title} {item.overview} @@ -47,6 +86,7 @@ const Search = () => { ); })} + {renderStructures()} ); }; From 64ab53370b72f54b6f38025ec10e7f5489f9e148 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Mon, 24 Jul 2023 22:40:07 +0900 Subject: [PATCH 3/9] fix : dummy data --- source/examples/location.js | 14 ++++++++++++++ source/examples/location.json | 14 -------------- 2 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 source/examples/location.js delete mode 100644 source/examples/location.json diff --git a/source/examples/location.js b/source/examples/location.js new file mode 100644 index 0000000..c37a8af --- /dev/null +++ b/source/examples/location.js @@ -0,0 +1,14 @@ +export default { + location: [ + '신촌', + '건대 입구', + '숭실대 입구', + '강남', + '홍대', + '신림', + '신도림', + '서울대입구', + '상봉', + '천호', + ], +}; diff --git a/source/examples/location.json b/source/examples/location.json deleted file mode 100644 index fa534e1..0000000 --- a/source/examples/location.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "location": [ - "신촌", - "건대 입구", - "숭실대 입구", - "강남", - "홍대", - "신림", - "신도림", - "서울대입구", - "상봉", - "천호" - ] -} From 8397a96fba0bcd1bb2f773d61597b5b339a28e35 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Tue, 8 Aug 2023 19:17:19 +0900 Subject: [PATCH 4/9] fix : Component Separation --- source/Container.js | 17 +++++++++++++++++ source/app.js | 8 +++++--- 2 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 source/Container.js diff --git a/source/Container.js b/source/Container.js new file mode 100644 index 0000000..760a63c --- /dev/null +++ b/source/Container.js @@ -0,0 +1,17 @@ +import React, {useState} from 'react'; +import {Text, Box, useInput, Newline} from 'ink'; +import TextInput from 'ink-text-input'; +import Search from './Search.js'; +import Output from './Output.js'; + +const Container = () => { + const [list, setlist] = useState([]); + return ( + + + + + ); +}; + +export default Container; diff --git a/source/app.js b/source/app.js index 652d8ca..8b2aa12 100644 --- a/source/app.js +++ b/source/app.js @@ -1,10 +1,10 @@ import React, {useState} from 'react'; -import {Box, Text} from 'ink'; +import {Box, Text, Newline} from 'ink'; import Login from './Login.js'; -import Search from './Search.js'; import Intro from './component/intro.js'; import SelectUserInfo from './SelectUserInfo.js'; import Register from './Register.js'; +import Container from './Container.js'; const App = () => { const [show, setShow] = useState(false); @@ -38,7 +38,9 @@ const App = () => { '' ) ) : ( - + + + )} From 74cc7fc1fddf76179a3259efd14ad7d3371d9b2c Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Tue, 8 Aug 2023 19:17:50 +0900 Subject: [PATCH 5/9] feat : Output component --- source/Output.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 source/Output.js diff --git a/source/Output.js b/source/Output.js new file mode 100644 index 0000000..31d3ff8 --- /dev/null +++ b/source/Output.js @@ -0,0 +1,27 @@ +import React from 'react'; +import {Text, Box, useInput, Newline} from 'ink'; +import TextInput from 'ink-text-input'; +//[[['신촌','강남','숭실대입구'],ls]] +const Output = ({list}) => { + return ( + + {list.map(item => ( + <> + $ {item[1]} + + {item[0].map((detail, key) => ( + + + {item[1] === 'ls' ? detail : detail.original_title} + {/* {detail || detail.original_title} */} + + + + ))} + + ))} + + ); +}; + +export default Output; From 13a4467e866eda232000537f363f3e36f2d5b0c7 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Tue, 8 Aug 2023 19:18:45 +0900 Subject: [PATCH 6/9] fix : simply Search component --- source/Search.js | 69 +++++++----------------------------------------- 1 file changed, 10 insertions(+), 59 deletions(-) diff --git a/source/Search.js b/source/Search.js index 7f1722b..193f9a2 100644 --- a/source/Search.js +++ b/source/Search.js @@ -4,89 +4,40 @@ import TextInput from 'ink-text-input'; import {TypeMoive} from './api.js'; import data from './examples/location.js'; -const Search = () => { +const Search = ({setlist}) => { const [search, setSearch] = useState(''); - const [list, setList] = useState([]); - const [errorMessage, setErrorMessage] = useState(false); - const [output, setOutput] = useState(false); - - const [structureCount, setStructureCount] = useState(1); - - const renderStructures = () => { - const structures = []; - for (let i = 0; i < structureCount; i++) { - if (i !== 0) { - structures.push( - - $ - , - ); - } - } - structures.push( - - $ - - , - ); - return structures; - }; useInput((input, key) => { if (!key) return; if (key.return) { if (search === 'ls') { - setOutput(true); - setStructureCount(0); + setlist(list => [...list, [data.location, search]]); setSearch(''); } if (search === 'popular' || search === 'upcoming') { - setErrorMessage(false); TypeMoive(search) .then(response => { - setList(response.data.results.slice(0, 4)); + console.log(response.data.results.slice(0, 4)); + setlist(list => [ + ...list, + [response.data.results.slice(0, 4), search], + ]); }) .catch(error => { console.error(error); }); - setStructureCount(0); setSearch(''); - } else { - // setErrorMessage(false); - // setErrorMessage(true); - setStructureCount(prevCount => prevCount + 1); } } }); return ( - {output - ? data.location.map(item => { - return ( - <> - {item} - - - ); - }) - : ''} - {/* {errorMessage ? return!! : ''} */} - - {list.map((item, key) => { - return ( - <> - - {item.original_title} - - {item.overview} - - - ); - })} + + $ + - {renderStructures()} ); }; From b6eb1c4d5b453f820d92dca4109f510042e58b87 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 12 Aug 2023 02:13:47 +0900 Subject: [PATCH 7/9] fix : rename Container --- source/{Container.js => SearchContainer.js} | 4 ++-- source/app.js | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) rename source/{Container.js => SearchContainer.js} (85%) diff --git a/source/Container.js b/source/SearchContainer.js similarity index 85% rename from source/Container.js rename to source/SearchContainer.js index 760a63c..e2f34ce 100644 --- a/source/Container.js +++ b/source/SearchContainer.js @@ -4,7 +4,7 @@ import TextInput from 'ink-text-input'; import Search from './Search.js'; import Output from './Output.js'; -const Container = () => { +const SearchContainer = () => { const [list, setlist] = useState([]); return ( @@ -14,4 +14,4 @@ const Container = () => { ); }; -export default Container; +export default SearchContainer; diff --git a/source/app.js b/source/app.js index 8b2aa12..9a428f3 100644 --- a/source/app.js +++ b/source/app.js @@ -4,7 +4,8 @@ import Login from './Login.js'; import Intro from './component/intro.js'; import SelectUserInfo from './SelectUserInfo.js'; import Register from './Register.js'; -import Container from './Container.js'; +import SearchContainer from './SearchContainer.js'; +import theme from './Theme.js'; const App = () => { const [show, setShow] = useState(false); @@ -17,7 +18,7 @@ const App = () => { press "help" to see the list of commands {show ? ( - Username : {Id} + Username : {Id} ) : ( { ) ) : ( - + )} From 2982e8764348849fc1e84322206ec9308c8c427e Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 12 Aug 2023 02:14:27 +0900 Subject: [PATCH 8/9] feat : add theme.js --- source/Theme.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 source/Theme.js diff --git a/source/Theme.js b/source/Theme.js new file mode 100644 index 0000000..201fbfd --- /dev/null +++ b/source/Theme.js @@ -0,0 +1,8 @@ +const theme = { + neonGreen: '#00FF19', + white: '#ffffff', + red: '#FF0000', + purple: '#AD00FF', +}; + +export default theme; From 6fa655ab928257451074a8c606d9c227578772e2 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 12 Aug 2023 02:15:10 +0900 Subject: [PATCH 9/9] fix : color variable name conversion --- source/Login.js | 5 +++-- source/Output.js | 5 +++-- source/Register.js | 13 +++++++------ source/Search.js | 3 ++- source/component/intro.js | 3 ++- source/select_user_info.js | 11 ++++++----- 6 files changed, 23 insertions(+), 17 deletions(-) diff --git a/source/Login.js b/source/Login.js index 2488156..8246f3d 100644 --- a/source/Login.js +++ b/source/Login.js @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import {Text, Box, useInput} from 'ink'; import TextInput from 'ink-text-input'; +import theme from './Theme.js'; const Login = ({Id, setId, setShow}) => { const [nextStepInfo, setNextStepInfo] = useState(false); @@ -28,7 +29,7 @@ const Login = ({Id, setId, setShow}) => { return ( - ID: + ID: {nextStepInfo ? ( {Id} ) : ( @@ -37,7 +38,7 @@ const Login = ({Id, setId, setShow}) => { {nextStepInfo ? ( - PASSWORD: + PASSWORD: ) : ( diff --git a/source/Output.js b/source/Output.js index 31d3ff8..6f0fa3b 100644 --- a/source/Output.js +++ b/source/Output.js @@ -1,17 +1,18 @@ import React from 'react'; import {Text, Box, useInput, Newline} from 'ink'; import TextInput from 'ink-text-input'; +import theme from './Theme.js'; //[[['신촌','강남','숭실대입구'],ls]] const Output = ({list}) => { return ( {list.map(item => ( <> - $ {item[1]} + $ {item[1]} {item[0].map((detail, key) => ( - + {item[1] === 'ls' ? detail : detail.original_title} {/* {detail || detail.original_title} */} diff --git a/source/Register.js b/source/Register.js index c5e432a..1568a51 100644 --- a/source/Register.js +++ b/source/Register.js @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import {Text, Box, useInput} from 'ink'; import TextInput from 'ink-text-input'; +import theme from './Theme.js'; const Register = ({setIsSelected, setSpaceStep}) => { const [nextStepInfo, setNextStepInfo] = useState(0); @@ -31,7 +32,7 @@ const Register = ({setIsSelected, setSpaceStep}) => { return ( - NEW ID: + NEW ID: {nextStepInfo === 0 ? ( ) : ( @@ -41,12 +42,12 @@ const Register = ({setIsSelected, setSpaceStep}) => { {nextStepInfo === 1 ? ( <> - NEW PASSWORD: + NEW PASSWORD: ) : nextStepInfo === 2 ? ( <> - NEW PASSWORD: + NEW PASSWORD: {Password} ) : ( @@ -55,18 +56,18 @@ const Register = ({setIsSelected, setSpaceStep}) => { {nextStepInfo === 2 ? ( - Do you have a girlfriend? (y/n): + Do you have a girlfriend? (y/n): ) : ( {girlfriend} )} {openMessage === 'complete' ? ( - + Sign up is complete. (Please press space to login.) ) : openMessage === 'fail' ? ( - Sign up is not possible. + Sign up is not possible. ) : ( '' )} diff --git a/source/Search.js b/source/Search.js index 193f9a2..83de839 100644 --- a/source/Search.js +++ b/source/Search.js @@ -3,6 +3,7 @@ import {Text, Box, useInput, Newline} from 'ink'; import TextInput from 'ink-text-input'; import {TypeMoive} from './api.js'; import data from './examples/location.js'; +import theme from './Theme.js'; const Search = ({setlist}) => { const [search, setSearch] = useState(''); @@ -35,7 +36,7 @@ const Search = ({setlist}) => { return ( - $ + $ diff --git a/source/component/intro.js b/source/component/intro.js index 45d2174..07a6670 100644 --- a/source/component/intro.js +++ b/source/component/intro.js @@ -1,9 +1,10 @@ import React from 'react'; import { Text, Newline } from 'ink'; +import theme from "../Theme.js" const Intro = () => { return ( - + __ __ __ __ ____ ____ ____ ____________________ / / / /___ ____/ /___ _/ /____ / __ \/ __ \/ __ \ / / ____/ ____/_ __/ / / / / __ \______/ __ / __ `/ __/ _ \ / /_/ / /_/ / / / /_ / / __/ / / / / diff --git a/source/select_user_info.js b/source/select_user_info.js index c487e15..b30d922 100644 --- a/source/select_user_info.js +++ b/source/select_user_info.js @@ -1,5 +1,6 @@ import React, {useState} from 'react'; import {Text, Box, useInput} from 'ink'; +import theme from './Theme.js'; const SelectUserInfo = ({isSelected, setIsSelected, setSpaceStep}) => { useInput((input, key) => { @@ -24,20 +25,20 @@ const SelectUserInfo = ({isSelected, setIsSelected, setSpaceStep}) => { return ( - Select Menu + Select Menu {isSelected ? ( - Login + Login ) : ( - Login + Login )} {!isSelected ? ( - Register + Register ) : ( - Register + Register )}