이준성 / 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
import React from "react";
import './App.css';
import Login from "./Login";
import Body from "./Body";
const qs= require('querystring');
const url = require('url')
class App extends React.Component {
constructor(props){
super(props);
this.state = {
isAuthenticated: false,
}
}
componentDidMount(props){
var urlQuery = url.parse(window.location.href).query;
var param = qs.parse(urlQuery);
this.setState({ isAuthenticated : param.authenticated}, () => {
this.render();
})
}
render(){
return (
<div className="app">
{this.state.isAuthenticated?(<Body />):(<Login />)}
<Body />
</div>
);
}
......
......@@ -3,3 +3,16 @@
justify-content: center;
background-color: #14141e;
}
.login__btn {
color: white;
position: fixed;
top: 10px;
right: 30px;
padding: 15px;
border-radius: 30px;
text-decoration: none;
font-size: 15px;
font-weight: bold;
background-color: #9147ff;
}
\ No newline at end of file
......
import React from "react";
import "./Body.css";
import {ChannelList} from "./Channel.js"
const qs= require('querystring');
const url = require('url')
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`;
function Body(){
var urlQuery = url.parse(window.location.href).query;
var param = qs.parse(urlQuery);
return (
<div className="body">
{!param.authenticated && <a href={OAuthUrl} className="login__btn">Login</a> }
<ChannelList />
</div>
);
......
......@@ -43,8 +43,8 @@ export class Channel extends React.Component {
return (
<div className="channel">
<a href={this.props.channel.url} className="channel__url">
{this.props.channel.thumbnail && <img className="channel__thumbnail" src={this.props.channel.thumbnail} alt=""></img>}
{!this.props.channel.thumbnail && <PersonIcon className="channel__icon"/>}
{this.props.channel.logo && <img className="channel__thumbnail" src={this.props.channel.logo} alt=""></img>}
{!this.props.channel.logo && <PersonIcon className="channel__icon"/>}
<div className="channel__box">
<div className="channel__info">
<div className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div>
......@@ -121,6 +121,7 @@ export class ChannelList extends React.Component {
}
}
componentDidMount() {
console.log('channel cdm');
fetch('http://server.oss.jinsu.me/channels').then( res => res.json())
......@@ -134,6 +135,7 @@ export class ChannelList extends React.Component {
view: channel.views || 0,
url: channel.url || "https://www.twitch.tv/",
isPlay: false,
logo: channel.logo,
}
tmpChannels.push(tmp);
})
......@@ -172,6 +174,7 @@ export class ChannelList extends React.Component {
render() {
console.log('channel render')
return (
<div className="channel__list">
<div className="channel__list__title"> CHANNEL LIST</div>
......