Skip to content

Commit

Permalink
fix tp4.2
Browse files Browse the repository at this point in the history
  • Loading branch information
ikit committed Nov 8, 2018
1 parent da7041d commit 424a562
Show file tree
Hide file tree
Showing 8 changed files with 1,206 additions and 1,119 deletions.
177 changes: 114 additions & 63 deletions formations/ReacJs by Kumquats/4.2-formulaires-et-ajax/demarrage/src/js/VideoDetail.js
View file
@@ -1,74 +1,125 @@
import React from 'react';
import videos from './videos';
import request from 'superagent';
import config from 'config';

export default class VideoDetail extends React.Component {
class VideoDetail extends React.Component {
constructor(...args) {
super(...args);
this.state = {
video: null,
comments: [],
id: 1,
newComment: '',
isLoading: false
}
this.handleSubmit = this.handleSubmit.bind( this );
this.handleCommentChange = this.handleCommentChange.bind( this );
}

constructor() {
super();
render() {
return (
<div className="row marketing">
<div className="col-sm-12 col-md-12">
<div className="video-detail">
{
this.state.video &&
<div className="caption">
<video
style={{ width: '100%', backgroundColor: 'black'}}
ref={ el => this.videoElem = el }
height="300"
controls
muted
src={`${config.basePath}/uploads/${this.state.video.file}`}
>
</video>
<h3>{this.state.video.title}</h3>
{
this.state.video.description &&
<p>{this.state.video.description}</p>
}
<form onSubmit={this.handleSubmit}>
<div class="form-group">
<label for="content">Ajouter un commentaire</label>
<textarea
class="form-control"
name="content"
id="content"
cols="30"
rows="2"
disabled={this.state.isLoading}
value={this.state.newComment}
onChange={this.handleCommentChange}
/>
</div>
<button type="submit" class="btn btn-default" disabled={this.state.isLoading}>
{this.state.isLoading ? 'Chargement...' : 'Envoyer' }
</button>
</form>
<div class="comments">
<h4>Commentaires: </h4>
{this.state.comments.map( comment => (
<div class="panel panel-default">
<div class="panel-body">
<h6><small>{(new Date(comment.created_at)).toLocaleString()}</small></h6>
{comment.content}
</div>
</div>
))}
</div>
</div>
}
</div>
</div>

const index = Math.floor(Math.random()*videos.length);
this.state = {
index,
video: videos[index]
};
</div>
)
}

this.handleNextVideoClick = this.handleNextVideoClick.bind( this );
}
handleCommentChange( event ) {
this.setState({ newComment: event.target.value });
}

componentDidMount(){
this.playVideo();
}
handleSubmit( event ) {
event.preventDefault();
this.setState({ isLoading: true });
request
.post(`${config.apiPath}/videos/${this.state.id}/comments` )
.field( 'content', this.state.newComment )
.then( res => {
this.fetchComments();
this.setState( { newComment: '', isLoading: false });
} )
}

componentDidUpdate(prevProps, prevState){
if (prevState.video.id != this.state.video.id){
this.playVideo();
}
}
playVideo() {
if ( this.videoElem )
{
this.videoElem.play();
}
}

playVideo() {
if ( this.video ) {
this.video.play();
}
}
fetchComments() {
request
.get( `${config.apiPath}/videos/${this.state.id}/comments` )
.then( res => {
this.setState({ comments: res.body })
} )
}

render() {
return (
<div className="row marketing">
<div className="col-sm-12 col-md-12">
<div className="video-detail">
<div className="caption">
<video
style={{ width: '100%', backgroundColor: 'black' }}
ref={el => this.video = el}
height="300"
controls
src={
this.state.video &&
'./uploads/' + this.state.video.file
}
>
</video>
<h3>{this.state.video && this.state.video.title}</h3>
<p>{this.state.video && this.state.video.description}</p>
<footer className="text-right">
<button
className="btn btn-default"
onClick={this.handleNextVideoClick}
>next video</button>
</footer>
</div>
</div>
</div>
</div>
);
}

handleNextVideoClick() {
const newIndex = (this.state.index+1) % videos.length;
this.setState({
index: newIndex,
video: videos[newIndex]
});
}
componentDidMount() {
this.playVideo();
request
.get( `${config.apiPath}/videos/${this.state.id}` )
.then( res => {
this.setState({ video: res.body })
});
this.fetchComments();
}

componentDidUpdate() {
this.playVideo();
}
}

export default VideoDetail;
50 changes: 50 additions & 0 deletions formations/ReacJs by Kumquats/4.2-formulaires-et-ajax/demarrage/src/js/VideoForm.js
View file
@@ -0,0 +1,50 @@
import React from 'react';
import request from 'superagent';
import config from 'config';

class VideoForm extends React.Component {
constructor(...args) {
super(...args);
this.handleSubmit = this.handleSubmit.bind( this );
this.state = { isSubmitted: false };
}

render() {
return (
<div>
{ this.state.isSubmitted ?
<p>La vidéo a bien été envoyée</p> :
<form onSubmit={this.handleSubmit}>
<div>
<label htmlFor="">Titre</label>
<input ref={el => this.titleInput = el} type="text" />
</div>
<div>
<label htmlFor="">Description</label>
<textarea ref={el => this.descInput = el} name="description" id="" cols="30" rows="10"></textarea>
</div>
<div>
<label htmlFor="">Fichier</label>
<input ref={el => this.fileInput = el} type="file"/>
</div>
<button type="submit">Envoyer</button>
</form>
}
</div>
)
}

handleSubmit( event ) {
event.preventDefault();
request
.post( `${config.apiPath}/videos` )
.field( 'title', this.titleInput.value )
.field( 'description', this.descInput.value )
.attach( 'file', this.fileInput.files[ 0 ] )
.then( res => {
this.setState( { isSubmitted: true } )
} )
}
}

export default VideoForm;
46 changes: 23 additions & 23 deletions formations/ReacJs by Kumquats/4.2-formulaires-et-ajax/demarrage/src/js/VideoItem.js
View file
@@ -1,28 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import config from 'config';

const VideoItem = props => (
<li className="media">
<a href="#">
<div className="media-left">
<img className="media-object"
alt="cat" src={'./uploads/thumbnails/'+props.video.thumbnail}
width="246"
height="138" />
</div>
<div className="media-body">
<h4 className="media-heading">{props.video.title}</h4>
<p>{props.video.description}</p>
</div>
</a>
</li>
);
VideoItem.propTypes = {
video: PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string,
description: PropTypes.string,
}).isRequired
export default function VideoItem( props ) {
return (
<li className="media">
<div className="media-left">
<img className="media-object"
alt="cat" src={`${config.basePath}/uploads/thumbnails/${props.video.thumbnail}`}
width="246"
height="138" />
</div>
<div className="media-body">
<h4 className="media-heading">{props.video.title}</h4>
<p>{props.video.description}</p>
</div>
</li>
)
}

