Дипломная работа: Социальная подкаст-платформа

export default class CreateNewEpisodePage extends Component {

constructor() {

super();

this.state = {}

}

createNewEpisode = () => {

if (this.validationIsOk()) {

console.log("Create new episode")

let obj = {

"name": this.refs.episodeName.value,

"podcastId": this.props.match.params.podcastId,

"description": this.refs.episodeDesc.value,

"podsterLink": this.refs.podsterLink.value,

};

let episode = JSON.stringify(obj);

const that = this;

$.ajax({

url: `/createEpisode?${getFullCSRFParam()}`,

type: 'post',

contentType: 'application/json',

data: episode,

success: () => {

that.episodeIsCreated();

},

error: (jqXhr, textStatus, errorThrown) => {

console.log(errorThrown + " " + textStatus);

}

});

}

};

episodeIsCreated() {

console.log("Episode is created");

this.props.history.push(`/user/${getCookie("username")}`);

}

validationIsOk() {

let en = this.refs.episodeName.value;

let ed = this.refs.episodeDesc.value;

let pl = this.refs.podsterLink.value;

if (en !== "" && ed !== "" && pl !== "") return true;

else return false;

}

render() {

return (

<div>

<Navbar history={this.props.history}/>

<div style={{display: "flex", justifyContent: "center"}}>

<div className="container-fluid" style={{width: "50%"}}>

<br/><br/><br/>

<div className="panel panel-default">

<div className="panel-body" style={{maxWidth: '100%'}}>

<input ref="episodeName" type="text" maxLength="50" className="form-control"

placeholder="* Название"/><br/>

<textarea ref="episodeDesc" className="form-control" maxLength="350"

style={{resize: "vertical"}} rows="5"

placeholder="* Описание"></textarea><br/>

<input ref="podsterLink" type="text" maxLength="50" className="form-control"

placeholder="* Ссылка на выпуск в Podster.fm (формата https://podcast-name.podster.fm/42)"/><br/>

<br/>

<div>

<button type="button" className="btn btn-info pull-right"

onClick={this.createNewEpisode}><span

className="glyphicon glyphicon-plus"></span> Добавить новый выпуск

</button>

</div>

<br/>

</div>

</div>

</div>

</div>

</div>

);

}

}

Файл: Discasst\src\main\resources\static\app\components\userPage\ CreateNewPodcastPage.js

import React, {Component} from 'react';

import Navbar from "../Navbar";

import {getCookie, getFullCSRFParam} from "../Helper";

