이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
ijunseong
0e780d97 1 parent ff927890

Update: page structure

Inline Side-by-side
Showing 4 changed files with 27 additions and 22 deletions
1 import React from "react"; 1 import React from "react";
2 import './App.css'; 2 import './App.css';
3 -import Login from "./Login";
4 import Body from "./Body"; 3 import Body from "./Body";
5 4
6 -const qs= require('querystring');
7 -const url = require('url')
8 -
9 class App extends React.Component { 5 class App extends React.Component {
10 - constructor(props){
11 - super(props);
12 - this.state = {
13 - isAuthenticated: false,
14 - }
15 - }
16 -
17 - componentDidMount(props){
18 - var urlQuery = url.parse(window.location.href).query;
19 - var param = qs.parse(urlQuery);
20 - this.setState({ isAuthenticated : param.authenticated}, () => {
21 - this.render();
22 - })
23 - }
24 -
25 render(){ 6 render(){
26 return ( 7 return (
27 <div className="app"> 8 <div className="app">
28 - {this.state.isAuthenticated?(<Body />):(<Login />)} 9 + <Body />
29 </div> 10 </div>
30 ); 11 );
31 } 12 }
......
...@@ -3,3 +3,16 @@ ...@@ -3,3 +3,16 @@
3 justify-content: center; 3 justify-content: center;
4 background-color: #14141e; 4 background-color: #14141e;
5 } 5 }
6 +
7 +.login__btn {
8 + color: white;
9 + position: fixed;
10 + top: 10px;
11 + right: 30px;
12 + padding: 15px;
13 + border-radius: 30px;
14 + text-decoration: none;
15 + font-size: 15px;
16 + font-weight: bold;
17 + background-color: #9147ff;
18 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from "react"; 1 import React from "react";
2 import "./Body.css"; 2 import "./Body.css";
3 import {ChannelList} from "./Channel.js" 3 import {ChannelList} from "./Channel.js"
4 +const qs= require('querystring');
5 +const url = require('url')
6 +
7 +const OAuthUrl = `https://id.twitch.tv/oauth2/authorize?response_type=code&approval_prompt=auto&redirect_uri=http://server.oss.jinsu.me:80/join&client_id=2d1gvcqyiyrk180qvnkec2fl23sv1o`;
4 8
5 function Body(){ 9 function Body(){
10 + var urlQuery = url.parse(window.location.href).query;
11 + var param = qs.parse(urlQuery);
12 +
6 return ( 13 return (
7 <div className="body"> 14 <div className="body">
15 + {!param.authenticated && <a href={OAuthUrl} className="login__btn">Login</a> }
8 <ChannelList /> 16 <ChannelList />
9 </div> 17 </div>
10 ); 18 );
......
...@@ -43,8 +43,8 @@ export class Channel extends React.Component { ...@@ -43,8 +43,8 @@ export class Channel extends React.Component {
43 return ( 43 return (
44 <div className="channel"> 44 <div className="channel">
45 <a href={this.props.channel.url} className="channel__url"> 45 <a href={this.props.channel.url} className="channel__url">
46 - {this.props.channel.thumbnail && <img className="channel__thumbnail" src={this.props.channel.thumbnail} alt=""></img>} 46 + {this.props.channel.logo && <img className="channel__thumbnail" src={this.props.channel.logo} alt=""></img>}
47 - {!this.props.channel.thumbnail && <PersonIcon className="channel__icon"/>} 47 + {!this.props.channel.logo && <PersonIcon className="channel__icon"/>}
48 <div className="channel__box"> 48 <div className="channel__box">
49 <div className="channel__info"> 49 <div className="channel__info">
50 <div className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div> 50 <div className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div>
...@@ -121,6 +121,7 @@ export class ChannelList extends React.Component { ...@@ -121,6 +121,7 @@ export class ChannelList extends React.Component {
121 } 121 }
122 } 122 }
123 123
124 +
124 componentDidMount() { 125 componentDidMount() {
125 console.log('channel cdm'); 126 console.log('channel cdm');
126 fetch('http://server.oss.jinsu.me/channels').then( res => res.json()) 127 fetch('http://server.oss.jinsu.me/channels').then( res => res.json())
...@@ -134,6 +135,7 @@ export class ChannelList extends React.Component { ...@@ -134,6 +135,7 @@ export class ChannelList extends React.Component {
134 view: channel.views || 0, 135 view: channel.views || 0,
135 url: channel.url || "https://www.twitch.tv/", 136 url: channel.url || "https://www.twitch.tv/",
136 isPlay: false, 137 isPlay: false,
138 + logo: channel.logo,
137 } 139 }
138 tmpChannels.push(tmp); 140 tmpChannels.push(tmp);
139 }) 141 })
...@@ -172,6 +174,7 @@ export class ChannelList extends React.Component { ...@@ -172,6 +174,7 @@ export class ChannelList extends React.Component {
172 174
173 175
174 render() { 176 render() {
177 + console.log('channel render')
175 return ( 178 return (
176 <div className="channel__list"> 179 <div className="channel__list">
177 <div className="channel__list__title"> CHANNEL LIST</div> 180 <div className="channel__list__title"> CHANNEL LIST</div>
......