parent
aea8e34cbd
commit
6401a3d9bf
27 changed files with 366 additions and 160 deletions
@ -0,0 +1,30 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { Route, useHistory, Redirect } from "react-router-dom"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
const PrivateRouter = ({ |
||||||
|
component: Component, |
||||||
|
restricted, |
||||||
|
status, |
||||||
|
...rest |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<Route |
||||||
|
{...rest} |
||||||
|
render={(props) => |
||||||
|
1 ? ( |
||||||
|
<Component {...props} /> |
||||||
|
) : ( |
||||||
|
<Redirect to="/login" /> |
||||||
|
) |
||||||
|
} |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect( |
||||||
|
(state) => ({ |
||||||
|
status: state.publicApi.status, |
||||||
|
}), |
||||||
|
{} |
||||||
|
)(PrivateRouter); |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.timer { |
||||||
|
flex-direction: row; |
||||||
|
direction: rtl !important; |
||||||
|
margin-right: 10px; |
||||||
|
margin-left: 10px; |
||||||
|
color: #6cbe44; |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import { Component } from "react"; |
||||||
|
import "./index.css"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: { |
||||||
|
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
||||||
|
}, |
||||||
|
mobile: { |
||||||
|
div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
||||||
|
}, |
||||||
|
}; |
||||||
|
export default class Timer extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
time: { |
||||||
|
h: 0, |
||||||
|
m: 0, |
||||||
|
s: 0, |
||||||
|
}, |
||||||
|
seconds : props.seconds, |
||||||
|
flag: true, |
||||||
|
}; |
||||||
|
this.timer = 0; |
||||||
|
this.startTimer = this.startTimer.bind(this); |
||||||
|
this.countDown = this.countDown.bind(this); |
||||||
|
} |
||||||
|
|
||||||
|
secondsToTime(secs) { |
||||||
|
let hours = Math.floor(secs / (60 * 60)); |
||||||
|
|
||||||
|
let divisor_for_minutes = secs % (60 * 60); |
||||||
|
let minutes = Math.floor(divisor_for_minutes / 60); |
||||||
|
|
||||||
|
let divisor_for_seconds = divisor_for_minutes % 60; |
||||||
|
let seconds = Math.ceil(divisor_for_seconds); |
||||||
|
|
||||||
|
let obj = { |
||||||
|
h: hours, |
||||||
|
m: minutes, |
||||||
|
s: seconds, |
||||||
|
}; |
||||||
|
return obj; |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.startTimer(); |
||||||
|
let timeLeftVar = this.secondsToTime(this.state.seconds); |
||||||
|
this.setState({ time: timeLeftVar }); |
||||||
|
} |
||||||
|
|
||||||
|
startTimer() { |
||||||
|
if (this.timer === 0 && this.state.seconds > 0) { |
||||||
|
this.timer = setInterval(this.countDown, 1000); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
countDown = async () => { |
||||||
|
// Remove one second, set state so a re-render happens.
|
||||||
|
let seconds = this.state.seconds - 1; |
||||||
|
this.setState({ |
||||||
|
time: this.secondsToTime(seconds), |
||||||
|
seconds: seconds, |
||||||
|
}); |
||||||
|
if (seconds === 0) { |
||||||
|
this.props.refresh(true); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
componentWillUnmount() { |
||||||
|
clearInterval(this.timer); |
||||||
|
} |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="timer"> |
||||||
|
{this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''}
|
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import "./App.css"; |
||||||
|
import { |
||||||
|
BrowserRouter as Router, |
||||||
|
Route, |
||||||
|
Switch, |
||||||
|
} from "react-router-dom"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
import Auth from "./views/Auth/index"; |
||||||
|
import Home from "./views/Home/index"; |
||||||
|
import Course from "./views/Course/index"; |
||||||
|
import VideoTube from "./views/VideoTube/index"; |
||||||
|
import Subscription from "./views/Subscription/index"; |
||||||
|
import Contact from "./views/Contact/index"; |
||||||
|
import Faq from "./views/Faq/index"; |
||||||
|
import PrivateRouter from "./components/PrivateRouter/index"; |
||||||
|
|
||||||
|
function router({ status }) { |
||||||
|
return ( |
||||||
|
<Router> |
||||||
|
<Switch> |
||||||
|
<PrivateRouter restricted={false} component={Home} path="/" exact /> |
||||||
|
<Route exact path={"/sign-up"}> |
||||||
|
<Auth page="signup" /> |
||||||
|
</Route> |
||||||
|
<Route exact path={"/login"}> |
||||||
|
<Auth page="login" /> |
||||||
|
</Route> |
||||||
|
<Route exact path={"/profile"}> |
||||||
|
<Auth page="profile" /> |
||||||
|
</Route> |
||||||
|
<PrivateRouter |
||||||
|
restricted={false} |
||||||
|
component={Course} |
||||||
|
path="/courses/:id" |
||||||
|
exact |
||||||
|
/> |
||||||
|
<PrivateRouter restricted={false} component={VideoTube} path="/video-tube" exact /> |
||||||
|
<PrivateRouter restricted={false} component={Subscription} path="/subscribe" exact /> |
||||||
|
<Route exact path={"/contact"}> |
||||||
|
<Contact /> |
||||||
|
</Route> |
||||||
|
<Route exact path={"/faq"}> |
||||||
|
<Faq /> |
||||||
|
</Route> |
||||||
|
</Switch> |
||||||
|
</Router> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default connect((state) => ({ |
||||||
|
status: state.publicApi.status, |
||||||
|
}))(router); |
||||||
@ -1,55 +0,0 @@ |
|||||||
import "./App.css"; |
|
||||||
import { |
|
||||||
BrowserRouter as Router, |
|
||||||
Route, |
|
||||||
Switch, |
|
||||||
Redirect, |
|
||||||
} from "react-router-dom"; |
|
||||||
|
|
||||||
import Auth from './views/Auth/index'; |
|
||||||
import Home from "./views/Home/index"; |
|
||||||
import Course from "./views/Course/index"; |
|
||||||
import VideoTube from "./views/VideoTube/index"; |
|
||||||
import Subscription from "./views/Subscription/index"; |
|
||||||
import Contact from "./views/Contact/index"; |
|
||||||
import Faq from "./views/Faq/index"; |
|
||||||
|
|
||||||
function router(){ |
|
||||||
return ( |
|
||||||
<Router> |
|
||||||
<Switch> |
|
||||||
<Route exact path={'/'}> |
|
||||||
<Home /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/sign-up'}> |
|
||||||
<Auth page="signup" /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/login'}> |
|
||||||
<Auth page="login" /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/profile'}> |
|
||||||
<Auth page="profile" /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/courses/:id'}> |
|
||||||
<Course /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/video-tube'}> |
|
||||||
<VideoTube /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/subscribe'}> |
|
||||||
<Subscription /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/contact'}> |
|
||||||
<Contact /> |
|
||||||
</Route> |
|
||||||
<Route exact path={'/faq'}> |
|
||||||
<Faq /> |
|
||||||
</Route> |
|
||||||
</Switch> |
|
||||||
</Router> |
|
||||||
); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default router; |
|
||||||
|
|
||||||
Loading…
Reference in new issue