export default class CreateNewPodcastPage extends Component {

constructor() {

super();

this.state = {

genres: null,

selectedGenre: {

id: null,

name: "* Выберите"

},

};

}

componentDidMount() {

this.getGenres();

}

getGenres = () => {

let genres;

$.getJSON(`/getGenres`, (data) => {

console.log(data);

this.setState({genres: data});

return data;

});

};

selectGenre = (genre) => {

this.setState({selectedGenre: genre});

};

validationIsOk() {

let pn = this.refs.podcastName.value;

let pd = this.refs.podcastDesc.value;

let g = this.state.selectedGenre.name;

if (pn !== "" && pd !== "" && g !== "* Выберите") return true;

return false;

}

createNewPodcast = () => {

if (this.validationIsOk()) {

console.log("Create new podcast");

let obj = {

"name": this.refs.podcastName.value,

"authorId": getCookie("userId"),

"description": this.refs.podcastDesc.value,

"genreId": (this.state.selectedGenre.id - 1),

"coauthors": this.state.coauthors,

"vkLink": this.refs.vkLink.value,

"twitterLink": this.refs.twitterLink.value,

"itunesLink": this.refs.itunesLink.value,

"facebookLink": this.refs.facebookLink.value,

"rating": 0

};

let podcast = JSON.stringify(obj);

const that = this;

$.ajax({

url: `/createPodcast?${getFullCSRFParam()}`,

type: 'post',

contentType: 'application/json',

data: podcast,

success: () => {

that.podcastIsCreated();

},

error: (jqXhr, textStatus, errorThrown) => {

console.log(errorThrown + " " + textStatus);

}

});

}

};

podcastIsCreated() {

console.log("Подкаст создан!")

this.props.history.push(`/user/${getCookie("username")}`);

}

render() {

return (

<div>

<Navbar history={this.props.history}/>

<div style={{display: "flex", justifyContent: "center"}}>

<div className="container-fluid" style={{width: "50%"}}>

<br/><br/><br/>

<div className="panel panel-default">

<div className="panel-body" style={{maxWidth: '100%'}}>

<input ref="podcastName" type="text" maxLength="50" className="form-control"

placeholder="* Название"/><br/>

<textarea ref="podcastDesc" className="form-control" maxLength="350"

style={{resize: "vertical"}} rows="5"

placeholder="* Описание"></textarea><br/>

<div className="btn-group">

<button className="btn btn-info dropdown-toggle" data-toggle="dropdown"

style={{minWidth: "160px"}}>{"Жанр: " + this.state.selectedGenre.name}&#160;&#160;

<span className="glyphicon glyphicon-chevron-down"></span></button>

{this.state.genres !== null && <ul className="dropdown-menu">

{this.state.genres.map((item) =>

<li key={item.id}><a role="button"

onClick={() => this.selectGenre(item)}>{item.name}</a>

</li>

)}

</ul>}

</div>

<br/><br/>

<input ref="twitterLink" type="text" maxLength="50" className="form-control"

placeholder="Ссылка на Twitter"/><br/>

<input ref="vkLink" type="text" maxLength="50" className="form-control"

placeholder="Ссылка на Vk"/><br/>

<input ref="facebookLink" type="text" maxLength="50" className="form-control"

placeholder="Ссылка на Facebook"/><br/>

<input ref="itunesLink" type="text" maxLength="50" className="form-control"

placeholder="Ссылка на iTunes"/><br/>

<div>

<button type="button" className="btn btn-info pull-right"

onClick={this.createNewPodcast}><span

className="glyphicon glyphicon-plus"></span> Создать новый подкаст

</button>

</div>

<br/>

</div>

</div>

</div>

</div>

</div>

);

}

}

Файл: Discasst\src\main\resources\static\app\components\userPage\UserProfilePage.js

import UserProfilePagePodcastTable from "./UserProfilePagePodcastTable";

import Navbar from "../Navbar";

import {getCookie, getFullCSRFParam, saveCookie} from "../Helper";

const React = require('react');

