v3.0.0

ForFansubs · Jun 27, 2020 · a77456f · a77456f
2 parents ffa0a28 + 686c0a8
commit a77456f
Show file tree

Hide file tree

Showing 65 changed files with 5,368 additions and 4,895 deletions.
diff --git a/.env.example b/.env.example
@@ -5,9 +5,7 @@ REACT_APP_DISQUS_SHORTNAME=
 REACT_APP_HEADER_LOGO_TYPE=
 REACT_APP_DEV_API_URL=
 REACT_APP_GA_USER_ID=
-REACT_APP_FACEBOOK_LINK=
-REACT_APP_DISCORD_LINK=
-REACT_APP_SSS_PAGE_TEXT=
+REACT_APP_SSS_PAGE=
 
 REACT_APP_META_DESCRIPTION=
 REACT_APP_META_AUTHOR=

diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@
 /public/*.html
 /public/*.json
 /public/*.ico
+ecosystem.config.js
 
 # testing
 /coverage
@@ -31,3 +32,6 @@ npm-debug.log*
 debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+src/static/CoverPlaceholder.png
+src/static/HeaderPlaceholder.png
diff --git a/package.json b/package.json
@@ -1,45 +1,48 @@
 {
   "name": "forfansubsfront",
-  "version": "2.7.2",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-brands-svg-icons": "^5.12.1",
-    "@fortawesome/free-regular-svg-icons": "^5.12.1",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@fortawesome/react-fontawesome": "^0.1.9",
-    "@material-ui/core": "^4.9.5",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.10",
+    "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.55",
     "awesome-debounce-promise": "^2.1.0",
     "axios": "^0.19.2",
-    "date-fns": "^2.11.0",
-    "disqus-react": "^1.0.7",
+    "core-js": "^3.6.5",
+    "cron": "^1.8.2",
+    "date-fns": "^2.14.0",
+    "disqus-react": "^1.0.8",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
-    "node-sass": "^4.13.1",
-    "notistack": "^0.9.9",
-    "react": "^16.13.0",
+    "markdown-to-jsx": "^6.11.4",
+    "node-sass": "^4.14.1",
+    "notistack": "^0.9.16",
+    "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
     "react-async-hook": "^3.6.1",
-    "react-dom": "^16.13.0",
+    "react-dom": "^16.13.1",
     "react-dotdotdot": "^1.3.1",
     "react-ga": "^2.7.0",
-    "react-helmet": "^5.2.1",
-    "react-infinite-scroll-component": "^5.0.4",
-    "react-lazyload": "^2.6.5",
+    "react-helmet-async": "^1.0.6",
+    "react-infinite-scroll-component": "^5.0.5",
+    "react-interval": "^2.1.1",
+    "react-lazyload": "^2.6.7",
     "react-parallax": "^3.0.3",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
-    "react-slick": "^0.25.2",
-    "react-toastify": "^5.5.0",
-    "reactn": "^2.2.6",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-swipeable": "^5.5.1",
+    "react-toastify": "^6.0.5",
+    "reactn": "^2.2.7",
     "reactn-devtools": "^1.1.0",
     "redux": "^4.0.5",
     "rellax": "^1.12.1",
-    "remarkable": "^2.0.0",
-    "slick-carousel": "^1.8.1",
-    "source-map-explorer": "^2.4.0",
-    "styled-components": "^5.0.1",
-    "use-constant": "^1.0.0"
+    "remarkable": "^2.0.1",
+    "source-map-explorer": "^2.4.2"
   },
   "resolutions": {
     "minimist": "^1.2.3"

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,7 @@
 import React, { useEffect, lazy, Suspense } from 'react';
 import { useDispatch, useGlobal } from 'reactn'
-import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { HelmetProvider } from 'react-helmet-async'
 import Wrapper from './components/hoc/wrapper'
 import ReactGA from 'react-ga';
 
@@ -16,6 +17,8 @@ const SearchPage = lazy(() => import('./pages/ara/index'))
 const AnimePage = lazy(() => import('./pages/ceviriler/anime/index'))
 const MangaPage = lazy(() => import('./pages/ceviriler/manga/index'))
 const EpisodePage = lazy(() => import('./pages/episode/index'))
+const MangaEpisodePage = lazy(() => import('./pages/manga-episode/index'))
+const CompleteRegistrationPage = lazy(() => import('./pages/kayit-tamamla/index'))
 
 export default function App() {
   const getOnline = useDispatch('getOnline')
@@ -33,30 +36,22 @@ export default function App() {
       <>
         <Router>
           <Wrapper>
-            <Suspense fallback={<Loading />}>
-              <Switch>
-                <Route path="/" exact component={IndexPage} />
-                <Route path="/ceviriler/anime/:slug/izle/:episodeInfo?" exact component={EpisodePage} />
-                <Route path={"/ceviriler/anime/:id/:slug"} exact render={({ match }) => {
-                  if (/([0-9])\w+/.test(match.params.id)) return <Redirect to={`/ceviriler/anime/${match.params.slug}`} />
-                }} />
-                <Route path="/ceviriler/anime/:slug/:id" exact render={({ match }) => {
-                  if (match.params.id !== "izle") return <Redirect to={`/ceviriler/anime/${match.params.slug}`} />
-                }} />
-                <Route path="/ceviriler/anime/:id/:slug/izle/:episodeInfo?" exact render={({ match }) => {
-                  return <Redirect to={`/ceviriler/anime/${match.params.slug}/izle/${match.params.episodeInfo.replace(/-([0-9])\w+/, '')}`} />
-                }} />
-                <Route path="/ceviriler/manga/:slug/:id" exact render={({ match }) => <Redirect to={`/ceviriler/manga/${match.params.slug}`} />} />
-                <Route path="/ceviriler/anime/:slug" exact component={AnimePage} />
-                <Route path="/ceviriler/manga/:slug" exact component={MangaPage} />
-                <Route path="/opg/:type/:slug" exact render={({ match }) => <Redirect to={`/ceviriler/${match.params.type}/${match.params.slug}`} />} />
-                <Route path="/ara/:type?/:offset?" component={SearchPage} />
-                <Route path="/sss" exact component={SSSPage} />
-                <Route path="/ekip-alimlari" exact component={EkipAlimlariPage} />
-                <Route component={FourOhFourPage} />
-              </Switch>
-            </Suspense>
-
+            <HelmetProvider>
+              <Suspense fallback={<Loading />}>
+                <Switch>
+                  <Route path="/" exact component={IndexPage} />
+                  <Route path="/ceviriler/anime/:slug/izle/:episodeInfo?" exact component={EpisodePage} />
+                  <Route path="/ceviriler/anime/:slug" exact component={AnimePage} />
+                  <Route path="/ceviriler/manga/:slug/oku/:episode_number?/:page_number?" exact component={MangaEpisodePage} />
+                  <Route path="/ceviriler/manga/:slug" exact component={MangaPage} />
+                  <Route path="/ara/:type?/:offset?" component={SearchPage} />
+                  <Route path="/sss" exact component={SSSPage} />
+                  <Route path="/ekip-alimlari" exact component={EkipAlimlariPage} />
+                  <Route path="/kullanici/kayit-tamamla/:hash" exact component={CompleteRegistrationPage} />
+                  <Route component={FourOhFourPage} />
+                </Switch>
+              </Suspense>
+            </HelmetProvider>
           </Wrapper>
         </Router>
       </>

diff --git a/src/components/404/404.js b/src/components/404/404.js
@@ -1,18 +1,29 @@
 import React, { useState } from 'react'
 import { Redirect } from 'react-router-dom'
 
-import Box from '@material-ui/core/Box'
-import Typography from '@material-ui/core/Typography'
+import { Typography, makeStyles } from '@material-ui/core'
 
 import { fourOhFourGif } from '../../config/theming/images'
-import styled from 'styled-components'
 
-const ImageBox = styled(Box)`
-    max-width: 100vw;
-    width: 500px;
-`
+const useStyles = makeStyles(theme => ({
+    Container: {
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        textAlign: "center",
+        transform: "translate(-50%, -50%)"
+    },
+    Image: {
+        maxWidth: "100vw",
+        width: "500px",
+        boxShadow: theme.shadows[6],
+        marginBottom: theme.spacing(2)
+    }
+}))
 
 export default function FourOhFourPage() {
+    const classes = useStyles()
+
     const [redirect, setRedirect] = useState(false)
 
     setTimeout(() => {
@@ -22,15 +33,15 @@ export default function FourOhFourPage() {
     return (
         <>
             {redirect ? <Redirect to="/" /> : ""}
-            <Box position="absolute" left="50%" top="50%" textAlign="center" style={{ transform: "translate(-50%, -50%)" }}>
-                <ImageBox component="img" mb={2} boxShadow={2} src={fourOhFourGif} />
+            <div className={classes.Container}>
+                <img src={fourOhFourGif} className={classes.Image} alt="404gif" />
                 <Typography variant="h4">
                     Aradığınız sayfayı bulamadık, kaldırılmış olabilir.
                     </Typography>
                 <Typography variant="body1">
                     10 saniye içerisinde ana sayfaya yönlendirileceksiniz.
                     </Typography>
-            </Box>
+            </div>
         </>
     )
 }
diff --git a/src/components/app/pre-screens.js b/src/components/app/pre-screens.js
@@ -5,27 +5,29 @@ import Box from '@material-ui/core/Box'
 import Typography from '@material-ui/core/Typography'
 import CircularProgress from '@material-ui/core/CircularProgress'
 
-import styled from 'styled-components'
 import { fullLogo, fullLogoDark } from '../../config/theming/images'
 
-const ImageContainer = styled.img`
-    max-width: calc(100vw - 80px);
-    margin-bottom: 10px;
-    width: 400px;
-`
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles(theme => ({
+    LogoContainer: {
+        maxWidth: "calc(100vw - 80px)",
+        width: "400px"
+    },
+    TextContainer: {
+        display: "block",
 
-const LoadingContainer = styled(Box)`
-    h4 {
-        margin-left: 16px;
     }
-`
+}))
 
 export default function InitialLoading(props) {
     const { error } = props
     const [usertheme] = useGlobal('theme')
+    const theme = useStyles()
+
     return (
         <Box position="absolute" left="50%" top="50%" textAlign="center" style={{ transform: "translate(-50%, -50%)" }}>
-            <ImageContainer src={usertheme === "dark" ? fullLogo : fullLogoDark} />
+            <img className={theme.LogoContainer} src={usertheme === "dark" ? fullLogo : fullLogoDark} alt="Site loading logo" />
             {error ?
                 <>
                     <Typography variant="h4">
@@ -34,12 +36,13 @@ export default function InitialLoading(props) {
                     <Typography variant="body1">
                         Lütfen daha sonra tekrar deneyin...
                     </Typography>
+
                 </>
                 :
                 <>
-                    <LoadingContainer display="flex" alignItems="center" justifyContent="center">
-                        <CircularProgress /><Typography variant="h4">Yükleniyor...</Typography>
-                    </LoadingContainer>
+                    <Box ml={1} display="flex" alignItems="center" justifyContent="center">
+                        <CircularProgress />
+                    </Box>
                 </>
             }
         </Box>