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