diff --git a/source/Login.js b/source/Login.js index 0023413..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 new file mode 100644 index 0000000..6f0fa3b --- /dev/null +++ b/source/Output.js @@ -0,0 +1,28 @@ +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[0].map((detail, key) => ( + + + {item[1] === 'ls' ? detail : detail.original_title} + {/* {detail || detail.original_title} */} + + + + ))} + + ))} + + ); +}; + +export default Output; diff --git a/source/Register.js b/source/Register.js index 577ada7..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); @@ -15,7 +16,7 @@ const Register = ({setIsSelected, setSpaceStep}) => { if (key.return) { if (nextStepInfo === 2) { setSpaceStep('login'); - setIsSelected(false); + setIsSelected(true); } setNextStepInfo(nextStepInfo + 1); } @@ -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 57e70e9..83de839 100644 --- a/source/Search.js +++ b/source/Search.js @@ -2,26 +2,33 @@ 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'; +import theme from './Theme.js'; -const Search = () => { +const Search = ({setlist}) => { const [search, setSearch] = useState(''); - const [list, setList] = useState([]); - const [errorMessage, setErrorMessage] = useState(false); useInput((input, key) => { if (!key) return; if (key.return) { + if (search === 'ls') { + 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)); - }).catch(error => { - console.error(error); - }); - } else { - setErrorMessage(false); - setErrorMessage(true); + TypeMoive(search) + .then(response => { + console.log(response.data.results.slice(0, 4)); + setlist(list => [ + ...list, + [response.data.results.slice(0, 4), search], + ]); + }) + .catch(error => { + console.error(error); + }); + setSearch(''); } } }); @@ -29,24 +36,9 @@ const Search = () => { return ( - search : + $ - - {errorMessage ? return!! : ''} - - {list.map((item, key) => { - return ( - <> - - {item.original_title} - - {item.overview} - - - ); - })} - ); }; diff --git a/source/SearchContainer.js b/source/SearchContainer.js new file mode 100644 index 0000000..e2f34ce --- /dev/null +++ b/source/SearchContainer.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 SearchContainer = () => { + const [list, setlist] = useState([]); + return ( + + + + + ); +}; + +export default SearchContainer; 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; diff --git a/source/app.js b/source/app.js index 1f8b17d..9a428f3 100644 --- a/source/app.js +++ b/source/app.js @@ -1,10 +1,11 @@ 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 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} ) : ( { '' ) ) : ( - + + + )} diff --git a/source/component/intro.js b/source/component/intro.js index 5a937bb..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/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": [ - "신촌", - "건대 입구", - "숭실대 입구", - "강남", - "홍대", - "신림", - "신도림", - "서울대입구", - "상봉", - "천호" - ] -} diff --git a/source/select_user_info.js b/source/select_user_info.js index d903788..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) => { @@ -13,33 +14,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 - )} ); };