export default class UserProfilePage extends React.Component {

constructor(props) {

super(props);

this.state = {

myPage: false,

editMode: false,

user: null,

loadEnds: false,

isSignedIn: false

};

}

componentDidMount() {

let isSignedIn = false;

fetch(`/loginCheck?${getFullCSRFParam()}`, {

method: 'POST'

}).then((response) => {

if (response.status === 200 && !response.redirected) {

let username = getCookie("username");

if (username !== "" && username !== undefined) this.setState({isSignedIn: true});

}

if (this.props.match.params.username === getCookie("username") && this.state.isSignedIn) {

console.log('myPage');

this.setState({myPage: true, loadEnds: true});

} else {

console.log('not myPage');

this.loadUserInfo()

}

});

}

isUserLogIn() {

fetch(`/loginCheck?${getFullCSRFParam()}`, {

method: 'POST'

}).then((response) => {

if (response.status === 200 && !response.redirected) this.setState({isSignedIn: true});

});

}

onEditClick() {

this.setState({editMode: true});

}

onEditOkClick() {

this.changeName();

}

changeName() {

if (this.refs.newName.value !== "")

$.ajax({

url: `/updateProfile?${getFullCSRFParam()}&username=${getCookie("username")}&name=${this.refs.newName.value}`,

type: 'post',

success: () => {

saveCookie("name", this.refs.newName.value);

this.setState({editMode: false});

},

error: (jqXhr, textStatus, errorThrown) => {

console.log(errorThrown + " " + textStatus);

}

});

}

loadUserInfo() {

$.ajax({

url: `/getUserInfo?username=${this.props.match.params.username}`,

type: 'get',

success: (response) => {

console.log(response);

console.log(response);

this.setState({user: response, loadEnds: true});

},

error: (jqXhr, textStatus, errorThrown) => {

console.log(errorThrown + " " + textStatus);

}

});

}

render() {

return (

<div>

<Navbar history={this.props.history}/>

<div className="container-fluid">

<div style={{display: "flex", justifyContent: "center", paddingTop: 30}}>

<div className="panel panel-info" style={{width: "50%"}}>

<div className="panel-body" style={{width: "100%"}}>

<div className="container-fluid">

<h2 className="text-center">@{this.state.myPage ? getCookie("username"): this.state.user !== null ? this.state.user.username: '...'}</h2>

<hr/>

<h4>id: <font

color="#A2A2A2"> {this.state.myPage ? getCookie("userId"): this.state.user !== null ? this.state.user.id: '...'}</font>

</h4>

{!this.state.editMode &&

<h4>Имя:

<font

color="#A2A2A2"> {this.state.myPage ? getCookie("name"): this.state.user !== null ? this.state.user.name: '...'}</font>

&#160;

{this.state.myPage &&

<button className="btn btn-info btn-sm" type="button" onClick={() => {

this.onEditClick()

}}>

<span className="glyphicon glyphicon-pencil"></span>

</button>

}

</h4>}

{this.state.editMode &&

<h4>Имя:

<input ref="newName" placeholder={'Введите имя'} maxLength={30}/>

&#160;

<button className="btn btn-info btn-sm" type="button" onClick={() => {

this.onEditOkClick()

}}>

<span className="glyphicon glyphicon-ok"></span>

</button>

</h4>}

<h4>Email:<font

color="#A2A2A2"> {this.state.myPage ? getCookie("userEmail"): this.state.user !== null ? this.state.user.email: '...'}</font>

</h4>

<hr/>

<h4>Подкасты:</h4>

{this.state.loadEnds &&

<UserProfilePagePodcastTable

myPage={this.state.myPage}

userId={this.state.myPage ? getCookie("userId"): this.state.user !== null ? this.state.user.id: '-1'}

history={this.props.history}

/>}

</div>

</div>

</div>

</div>

</div>

</div>

)

}

}

Файл: Discasst\src\main\resources\static\app\components\userPage\ UserProfilePageModalOnDelete.js

import React, {Component} from 'react';

export default class UserProfilePageModalOnDelete extends Component {

constructor(props) {

super(props);

this.state = {};

}

getName() {

if (this.props.podcast) return this.props.podcast.name;

return null

}

render() {

return (

<div className="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"

aria-hidden="true">

<div className="modal-dialog" role="document">

<div className="modal-content">

<div className="modal-header">

<button type="button" className="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div className="modal-body">

Удалить подкаст "{this.getName()}"?

</div>

<div className="modal-footer">

<button type="button" className="btn btn-secondary" data-dismiss="modal">Нет, я передумал

</button>

<button type="button" className="btn btn-primary" data-dismiss="modal"

onClick={this.props.onDelete}>Да, удалить подкаст

</button>

</div>

</div>

</div>

</div>

);

}

}

Файл: Discasst\src\main\resources\static\app\components\userPage\ UserProfilePagePodcastTable.js

import React from 'react';

import UserProfilePageModalOnDelete from './UserProfilePageModalOnDelete';

import {getCookie, getFullCSRFParam} from '../Helper';

