diff --git a/frontend/index.html b/frontend/index.html index a039973..68eadfb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,9 +1,9 @@ - + - + diff --git a/frontend/js/app.js b/frontend/js/app.js index ba2ac00..1cad240 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -12,13 +12,14 @@ import "file-loader?name=[name].[ext]!../img/favicon.ico" import "file-loader?name=[name].[ext]!../img/safari-pinned-tab.svg" // Styles -import "../less/app.less" +import "../scss/app.scss" // React import React from "react" import ReactDOM from "react-dom" import { Provider } from "react-redux" import { Router, Route, Switch, Redirect } from "react-router-dom" +import Container from "react-bootstrap/Container" // Auth import { ProtectedRoute, AdminRoute } from "./auth" @@ -50,7 +51,7 @@ const App = () => ( -
+ @@ -71,7 +72,7 @@ const App = () => ( }/> -
+ ); diff --git a/frontend/js/components/admins/stats.js b/frontend/js/components/admins/stats.js index 838a4e7..184ac0c 100644 --- a/frontend/js/components/admins/stats.js +++ b/frontend/js/components/admins/stats.js @@ -2,8 +2,7 @@ import React from "react" import PropTypes from "prop-types" export const Stats = props => ( -
-

Stats

+
( Stats.propTypes = { stats: PropTypes.object } const Stat = props => ( -
-
-
-

+
+
+
+

{props.name} - {props.count} + {props.count}

-
+
diff --git a/frontend/js/components/admins/users.js b/frontend/js/components/admins/users.js index deb9a47..9b79f35 100644 --- a/frontend/js/components/admins/users.js +++ b/frontend/js/components/admins/users.js @@ -6,24 +6,22 @@ import { Button, Modal } from "react-bootstrap" import Toggle from "react-bootstrap-toggle"; export const UserList = props => ( -
-

Users

-

Users

- - - - - - - - - - - - - - {props.users.map((el, index) => - )} +
+
#NameActivatedAdminPolochon URLPolochon tokenActions
+ + + + + + + + + + + + + {props.users.map((el, index) => + )}
#NameActivatedAdminPolochon URLPolochon tokenActions
@@ -100,16 +98,18 @@ function UserEdit(props) {   Edit user - {props.data.get("Name")} - +
handleSubmit(ev)}>
- setActivated(!activated)} + setActivated(!activated)} />
- setAdmin(!admin)} /> + setAdmin(!admin)} />
@@ -122,7 +122,7 @@ function UserEdit(props) { - + diff --git a/frontend/js/components/buttons/actions.js b/frontend/js/components/buttons/actions.js index 41b42e1..2cb5d33 100644 --- a/frontend/js/components/buttons/actions.js +++ b/frontend/js/components/buttons/actions.js @@ -1,80 +1,70 @@ import React from "react" +import PropTypes from "prop-types" -import { MenuItem } from "react-bootstrap" +import Dropdown from "react-bootstrap/Dropdown" import RefreshIndicator from "./refresh" -export class WishlistButton extends React.PureComponent { - constructor(props) { - super(props); - this.handleClick = this.handleClick.bind(this); - } - handleClick(e) { +export const WishlistButton = (props) => { + const handleClick = (e) => { e.preventDefault(); - if (this.props.wishlisted) { - this.props.deleteFromWishlist(this.props.resourceId); + if (props.wishlisted) { + props.deleteFromWishlist(props.resourceId); } else { - this.props.addToWishlist(this.props.resourceId); + props.addToWishlist(props.resourceId); } } - render() { - if (this.props.wishlisted) { - return ( - - - Delete from wishlist - - - ); - } else { - return ( - - - Add to wishlist - - - ); - } - } -} -export class DeleteButton extends React.PureComponent { - constructor(props) { - super(props); - this.handleClick = this.handleClick.bind(this); - } - handleClick(e) { - e.preventDefault(); - this.props.deleteFunc(this.props.resourceId, this.props.lastFetchUrl); - } - render() { + if (props.wishlisted) { return ( - + - Delete + Delete from wishlist - + + ); + } else { + return ( + + + Add to wishlist + + ); } } -export class RefreshButton extends React.PureComponent { - constructor(props) { - super(props); - this.handleClick = this.handleClick.bind(this); - } - handleClick(e) { - e.preventDefault(); - if (this.props.fetching) { - return - } - this.props.getDetails(this.props.resourceId); - } - render() { - return ( - - - - ); +export const DeleteButton = (props) => { + const handleClick = () => { + props.deleteFunc(props.resourceId, props.lastFetchUrl); } + return ( + + + Delete + + + ); } +DeleteButton.propTypes = { + resourceId: PropTypes.string.isRequired, + lastFetchUrl: PropTypes.string, + deleteFunc: PropTypes.func.isRequired, +}; + +export const RefreshButton = (props) => { + const handleClick = () => { + if (props.fetching) { return; } + props.getDetails(props.resourceId); + } + return ( + + + + ); +} +RefreshButton.propTypes = { + fetching: PropTypes.bool.isRequired, + resourceId: PropTypes.string.isRequired, + getDetails: PropTypes.func.isRequired, +}; diff --git a/frontend/js/components/buttons/download.js b/frontend/js/components/buttons/download.js index bf1581f..f9ba911 100644 --- a/frontend/js/components/buttons/download.js +++ b/frontend/js/components/buttons/download.js @@ -2,53 +2,42 @@ import React, { useState } from "react" import PropTypes from "prop-types" import { List } from "immutable" -import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap" +import Modal from "react-bootstrap/Modal" +import Dropdown from "react-bootstrap/Dropdown" +import SplitButton from "react-bootstrap/SplitButton" const DownloadButton = (props) => { if (props.url === "") { return null; } + const size = props.xs ? "sm" : ""; const [showModal, setShowModal] = useState(false); - let btnSize = "btn-sm"; - if (props.xs) { - btnSize = "btn-xs"; - } - return ( - - - - - setShowModal(true)}> + + + setShowModal(true)}> Stream in browser - - + + - setShowModal(false)} dialogClassName="player-modal"> - - - -  Browser streaming - - + setShowModal(false)} size="lg" centered> + {props.name} - + - + ); } DownloadButton.propTypes = { - customClassName: PropTypes.string, + name: PropTypes.string, xs: PropTypes.bool, url: PropTypes.string.isRequired, subtitles: PropTypes.instanceOf(List), @@ -60,7 +49,7 @@ const Player = (props) => { const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0); return (
-