export default VideoItem;
VideoItem.propTypes = {
video: PropTypes.shape({
thumbnail: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired
}).isRequired
}
59 changes: 33 additions & 26 deletions formations/ReacJs by Kumquats/4.2-formulaires-et-ajax/demarrage/src/js/VideoList.js
View file
@@ -1,32 +1,39 @@
import React from 'react';
import VideoItem from './VideoItem';
import videos from './videos';
import request from 'superagent';
import config from 'config';

export default class VideoList extends React.Component {
class VideoList extends React.Component {
constructor(...args) {
super(...args);
this.state = {
videos: []
}
}

constructor(){
super();
this.state = {
videos
}
}
render() {
return (
<div className="row marketing">
<div className="col-lg-12">
<ul className="media-list">
{this.state.videos.map( video => (
<VideoItem key={video.id} video={video} />
) )}
</ul>
</div>
</div>
);
}

render () {
return (
<div className="row marketing">
<div className="col-lg-12">
<ul className="media-list">
{ this.renderVideos() }
</ul>
</div>
</div>
);
}
componentDidMount() {
request
.get( `${config.apiPath}/videos` )
.then( res => {
this.setState( {
videos: res.body
} )
} )
}
}

renderVideos() {
return this.state.videos.map( video => (
<VideoItem key={video.id} video={video} />
) );
}

}
export default VideoList;
9 changes: 4 additions & 5 deletions formations/ReacJs by Kumquats/4.2-formulaires-et-ajax/demarrage/src/js/app.js
View file
Expand Up @@ -2,10 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom';
import VideoDetail from './VideoDetail';
import VideoList from './VideoList';

import VideoForm from './VideoForm';

ReactDOM.render(
// <VideoDetail />
<VideoList />
, document.querySelector('#appContainer')
);
<VideoDetail />,
document.querySelector( '#appContainer' )
);

0 comments on commit 424a562

Please sign in to comment.