export default class UserProfilePagePodcastTable extends React.Component {

constructor() {

super();

this.state = {

podcasts: -1,

coauthorPodcast: -1,

deletedPodcast: null

};

}

componentDidMount() {

if (this.props.userId !== '-1') this.getMyPodcasts();

}

getMyPodcasts() {

fetch(`/getPodcastsByUserId?id=${this.props.userId}`)

.then((response) => {

return response.json()

})

.then((json) => {

this.setState({podcasts: json});

this.getCoauthorPodcasts();

});

}

getCoauthorPodcasts() {

fetch(`/getPodcastsByUserIdInCoauthors?id=${this.props.userId}`)

.then((response) => {

return response.json()

})

.then((json) => {

this.setState({coauthorPodcast: json});

});

}

addEpisode = (item) => {

console.log("add episode to " + item.name);

this.props.history.push(`/createNewEpisode/${item.id}`);

};

deletePodcast = () => {

console.log("delete podcast " + this.state.deletedPodcast.name);

$.ajax({

url: `/removePodcast?id=${this.state.deletedPodcast.id}&${getFullCSRFParam()}`,

type: 'post',

success: () => {

this.props.history.push(`/user/${getCookie("username")}`);

},

error: (jqXhr, textStatus, errorThrown) => {

console.log(errorThrown + " " + textStatus);

}

});

window.location.reload();

};

chooseDeletedPodcast = (item) => {

this.setState({deletedPodcast: item});

};

addNewPodcast = () => {

console.log("add new podcast");

this.props.history.push(`/createNewPodcast`);

};

editCoauthors = (item) => {

this.props.history.push(`/addCoauthors/${item.id}`);

};

render() {

return (

<div className="panel panel-info" style={{backgroundColor: "#F9F9F9"}}>

<div className="panel-body">

{this.state.podcasts.length !== 0 && <h4>Созданные:</h4>}

{this.state.podcasts !== -1 && this.state.podcasts.map((item, num) =>

<div key={item.id}>

<div className="panel panel-info">

<div className="panel-body">

{this.props.myPage &&

<div style={{display: "flex", justifyContent: "center"}}>

<p className="h4" style={{width: "100%"}}><a onClick={() => {

this.props.history.push(`/podcast/${item.id}`)

}}>{item.name}</a></p>

<button className="btn btn-info btn"

onClick={() => this.editCoauthors(item)}><span

className="glyphicon glyphicon-user"></span> Изменить соавторов

</button>

&#160;&#160;

<button className="btn btn-info btn" onClick={() => this.addEpisode(item)}><span

className="glyphicon glyphicon-plus"></span> Добавить выпуск

</button>

&#160;&#160;

<button className="btn btn-danger btn" data-toggle="modal"

data-target="#exampleModal"

onClick={() => this.chooseDeletedPodcast(item)}

>

<span className="glyphicon glyphicon-remove"></span>

</button>

</div>}

{!this.props.myPage &&

<div style={{display: "flex", justifyContent: "center"}}>

<p className="h4" style={{width: "100%"}}><a onClick={() => {

this.props.history.push(`/podcast/${item.id}`)

}}>{item.name}</a></p>

</div>}

</div>

</div>

</div>

)}

{this.state.coauthorPodcast.length !== 0 && <h4>В соавторстве:</h4>}

{this.state.coauthorPodcast !== -1 && this.state.coauthorPodcast.map((item, num) =>

<div key={item.id}>

<div className="panel panel-info">

<div className="panel-body">

<div style={{display: "flex", justifyContent: "center"}}>

<p className="h4" style={{width: "100%"}}><a onClick={() => {

this.props.history.push(`/podcast/${item.id}`)

}}>{item.name}</a></p>

</div>

</div>

</div>

</div>

)}

{this.props.myPage &&

<button style={{height: "39px"}} className="btn btn-info pull-right"

onClick={this.addNewPodcast}>

<span className="glyphicon glyphicon-plus"></span> Добавить новый подкаст

</button>}

</div>

<UserProfilePageModalOnDelete onDelete={this.deletePodcast} podcast={this.state.deletedPodcast}/>

</div>

);

}

}