{
+ setIsAutoScrollActive(false)
+ setActive(i)
+ setTimeout(() => {
+ setIsAutoScrollActive(true)
+ }, 200)
+ }}>
@@ -98,5 +178,6 @@ export default function FeaturedContainer(props) {
FeaturedContainer.propTypes = {
list: PropTypes.array.isRequired,
- loading: PropTypes.bool.isRequired
+ loading: PropTypes.bool.isRequired,
+ contentType: PropTypes.string.isRequired
}
\ No newline at end of file
diff --git a/src/components/index/featured/featured.js b/src/components/index/featured/featured.js
index 9e7c0b7..36fd3a6 100644
--- a/src/components/index/featured/featured.js
+++ b/src/components/index/featured/featured.js
@@ -1,9 +1,8 @@
-import React from 'react'
-import { useState } from 'reactn'
+import { useState } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { Link } from 'react-router-dom'
-import { animePage } from '../../../config/front-routes'
+import { animePage, mangaPage } from '../../../config/front-routes'
import { contentHeader, contentLogo } from '../../../config/api-routes'
import { HeaderPlaceholder } from '../../../config/theming/images'
@@ -47,7 +46,7 @@ const useStyles = makeStyles(theme => ({
left: 0,
right: 0,
width: "35%",
- backgroundColor: fade(theme.palette.background.default, 0.6),
+ backgroundColor: fade(theme.palette.background.default, 0.7),
display: "flex",
flexDirection: "column",
justifyContent: "center",
@@ -57,13 +56,21 @@ const useStyles = makeStyles(theme => ({
lineHeight: "3.6rem"
},
[theme.breakpoints.down('sm')]: {
- backgroundColor: "transparent",
width: "100%"
}
},
LogoContainer: {
maxWidth: 400,
- width: "100%"
+ width: "100%",
+ [theme.breakpoints.down('sm')]: {
+ maxWidth: 300
+ }
+ },
+ SynopsisContainer: {
+ display: "block",
+ [theme.breakpoints.down('sm')]: {
+ display: "none"
+ }
},
GenresContainer: {
display: "flex",
@@ -111,26 +118,26 @@ export function FeaturedLoading() {
}
export default function Featured(props) {
- const { name, slug, genres, display } = props
+ const { name, slug, genres, display, synopsis, contentType } = props
const classes = useStyles(props)
const [logoError, setLogoError] = useState(false)
return (
<>
-
-
![]({contentHeader("anime",)
{
+
{
img.target.onerror = null
img.target.src = HeaderPlaceholder
- }} alt={name + " toplu"} />
+ }} alt="" />
{logoError ?
-
+
{name.toUpperCase()}
@@ -142,7 +149,14 @@ export default function Featured(props) {
}}
alt=""
title={`${name} logo`} />}
-
+
+
+
+ {synopsis.toUpperCase()}
+
+
+
+
{genres.split(',').map(genre => {genre})}
@@ -160,5 +174,6 @@ Featured.propTypes = {
genres: PropTypes.string.isRequired,
version: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
- display: PropTypes.bool.isRequired
+ display: PropTypes.bool.isRequired,
+ contentType: PropTypes.string.isRequired
}
\ No newline at end of file
diff --git a/src/components/index/index.js b/src/components/index/index.js
index 845d3b3..bca6364 100644
--- a/src/components/index/index.js
+++ b/src/components/index/index.js
@@ -1,5 +1,6 @@
import React from 'react'
-import { makeStyles } from '@material-ui/core'
+import { Divider, makeStyles } from '@material-ui/core'
+import { grey } from '@material-ui/core/colors'
const useStyles = makeStyles(theme => ({
@@ -21,29 +22,28 @@ const useStyles = makeStyles(theme => ({
}
}
},
+ MainDiv: {
+ color: theme.palette.type === "dark" ? "inherit" : grey[700]
+ },
ContainerDiv: {
- marginBottom: theme.spacing(5)
},
IndexHeader: {
marginBottom: theme.spacing(2)
},
EpisodeContainer: {
display: "grid",
- gridTemplateColumns: "repeat(8, 1fr)",
+ gridTemplateColumns: "repeat(9, 1fr)",
gridTemplateRows: "repeat(1, 1fr)",
gap: `${theme.spacing(2)}px`,
- gridTemplateAreas: `"Title Title Title . . . . ." ". . . . . . . ."`,
- },
- Title: {
- gridArea: "Title"
+ gridTemplateAreas: `". . . . . . . . ." ". . . . . . . . ."`,
},
[theme.breakpoints.down("md")]: {
EpisodeContainer: {
display: "grid",
- gridTemplateColumns: "repeat(5, 1fr)",
+ gridTemplateColumns: "repeat(6, 1fr)",
gridTemplateRows: "repeat(1, 1fr)",
gap: `${theme.spacing(2)}px`,
- gridTemplateAreas: `"Title Title . . ." ". . . . ."`,
+ gridTemplateAreas: `". . . . . ."`,
},
Title: {
"& h2": {
@@ -51,13 +51,16 @@ const useStyles = makeStyles(theme => ({
}
}
},
+ IndexDivider: {
+ margin: theme.spacing(4, 0)
+ },
[theme.breakpoints.down("xs")]: {
EpisodeContainer: {
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
- gridTemplateRows: "repeat(2, 1fr)",
+ gridTemplateRows: "repeat(1, 1fr)",
gap: `${theme.spacing(2)}px`,
- gridTemplateAreas: `"Title Title ." ". . ."`,
+ gridTemplateAreas: `". . ."`,
},
Title: {
"& h2": {
@@ -77,4 +80,14 @@ function TitleContainer(props) {
)
}
-export { useStyles, TitleContainer }
\ No newline at end of file
+function IndexDivider() {
+ const classes = useStyles()
+
+ return (
+
+ )
+}
+
+export { useStyles, TitleContainer, IndexDivider }
\ No newline at end of file
diff --git a/src/components/index/latest/latestanimanga.js b/src/components/index/latest/latestanimanga.js
index da6978e..616e725 100644
--- a/src/components/index/latest/latestanimanga.js
+++ b/src/components/index/latest/latestanimanga.js
@@ -1,101 +1,43 @@
-import React, { useState, useRef } from 'react'
-import { useGlobal } from 'reactn'
-import { Link } from 'react-router-dom'
-import { animePage, mangaPage } from '../../../config/front-routes'
+import { useState, useRef } from "react";
+import { Link } from "react-router-dom";
+import { animePage, mangaPage } from "../../../config/front-routes";
+import { isMobile } from "react-device-detect";
+import { Grid, makeStyles, Popper, Fade, Divider } from "@material-ui/core";
+import { grey } from "@material-ui/core/colors";
+import Typography from "@material-ui/core/Typography";
+import { CoverPlaceholder } from "../../../config/theming/images";
+import { Skeleton } from "@material-ui/lab";
+import Dotdotdot from "react-dotdotdot";
+import { contentCover } from "../../../config/api-routes";
-import { Grid, makeStyles, Popper, Fade } from '@material-ui/core';
-import { grey } from '@material-ui/core/colors'
-import Typography from '@material-ui/core/Typography'
-import { CoverPlaceholder } from '../../../config/theming/images';
-import { Skeleton } from '@material-ui/lab';
-import Dotdotdot from 'react-dotdotdot';
-import { contentCover } from '../../../config/api-routes';
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
Container: {
position: "relative",
- '& *': {
- fontFamily: "'Overpass', sans-serif"
- }
},
Image: {
position: "relative",
paddingBottom: "140%",
overflow: "hidden",
boxShadow: theme.shadows[6],
- '& img': {
+ "& img": {
position: "absolute",
objectFit: "cover",
width: "100%",
- height: "100%"
- }
+ height: "100%",
+ },
},
Title: {
marginTop: theme.spacing(1),
color: theme.palette.type === "dark" ? "inherit" : grey[700],
- '& *': {
- fontFamily: "'Overpass', sans-serif"
- }
+ "& .MuiTypography-body1": {
+ fontFamily: "'Overpass', sans-serif",
+ fontSize: "0.875rem",
+ fontWeight: "bold",
+ },
},
PopperContainer: {
zIndex: 1,
- '&[x-placement*="bottom"] $Arrow': {
- top: 0,
- left: 0,
- marginTop: '-0.9em',
- width: '3em',
- height: '1em',
- '&::before': {
- borderWidth: '0 1em 1em 1em',
- borderColor: `transparent transparent ${theme.palette.background.level1} transparent`,
- },
- },
- '&[x-placement*="top"] $Arrow': {
- bottom: 0,
- left: 0,
- marginBottom: '-0.9em',
- width: '3em',
- height: '1em',
- '&::before': {
- borderWidth: '1em 1em 0 1em',
- borderColor: `${theme.palette.background.level1} transparent transparent transparent`,
- },
- },
- '&[x-placement*="right"] $Arrow': {
- left: 0,
- marginLeft: '-0.9em',
- height: '3em',
- width: '1em',
- '&::before': {
- borderWidth: '1em 1em 1em 0',
- borderColor: `transparent ${theme.palette.background.level1} transparent transparent`,
- },
- },
- '&[x-placement*="left"] $Arrow': {
- right: 0,
- marginRight: '-0.9em',
- height: '3em',
- width: '1em',
- '&::before': {
- borderWidth: '1em 0 1em 1em',
- borderColor: `transparent transparent transparent ${theme.palette.background.level1}`,
- },
- },
- },
- Arrow: {
- position: 'absolute',
- fontSize: 7,
- width: '3em',
- height: '3em',
- '&::before': {
- content: '""',
- margin: 'auto',
- display: 'block',
- width: 0,
- height: 0,
- borderStyle: 'solid',
- },
},
InfoBox: {
backgroundColor: theme.palette.background.level1,
@@ -105,59 +47,86 @@ const useStyles = makeStyles(theme => ({
minWidth: 350,
minHeight: 200,
maxHeight: 275,
- overflow: "hidden"
+ overflow: "hidden",
+ "& h2": {
+ fontFamily: "'Overpass', sans-serif",
+ fontSize: "1rem",
+ },
},
GenresContainer: {
- marginTop: -4,
- '& span': {
+ marginBottom: theme.spacing(1),
+ "& span": {
display: "inline-block",
- padding: "4px 4px 0",
+ padding: "0 4px",
margin: "0 4px 4px 0",
backgroundColor: theme.palette.primary.main,
- color: theme.palette.primary.contrastText
- }
- }
-}))
+ color: theme.palette.primary.contrastText,
+ },
+ },
+ SynopsisContainer: {
+ fontSize: "0.875rem",
+ marginTop: theme.spacing(1),
+ },
+}));
export const LoadingDivAniManga = (key) => {
return (
-
+
- )
-}
-
+ );
+};
export default function LatestAniManga(props) {
- const classes = useStyles()
- const { slug, cover_art, name, synopsis, release_date, version } = props
+ const classes = useStyles();
+ const { slug, cover_art, name, synopsis, release_date, version } = props;
const [anchorEl, setAnchorEl] = useState(null);
- const [arrowEl, setArrowEl] = useState(null)
- const [imageError, setImageError] = useState(false)
- const refEl = useRef()
- const [mobile] = useGlobal("mobile")
+ const [imageError, setImageError] = useState(false);
+ const refEl = useRef();
-
- const genres = props.genres.split(',').map((d, i) => i < 5 ? (
-
- {d}
-
- ) : null)
+ const genres = props.genres.split(",").map((d, i) =>
+ i < 5 ? (
+
+ {d}
+
+ ) : null
+ );
function handlePopperMouseEnter() {
- setAnchorEl(refEl.current)
+ setAnchorEl(refEl.current);
}
function handlePopperMouseLeave() {
- setAnchorEl(null)
+ setAnchorEl(null);
}
- const open = Boolean(anchorEl)
+ const open = Boolean(anchorEl);
return (
<>
-
-
+
{
- img.target.onerror = null
- if (imageError) return img.target.src = CoverPlaceholder
- img.target.src = cover_art
- setImageError(true)
+ onError={(img) => {
+ img.target.onerror = null;
+ if (imageError)
+ return (img.target.src = CoverPlaceholder);
+ img.target.src = cover_art;
+ setImageError(true);
}}
- alt={`${name} Poster Resmi`} />
+ alt=''
+ />
+
+
+
+ {name}
+
- {mobile ?
-
-
- {name}
-
-
- : ""}
- {mobile ? "" :
-
+
+ {isMobile ? (
+ ""
+ ) : (
- {({ TransitionProps }) =>
- (
-
-
-
-
-
- {name}{release_date ? ` - ${new Date(release_date).getFullYear()}` : ""}{version === "bd" ? ` - (Blu-ray)` : ""}
+ transition
+ >
+ {({ TransitionProps }) => (
+
+
+
+
+
+
+ {name}
+ {release_date
+ ? ` - ${new Date(
+ release_date
+ ).getFullYear()}`
+ : ""}
+ {version === "bd"
+ ? ` - (Blu-ray)`
+ : ""}
+
-
- {genres}
+
+
+ {genres}
+
+
+
+
+ {synopsis}
-
-
- {synopsis}
-
-
-
+
+
+ )}
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/index/latest/latestbatchlinks.js b/src/components/index/latest/latestbatchlinks.js
index a7eff7b..24288a7 100644
--- a/src/components/index/latest/latestbatchlinks.js
+++ b/src/components/index/latest/latestbatchlinks.js
@@ -1,5 +1,3 @@
-import React from 'react'
-
import Dotdotdot from 'react-dotdotdot'
import { Link } from 'react-router-dom'
import { Typography, Grid, makeStyles, fade } from '@material-ui/core'
@@ -78,7 +76,7 @@ export default (props) => {
{
img.target.onerror = null
img.target.src = HeaderPlaceholder
- }} alt={anime_name + " toplu"} />
+ }} alt="" />
diff --git a/src/components/index/latest/latestepisode.js b/src/components/index/latest/latestepisode.js
index 13d3849..4e518e1 100644
--- a/src/components/index/latest/latestepisode.js
+++ b/src/components/index/latest/latestepisode.js
@@ -1,18 +1,17 @@
-import React from 'react'
+import { useState } from 'react'
import propTypes from 'prop-types'
import { Link } from 'react-router-dom'
-import { episodePage } from '../../../config/front-routes'
import { Grid, Typography, makeStyles } from '@material-ui/core'
import { grey } from '@material-ui/core/colors'
-
+import { Skeleton } from '@material-ui/lab'
+import Dotdotdot from 'react-dotdotdot'
import Format from '../../date-fns/format'
-import episodeTitleParser from '../../../config/episode-title-parser'
+import EpisodeTitleParser from '../../../config/episode-title-parser'
import { CoverPlaceholder } from '../../../config/theming/images'
+
+import { episodePage } from '../../../config/front-routes'
import { contentCover } from '../../../config/api-routes'
-import { useState } from 'reactn'
-import { Skeleton } from '@material-ui/lab'
-import Dotdotdot from 'react-dotdotdot'
const useStyles = makeStyles(theme => ({
Container: {
@@ -30,11 +29,17 @@ const useStyles = makeStyles(theme => ({
height: "100%"
}
},
+ Title: {
+ fontSize: "0.875rem"
+ },
Metadata: {
padding: `${theme.spacing(1)}px 0`,
color: theme.palette.type === "dark" ? "inherit" : grey[700],
'& *': {
fontFamily: "'Overpass', sans-serif"
+ },
+ "& .MuiTypography-body1": {
+ fontWeight: "bold"
}
}
}))
@@ -47,7 +52,7 @@ export default function LatestEpisode(props) {
const { anime_name, episode_number, special_type, cover_art, created_by } = props
const [imageError, setImageError] = useState(false)
- const episodeInfo = episodeTitleParser(anime_name, episode_number, special_type)
+ const episodeInfo = EpisodeTitleParser(anime_name, episode_number, special_type)
const formattedDate = Format(new Date(props.created_time)).toUpperCase()
@@ -64,11 +69,11 @@ export default function LatestEpisode(props) {
img.target.src = cover_art
setImageError(true)
}}
- alt={`${anime_name} ${episodeInfo.title} Poster Resmi`} />
+ alt="" />
-
+
{episodeInfo.title}
diff --git a/src/components/index/latest/latestmangaepisode.js b/src/components/index/latest/latestmangaepisode.js
index df5cd72..ac6e63b 100644
--- a/src/components/index/latest/latestmangaepisode.js
+++ b/src/components/index/latest/latestmangaepisode.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import { useState } from 'react'
import propTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { mangaEpisodePage } from '../../../config/front-routes'
@@ -9,8 +9,8 @@ import { grey } from '@material-ui/core/colors'
import Format from '../../date-fns/format'
import { CoverPlaceholder } from '../../../config/theming/images'
import { contentCover } from '../../../config/api-routes'
-import { useState } from 'reactn'
import { Skeleton } from '@material-ui/lab'
+import { useTranslation } from 'react-i18next'
const useStyles = makeStyles(theme => ({
Container: {
@@ -28,11 +28,17 @@ const useStyles = makeStyles(theme => ({
height: "100%"
}
},
+ Title: {
+ fontSize: "0.875rem"
+ },
Metadata: {
padding: `${theme.spacing(1)}px 0`,
color: theme.palette.type === "dark" ? "inherit" : grey[700],
'& *': {
fontFamily: "'Overpass', sans-serif"
+ },
+ "& .MuiTypography-body1": {
+ fontWeight: "bold"
}
}
}))
@@ -41,6 +47,7 @@ export const LoadingDivMangaEpisode = (key) =>
export default function LatestMangaEpisode(props) {
+ const { t } = useTranslation('common')
const classes = useStyles()
const { manga_name, manga_cover, manga_slug, episode_number, episode_name, created_by, created_time } = props
const [imageError, setImageError] = useState(false)
@@ -60,11 +67,11 @@ export default function LatestMangaEpisode(props) {
img.target.src = manga_cover
setImageError(true)
}}
- alt={`${manga_name} Poster Resmi`} />
+ alt="" />
-
- {episode_number}. Bölüm{episode_name ? `: ${episode_name}` : ""}
+
+ {t('episode.episode_title', { episode_number: episode_number })}{episode_name ? `: ${episode_name}` : ""}
{formattedDate} - {created_by}
diff --git a/src/components/manga-episode/index.js b/src/components/manga-episode/index.js
index 941caee..c2854c3 100644
--- a/src/components/manga-episode/index.js
+++ b/src/components/manga-episode/index.js
@@ -65,11 +65,11 @@ const useStyles = makeStyles(theme => ({
top: 0,
left: 0,
right: 0,
- bottom: 0
+ bottom: 0,
+
},
ImageOverlay: {
- width: "50%",
- cursor: "pointer"
+ flexGrow: 1
}
}))
diff --git a/src/components/motd/index.js b/src/components/motd/index.js
index 85c2eb4..6bc7ec8 100644
--- a/src/components/motd/index.js
+++ b/src/components/motd/index.js
@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react'
-import { useGlobal, useDispatch } from 'reactn'
+import { useContext, useEffect, useState } from 'react'
import { Typography, makeStyles, Button } from '@material-ui/core'
import { Close as CloseIcon } from '@material-ui/icons'
-import axios from '../../config/axios/axios'
import Markdown from '../markdown/markdown'
import { getMotdInfo } from '../../config/api-routes'
+import getDataFromAPI from '../../helpers/getDataFromAPI'
+import { useTranslation } from 'react-i18next'
+import MotdContext from '../../contexts/motd.context'
const useStyles = makeStyles(theme => ({
@@ -26,20 +27,20 @@ const useStyles = makeStyles(theme => ({
}))
export default function MotdContainer(props) {
+ const { t } = useTranslation('components')
const classes = useStyles()
const [data, setData] = useState([])
const [loading, setLoading] = useState(true)
- const [closedMotd] = useGlobal('motd')
- const setMotd = useDispatch('setMotd')
+ const [motd, setMotd] = useContext(MotdContext)
useEffect(() => {
const fetchData = async () => {
- const res = await axios(
- getMotdInfo({
+ const res = await getDataFromAPI({
+ route: getMotdInfo({
content_id: props.content_id ? props.content_id : null,
content_type: props.content_type ? props.content_type : null
- }),
- ).catch(res => res)
+ })
+ }).catch(res => res)
if (res.status === 200) {
setData(res.data)
@@ -58,7 +59,7 @@ export default function MotdContainer(props) {
if (!loading && data.length !== 0) {
data.map(d => {
- if (closedMotd.indexOf(d.id) !== -1) return
+ if (motd.indexOf(d.id) !== -1) return
MotdList.push(
{d.title ?
@@ -68,15 +69,16 @@ export default function MotdContainer(props) {
:
""}
- {d.subtitle ? d.subtitle : "**Bir sorun var? (Bu bir sistem mesajıdır.)**"}
+ {d.subtitle ? d.subtitle : t('motd.warnings.error')}
{d.can_user_dismiss ?
-
)
+ return null
})
}
diff --git a/src/components/toastify/toast.css b/src/components/toastify/toast.css
deleted file mode 100644
index e27c53c..0000000
--- a/src/components/toastify/toast.css
+++ /dev/null
@@ -1,409 +0,0 @@
-.success-progressbar {
- background-color: #00c853!important;
- bottom: 5px;
-}
-
-.error-progressbar {
- background-color: #ff5252!important;
-}
-
-.Toastify__toast-container {
- z-index: 9999;
- -webkit-transform: translate3d(0, 0, 9999px);
- position: fixed;
- width: 320px;
- box-sizing: border-box;
- color: #fff; }
- .Toastify__toast-container--top-left {
- top: 1em;
- left: 1em; }
- .Toastify__toast-container--top-center {
- top: 1em;
- left: 50%;
- margin-left: -160px; }
- .Toastify__toast-container--top-right {
- top: 1em;
- right: 1em; }
- .Toastify__toast-container--bottom-left {
- bottom: 1em;
- left: 1em; }
- .Toastify__toast-container--bottom-center {
- bottom: 1em;
- left: 50%;
- margin-left: -160px; }
- .Toastify__toast-container--bottom-right {
- bottom: 1em;
- right: 1em; }
-
- @media only screen and (max-width: 480px) {
- .Toastify__toast-container {
- width: 100vw;
- padding: 0;
- left: 0;
- margin: 0; }
- .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
- top: 0; }
- .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
- bottom: 0; }
- .Toastify__toast-container--rtl {
- right: 0;
- left: initial; } }
-
- .Toastify__toast {
- position: relative;
- min-height: 64px;
- box-sizing: border-box;
- margin-bottom: 1rem;
- border-radius: 1px;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-pack: justify;
- justify-content: space-between;
- max-height: 800px;
- font-family: sans-serif;
- cursor: pointer;
- direction: ltr; }
- .Toastify__toast--rtl {
- direction: rtl; }
- .Toastify__toast--default {
- color: #aaa; }
- .Toastify__toast--info {
- }
- .Toastify__toast--success {
- }
- .Toastify__toast--warning {
- }
- .Toastify__toast--error {
- }
- .Toastify__toast-body {
- margin: auto 0;
- -ms-flex: 1;
- flex: 1; }
-
- @media only screen and (max-width: 480px) {
- .Toastify__toast {
- margin-bottom: 0; } }
-
- .Toastify__close-button {
- color: #fff;
- font-weight: bold;
- font-size: 14px;
- background: transparent;
- outline: none;
- border: none;
- padding: 0;
- cursor: pointer;
- opacity: 0.7;
- transition: 0.3s ease;
- -ms-flex-item-align: start;
- align-self: flex-start; }
- .Toastify__close-button--default {
- color: #000;
- opacity: 0.3; }
- .Toastify__close-button:hover, .Toastify__close-button:focus {
- opacity: 1; }
-
- @keyframes Toastify__trackProgress {
- 0% {
- transform: scaleX(1); }
- 100% {
- transform: scaleX(0); } }
-
- .Toastify__progress-bar {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 5px;
- z-index: 9999;
- opacity: 0.7;
- background-color: rgba(255, 255, 255, 0.7);
- transform-origin: left; }
- .Toastify__progress-bar--animated {
- animation: Toastify__trackProgress linear 1 forwards; }
- .Toastify__progress-bar--controlled {
- transition: transform .2s; }
- .Toastify__progress-bar--rtl {
- right: 0;
- left: initial;
- transform-origin: right; }
- .Toastify__progress-bar--default {
- }
-
- @keyframes Toastify__bounceInRight {
- from,
- 60%,
- 75%,
- 90%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
- from {
- opacity: 0;
- transform: translate3d(3000px, 0, 0); }
- 60% {
- opacity: 1;
- transform: translate3d(-25px, 0, 0); }
- 75% {
- transform: translate3d(10px, 0, 0); }
- 90% {
- transform: translate3d(-5px, 0, 0); }
- to {
- transform: none; } }
-
- @keyframes Toastify__bounceOutRight {
- 20% {
- opacity: 1;
- transform: translate3d(-20px, 0, 0); }
- to {
- opacity: 0;
- transform: translate3d(2000px, 0, 0); } }
-
- @keyframes Toastify__bounceInLeft {
- from,
- 60%,
- 75%,
- 90%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
- 0% {
- opacity: 0;
- transform: translate3d(-3000px, 0, 0); }
- 60% {
- opacity: 1;
- transform: translate3d(25px, 0, 0); }
- 75% {
- transform: translate3d(-10px, 0, 0); }
- 90% {
- transform: translate3d(5px, 0, 0); }
- to {
- transform: none; } }
-
- @keyframes Toastify__bounceOutLeft {
- 20% {
- opacity: 1;
- transform: translate3d(20px, 0, 0); }
- to {
- opacity: 0;
- transform: translate3d(-2000px, 0, 0); } }
-
- @keyframes Toastify__bounceInUp {
- from,
- 60%,
- 75%,
- 90%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
- from {
- opacity: 0;
- transform: translate3d(0, 3000px, 0); }
- 60% {
- opacity: 1;
- transform: translate3d(0, -20px, 0); }
- 75% {
- transform: translate3d(0, 10px, 0); }
- 90% {
- transform: translate3d(0, -5px, 0); }
- to {
- transform: translate3d(0, 0, 0); } }
-
- @keyframes Toastify__bounceOutUp {
- 20% {
- transform: translate3d(0, -10px, 0); }
- 40%,
- 45% {
- opacity: 1;
- transform: translate3d(0, 20px, 0); }
- to {
- opacity: 0;
- transform: translate3d(0, -2000px, 0); } }
-
- @keyframes Toastify__bounceInDown {
- from,
- 60%,
- 75%,
- 90%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
- 0% {
- opacity: 0;
- transform: translate3d(0, -3000px, 0); }
- 60% {
- opacity: 1;
- transform: translate3d(0, 25px, 0); }
- 75% {
- transform: translate3d(0, -10px, 0); }
- 90% {
- transform: translate3d(0, 5px, 0); }
- to {
- transform: none; } }
-
- @keyframes Toastify__bounceOutDown {
- 20% {
- transform: translate3d(0, 10px, 0); }
- 40%,
- 45% {
- opacity: 1;
- transform: translate3d(0, -20px, 0); }
- to {
- opacity: 0;
- transform: translate3d(0, 2000px, 0); } }
-
- .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
- animation-name: Toastify__bounceInLeft; }
-
- .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
- animation-name: Toastify__bounceInRight; }
-
- .Toastify__bounce-enter--top-center {
- animation-name: Toastify__bounceInDown; }
-
- .Toastify__bounce-enter--bottom-center {
- animation-name: Toastify__bounceInUp; }
-
- .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
- animation-name: Toastify__bounceOutLeft; }
-
- .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
- animation-name: Toastify__bounceOutRight; }
-
- .Toastify__bounce-exit--top-center {
- animation-name: Toastify__bounceOutUp; }
-
- .Toastify__bounce-exit--bottom-center {
- animation-name: Toastify__bounceOutDown; }
-
- @keyframes Toastify__zoomIn {
- from {
- opacity: 0;
- transform: scale3d(0.3, 0.3, 0.3); }
- 50% {
- opacity: 1; } }
-
- @keyframes Toastify__zoomOut {
- from {
- opacity: 1; }
- 50% {
- opacity: 0;
- transform: scale3d(0.3, 0.3, 0.3); }
- to {
- opacity: 0; } }
-
- .Toastify__zoom-enter {
- animation-name: Toastify__zoomIn; }
-
- .Toastify__zoom-exit {
- animation-name: Toastify__zoomOut; }
-
- @keyframes Toastify__flipIn {
- from {
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- animation-timing-function: ease-in;
- opacity: 0; }
- 40% {
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- animation-timing-function: ease-in; }
- 60% {
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
- opacity: 1; }
- 80% {
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
- to {
- transform: perspective(400px); } }
-
- @keyframes Toastify__flipOut {
- from {
- transform: perspective(400px); }
- 30% {
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- opacity: 1; }
- to {
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- opacity: 0; } }
-
- .Toastify__flip-enter {
- animation-name: Toastify__flipIn; }
-
- .Toastify__flip-exit {
- animation-name: Toastify__flipOut; }
-
- @keyframes Toastify__slideInRight {
- from {
- transform: translate3d(110%, 0, 0);
- visibility: visible; }
- to {
- transform: translate3d(0, 0, 0); } }
-
- @keyframes Toastify__slideInLeft {
- from {
- transform: translate3d(-110%, 0, 0);
- visibility: visible; }
- to {
- transform: translate3d(0, 0, 0); } }
-
- @keyframes Toastify__slideInUp {
- from {
- transform: translate3d(0, 110%, 0);
- visibility: visible; }
- to {
- transform: translate3d(0, 0, 0); } }
-
- @keyframes Toastify__slideInDown {
- from {
- transform: translate3d(0, -110%, 0);
- visibility: visible; }
- to {
- transform: translate3d(0, 0, 0); } }
-
- @keyframes Toastify__slideOutRight {
- from {
- transform: translate3d(0, 0, 0); }
- to {
- visibility: hidden;
- transform: translate3d(110%, 0, 0); } }
-
- @keyframes Toastify__slideOutLeft {
- from {
- transform: translate3d(0, 0, 0); }
- to {
- visibility: hidden;
- transform: translate3d(-110%, 0, 0); } }
-
- @keyframes Toastify__slideOutDown {
- from {
- transform: translate3d(0, 0, 0); }
- to {
- visibility: hidden;
- transform: translate3d(0, 500px, 0); } }
-
- @keyframes Toastify__slideOutUp {
- from {
- transform: translate3d(0, 0, 0); }
- to {
- visibility: hidden;
- transform: translate3d(0, -500px, 0); } }
-
- .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
- animation-name: Toastify__slideInLeft; }
-
- .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
- animation-name: Toastify__slideInRight; }
-
- .Toastify__slide-enter--top-center {
- animation-name: Toastify__slideInDown; }
-
- .Toastify__slide-enter--bottom-center {
- animation-name: Toastify__slideInUp; }
-
- .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
- animation-name: Toastify__slideOutLeft; }
-
- .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
- animation-name: Toastify__slideOutRight; }
-
- .Toastify__slide-exit--top-center {
- animation-name: Toastify__slideOutUp; }
-
- .Toastify__slide-exit--bottom-center {
- animation-name: Toastify__slideOutDown; }
-
- /*# sourceMappingURL=ReactToastify.css.map */
\ No newline at end of file
diff --git a/src/components/toastify/toast.js b/src/components/toastify/toast.js
deleted file mode 100644
index 8816a7b..0000000
--- a/src/components/toastify/toast.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-
-import { toast } from 'react-toastify';
-import './toast.css';
-
-import Box from '@material-ui/core/Box'
-import Typography from '@material-ui/core/Typography'
-
-function Message(props) {
- const { message, overridemessage, onClick } = props
-
- return (
-
- {overridemessage ? overridemessage : message}
-
- )
-}
-
-export function payload(container, type, message, autoClose, onClickFunction) {
- return ({
- container,
- type,
- message,
- autoClose,
- onClickFunction
- })
-}
-
-export default function ToastNotification(payload) {
- let { container, message, type, autoClose, onClickFunction } = payload
-
- const config = {
- position: "bottom-center",
- closeButton: false,
- autoClose: autoClose === false ? false : 3000,
- progressClassName: type === "success" ? "success-progressbar" : "error-progressbar"
- }
- toast.dismiss()
-
-
- switch (container) {
- case "login-success":
- return toast.success(({ closeToast }) => , config)
- case "login-error":
- return toast.success(({ closeToast }) => , config)
- case "register-success":
- return toast.success(({ closeToast }) => , config)
- case "register-error":
- return toast.success(({ closeToast }) => , config)
- case "logout-success":
- return toast.success(({ closeToast }) => , config)
- case "notification-success":
- return toast.success(({ closeToast }) => , config)
- default:
- return false
- }
-}
\ No newline at end of file
diff --git a/src/components/user/login.js b/src/components/user/login.js
deleted file mode 100644
index 30d9010..0000000
--- a/src/components/user/login.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch, useGlobal } from 'reactn'
-
-import { Modal, Box, Button, Typography, TextField, makeStyles } from '@material-ui/core'
-
-import ToastNotification from '../toastify/toast'
-
-import axios from '../../config/axios/axios'
-import { loginRoute } from '../../config/api-routes';
-
-const useStyles = makeStyles(theme => ({
- ModalContainer: {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- width: theme.breakpoints.values.sm,
-
- [theme.breakpoints.down("sm")]: {
- width: "100%"
- }
- },
- FormButton: {
- '&:first-child': {
- marginRight: theme.spacing(1)
- }
- }
-}))
-
-const UserModel = {
- name: "",
- password: ""
-}
-
-const errContainerModel = {
- err: "",
- name: "",
- password: ""
-}
-
-export default function LoginModal() {
- const classes = useStyles()
-
- const setUser = useDispatch('loginHandler')
- const [showModal, setShowModal] = useGlobal('showModal')
- const [userInfo, setUserInfo] = useState(UserModel)
- const [errContainer, setErrContainer] = useState(errContainerModel)
-
- const handleChange = type => event => {
- setUserInfo({ ...userInfo, [type]: event.target.value })
- setErrContainer(errContainerModel)
- }
-
- const handleSubmitForm = (event) => {
- event.preventDefault()
-
- const userData = {
- name: userInfo.name,
- password: userInfo.password
- }
-
- axios.post(loginRoute, userData)
- .then(res => {
- setUser(res.data)
- setShowModal("")
- setUserInfo(UserModel)
- setErrContainer(errContainerModel)
- })
- .catch(err => {
- console.log(err.response)
- const errors = err.response ? err.response.data : ""
- const payload = {
- container: "login-error",
- type: "error",
- message: err.response.status === 429 ? err.response.data : ""
- }
- ToastNotification(payload)
- setErrContainer({ ...errContainer, ...errors })
- })
- }
-
- function handleClose() {
- setShowModal("")
- }
-
- return (
- <>
-
-
- Giriş yap
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/user/register.js b/src/components/user/register.js
deleted file mode 100644
index b7e3b87..0000000
--- a/src/components/user/register.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import React, { useState } from 'react'
-import { useGlobal } from 'reactn'
-
-import { Modal, Box, Button, Typography, TextField, makeStyles } from '@material-ui/core'
-
-import ToastNotification from '../toastify/toast'
-
-import axios from '../../config/axios/axios'
-import { registerRoute } from '../../config/api-routes';
-
-const useStyles = makeStyles(theme => ({
- ModalContainer: {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- width: theme.breakpoints.values.sm,
-
- [theme.breakpoints.down("sm")]: {
- width: "100%"
- }
- },
- FormButton: {
- '&:first-child': {
- marginRight: theme.spacing(1)
- }
- }
-}))
-
-const UserModel = {
- username: "",
- password: "",
- password2: "",
- email: ""
-}
-
-const errContainerModel = {
- err: "",
- username: "",
- password: ""
-}
-
-export default function RegisterModal() {
- const classes = useStyles()
-
- const [showModal, setShowModal] = useGlobal('showModal')
- const [userInfo, setUserInfo] = useState(UserModel)
- const [errContainer, setErrContainer] = useState(errContainerModel)
-
- const handleChange = type => event => {
- setUserInfo({ ...userInfo, [type]: event.target.value })
- setErrContainer(errContainerModel)
- }
-
- const handleSubmitForm = (event) => {
- event.preventDefault()
-
- const userData = {
- name: userInfo.username,
- password: userInfo.password,
- password2: userInfo.password2,
- email: userInfo.email
- }
-
- axios.post(registerRoute, userData)
- .then(res => {
- const payload = {
- container: "register-success",
- type: "success",
- message: ""
- }
- ToastNotification(payload)
- setShowModal("")
- setUserInfo(UserModel)
- setErrContainer(errContainerModel)
- })
- .catch(err => {
- const errors = err.response.data ? err.response.data : ""
- const payload = {
- container: "login-error",
- type: "error",
- message: ""
- }
- ToastNotification(payload)
- setErrContainer({ ...errContainer, ...errors })
- })
- }
-
- function handleClose() {
- setShowModal("")
- }
-
- return (
- <>
-
-
- Kayıt ol
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/config/api-routes.js b/src/config/api-routes.js
index 2c1654e..503cfb4 100644
--- a/src/config/api-routes.js
+++ b/src/config/api-routes.js
@@ -3,6 +3,7 @@ const indexURL = "/"
const isAdmin = "/kullanici/adminpage"
const getIndexEpisodes = "/latest-works"
const getIndexFeaturedAnime = "/featured-anime"
+const getIndexFeaturedManga = "/featured-manga"
const getIndexBatchEpisodes = "/latest-batch-episodes"
const getAnimeIndex = (slug) => `/anime/${slug}`
const getMangaIndex = (slug) => `/manga/${slug}`
@@ -23,6 +24,7 @@ const getMotdInfo = (props) => {
}
return `/motd${params ? `?${params}` : ""}`
}
+const getCalendarData = `/takvim/`
const getRegisterDone = `/kullanici/kayit-tamamla`
const getRegisterRefresh = `/kullanici/kayit-tamamla/yenile`
@@ -33,14 +35,19 @@ const registerRoute = "/kullanici/kayit"
const contentCover = (type, slug, size) => `/api/resimler/${type}/${slug}-cover${size ? `?size=${size}` : ""}`
const contentHeader = (type, slug, size) => `/api/resimler/${type}/${slug}-header${size ? `?size=${size}` : ""}`
const contentLogo = (type, slug) => `/api/resimler/${type}/${slug}-logo?type=logo`
+const contentMetadata = (type, slug) => `/api/resimler/metadata/${type}/${slug}`
const mangaPageImage = (slug, episode_number, filename) => `/api/resimler/manga/${slug}/oku/${episode_number}/${filename}`
+const jikanAPI = ({ contentType, contentId, extraPath }) => `${process.env.REACT_APP_JIKAN_INSTANCE_URL || "https://api.jikan.moe/v3/"}${contentType}/${contentId}${extraPath ? `/${extraPath}` : ""}`
+const youtubeEmbedLink = ({ videoId }) => `https://www.youtube.com/embed/${videoId}`
+
export {
indexURL,
isAdmin,
getIndexEpisodes,
getIndexFeaturedAnime,
+ getIndexFeaturedManga,
getIndexBatchEpisodes,
getAnimeIndex,
getMangaIndex,
@@ -52,6 +59,7 @@ export {
getMangaEpisodePageInfo,
getEpisodeInfo,
getMotdInfo,
+ getCalendarData,
getRegisterDone,
getRegisterRefresh,
loginRoute,
@@ -59,5 +67,8 @@ export {
contentCover,
contentHeader,
contentLogo,
- mangaPageImage
+ contentMetadata,
+ mangaPageImage,
+ jikanAPI,
+ youtubeEmbedLink
}
\ No newline at end of file
diff --git a/src/config/axios/axios-prod.js b/src/config/axios/axios-prod.js
index 28a941a..cebe882 100644
--- a/src/config/axios/axios-prod.js
+++ b/src/config/axios/axios-prod.js
@@ -1,7 +1,7 @@
import axios from 'axios'
const instance = axios.create({
- baseURL: '/api/'
+ baseURL: '/api'
})
export default instance
diff --git a/src/config/episode-title-parser.js b/src/config/episode-title-parser.js
index 7cc5975..1f8c59b 100644
--- a/src/config/episode-title-parser.js
+++ b/src/config/episode-title-parser.js
@@ -1,12 +1,25 @@
-module.exports = (animename, episodenumber, specialtype) => {
- if (specialtype && specialtype !== "toplu") {
+import i18next from './i18n'
+
+export default function EpisodeTitleParser(animename, episodenumber, specialtype) {
+ if (specialtype && specialtype === "toplu") {
return {
- title: `${specialtype.toUpperCase()} ${episodenumber}`, // `${specialtype.toUpperCase()} ${episodenumber} - ${animename}`
- slug: `${specialtype}${episodenumber}`
+ title: episodenumber === "0"
+ ?
+ `${i18next.t('common:episode.episode_title_batch')}`
+ :
+ `${i18next.t('common:episode.episode_title_batch_episode_number', { episode_number: episodenumber })}`
+ }
+ }
+ else if (specialtype && specialtype !== "toplu") {
+ return {
+ title: `${specialtype.toUpperCase()} ${episodenumber}`, // `${specialtype.toUpperCase()} ${episodenumber}`
+ slug: `${specialtype}${episodenumber}`,
+ data: `${specialtype}-${episodenumber}`
}
}
else return {
- title: `${episodenumber}. Bölüm`, // `${episodenumber}. Bölüm - ${animename}`
- slug: `bolum${episodenumber}`
+ title: `${i18next.t('common:episode.episode_title', { episode_number: episodenumber })}`, // `${episodenumber}. Bölüm`
+ slug: `bolum${episodenumber}`,
+ data: `bolum-${episodenumber}`
}
}
\ No newline at end of file
diff --git a/src/config/front-routes.js b/src/config/front-routes.js
index 0f076a6..bf18c44 100644
--- a/src/config/front-routes.js
+++ b/src/config/front-routes.js
@@ -1,9 +1,12 @@
const indexPage = `/`
+const registerPage = "/kayit-ol"
+const loginPage = "/giris-yap"
const searchPage = `/ara`
+const calendarPage = `/takvim`
const faqPage = `/sss`
const recPage = `/ekip-alimlari`
-const adminPage = process.env.NODE_ENV === "development" ? `http://192.168.1.100:3001/admin/` : `/admin/`
+const adminPage = process.env.NODE_ENV === "development" ? `${process.env.REACT_APP_DEV_ADMIN_URL || "http://localhost:3001"}/admin/` : `/admin/`
const animePage = (slug) => `/ceviriler/anime/${slug}`
const mangaPage = (slug) => `/ceviriler/manga/${slug}`
@@ -15,4 +18,4 @@ const mangaEpisodePage = (slug, episode_number, page_number) => {
const logoRoute = "/logo.png"
-export { indexPage, searchPage, faqPage, recPage, adminPage, animePage, getAnimeWatchIndex, mangaPage, episodePage, mangaEpisodePage, logoRoute }
\ No newline at end of file
+export { indexPage, registerPage, loginPage, searchPage, calendarPage, faqPage, recPage, adminPage, animePage, getAnimeWatchIndex, mangaPage, episodePage, mangaEpisodePage, logoRoute }
\ No newline at end of file
diff --git a/src/config/i18n.js b/src/config/i18n.js
new file mode 100644
index 0000000..1ed4f81
--- /dev/null
+++ b/src/config/i18n.js
@@ -0,0 +1,41 @@
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+
+function getLoadPath([ns]) {
+ switch (ns) {
+ case "days": {
+ return "/locales/common/{{lng}}/{{ns}}.json";
+ }
+ case "genres": {
+ return "/locales/common/{{lng}}/{{ns}}.json";
+ }
+ case "common": {
+ return "/locales/common/{{lng}}/{{ns}}.json";
+ }
+ default: {
+ return "/locales/front-end/{{lng}}/{{ns}}.json";
+ }
+ }
+}
+
+i18next
+ .use(initReactI18next)
+ .use(Backend)
+ .use(LanguageDetector)
+ .init({
+ backend: {
+ loadPath: (_, ns) => getLoadPath(ns),
+ allowMultiLoading: false,
+ crossDomain: false,
+ },
+ ns: ["common", "components", "days", "genres", "pages"],
+ debug: process.env.NODE_ENV === "development" ? true : false,
+ logging: process.env.NODE_ENV === "development" ? true : false,
+ interpolation: { escapeValue: false },
+ supportedLngs: ["tr", "en"],
+ fallbackLng: process.env.REACT_APP_DEFAULT_LANG,
+ });
+
+export default i18next;
diff --git a/src/config/initNewLanguage.js b/src/config/initNewLanguage.js
new file mode 100644
index 0000000..c2eaacd
--- /dev/null
+++ b/src/config/initNewLanguage.js
@@ -0,0 +1,6 @@
+import i18next from './i18n'
+
+export function initNewLanguage(language) {
+ document.documentElement.dir = i18next.dir(language);
+ document.documentElement.lang = language;
+}
\ No newline at end of file
diff --git a/src/config/localStorage.js b/src/config/localStorage.js
new file mode 100644
index 0000000..4e4a98a
--- /dev/null
+++ b/src/config/localStorage.js
@@ -0,0 +1,36 @@
+//Try reading localStorage before using it
+try {
+ JSON.parse(localStorage.getItem("app-settings"))
+} catch (err) {
+ if (err) localStorage.removeItem("app-settings")
+}
+
+try {
+ const user_data = JSON.parse(localStorage.getItem("user"))
+ if (user_data.exp < Date.now()) {
+ localStorage.removeItem("user")
+ }
+} catch (err) {
+ if (err) localStorage.removeItem("user")
+}
+
+try {
+ JSON.parse(localStorage.getItem("motd"))
+} catch (err) {
+ if (err) localStorage.removeItem("motd")
+}
+
+//Get existing localstorage for later use
+const settings = localStorage.getItem("app-settings") ? JSON.parse(localStorage.getItem("app-settings")) : {}
+const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
+const motd = JSON.parse(localStorage.getItem("motd")) ? JSON.parse(localStorage.getItem("motd")) : []
+
+//Change non-nullable keys with defaults
+settings.theme = settings.theme ? settings.theme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+settings.readingStyle = settings.readingStyle ? settings.readingStyle : "pagebypage"
+settings.version = settings.version ? settings.version : "null"
+settings["release-name"] = settings["release-name"] ? settings["release-name"] : "null"
+
+localStorage.setItem("app-settings", JSON.stringify(settings))
+
+export { settings, user, motd }
\ No newline at end of file
diff --git a/src/config/localStorage/motd.js b/src/config/localStorage/motd.js
new file mode 100644
index 0000000..e2de5b0
--- /dev/null
+++ b/src/config/localStorage/motd.js
@@ -0,0 +1,13 @@
+try {
+ JSON.parse(localStorage.getItem("motd"))
+} catch (err) {
+ if (err) localStorage.removeItem("motd")
+}
+
+const motd = localStorage.getItem("motd") ? JSON.parse(localStorage.getItem("motd")) : []
+
+export function handleStateChange(newState) {
+ localStorage.setItem("motd", JSON.stringify(newState))
+}
+
+export default motd
\ No newline at end of file
diff --git a/src/config/localStorage/settings.js b/src/config/localStorage/settings.js
new file mode 100644
index 0000000..3acf3e4
--- /dev/null
+++ b/src/config/localStorage/settings.js
@@ -0,0 +1,21 @@
+//Try reading localStorage before using it
+try {
+ JSON.parse(localStorage.getItem("app-settings"))
+} catch (err) {
+ if (err) localStorage.removeItem("app-settings")
+}
+
+//Get existing localstorage for later use
+const settings = localStorage.getItem("app-settings") ? JSON.parse(localStorage.getItem("app-settings")) : {}
+
+//Change non-nullable keys with defaults
+settings.theme = settings.theme ? settings.theme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+settings.readingStyle = settings.readingStyle ? settings.readingStyle : "pagebypage"
+settings.version = settings.version ? settings.version : "null"
+settings["release-name"] = settings["release-name"] ? settings["release-name"] : "null"
+
+export function handleStateChange(newState) {
+ localStorage.setItem("app-settings", JSON.stringify(newState))
+}
+
+export default settings
\ No newline at end of file
diff --git a/src/config/localStorage/user.js b/src/config/localStorage/user.js
new file mode 100644
index 0000000..716f277
--- /dev/null
+++ b/src/config/localStorage/user.js
@@ -0,0 +1,16 @@
+try {
+ const user_data = JSON.parse(localStorage.getItem("user"))
+ if (user_data.exp < Date.now()) {
+ localStorage.removeItem("user")
+ }
+} catch (err) {
+ if (err) localStorage.removeItem("user")
+}
+
+const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
+
+export function handleStateChange(newState) {
+ localStorage.setItem("user", JSON.stringify(newState))
+}
+
+export default user
\ No newline at end of file
diff --git a/src/config/polyfills.js b/src/config/polyfills.js
index 9d3ac6f..044dc73 100644
--- a/src/config/polyfills.js
+++ b/src/config/polyfills.js
@@ -1,3 +1,6 @@
+import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'core-js/es/symbol'
-import 'core-js/es/set'
\ No newline at end of file
+import 'core-js/es/set'
+import 'core-js/es/object'
+import 'core-js/es/string'
\ No newline at end of file
diff --git a/src/config/theming/dark/index.js b/src/config/theming/dark/index.js
index 27888f6..4224214 100644
--- a/src/config/theming/dark/index.js
+++ b/src/config/theming/dark/index.js
@@ -12,7 +12,7 @@ const theme = {
main: '#90caf9'
},
secondary: {
- main: 'rgb(255,127,80)'
+ main: '#ff7f50'
},
background: {
default: "#121212",
diff --git a/src/config/theming/images.js b/src/config/theming/images.js
index 03ae66b..48ef728 100644
--- a/src/config/theming/images.js
+++ b/src/config/theming/images.js
@@ -1,6 +1,8 @@
import fourOhFourGif from '../../static/404.gif'
-
import bluray from '../../static/bluraylogo.png'
+import cursorPrevious from '../../static/cursor-previous.png'
+import cursorNext from '../../static/cursor-next.png'
+import LoginRegister from '../../static/LoginRegister.png'
// Değişken görselleri tanımla.
var logo = null
@@ -11,21 +13,21 @@ var CoverPlaceholder = null
// Tam logonun dosyasını dene. Varsa içeri al.
try {
- logo = require('../../static/logo.png');
+ logo = require('../../static/logo.png').default;
} catch (err) {
console.error('Tam logo bulunamadı.')
}
// Tam logonun dosyasını dene. Varsa içeri al.
try {
- HeaderPlaceholder = require('../../static/HeaderPlaceholder.png');
+ HeaderPlaceholder = require('../../static/HeaderPlaceholder.png').default;
} catch (err) {
console.error('Tam logo bulunamadı.')
}
// Tam logonun dosyasını dene. Varsa içeri al.
try {
- CoverPlaceholder = require('../../static/CoverPlaceholder.png');
+ CoverPlaceholder = require('../../static/CoverPlaceholder.png').default;
} catch (err) {
console.error('Tam logo bulunamadı.')
}
@@ -33,8 +35,8 @@ try {
// GIF logosunun dosyalarını dene. Varsa içeri al, birisi yoksa hata ver ve header'da statik logoyu göster. (/components/header/header.js)
if (process.env.REACT_APP_HEADER_LOGO_TYPE === "gif") {
try {
- fullLogo = require('../../static/fullLogo.gif');
- fullLogoDark = require('../../static/fullLogo-dark.gif');
+ fullLogo = require('../../static/fullLogo.gif').default;
+ fullLogoDark = require('../../static/fullLogo-dark.gif').default;
} catch (err) {
console.warn('GIF logo bulunamadı.')
}
@@ -42,11 +44,11 @@ if (process.env.REACT_APP_HEADER_LOGO_TYPE === "gif") {
else {
// Header logosunun dosyalarını dene. Varsa içeri al, birisi yoksa hata ver.
try {
- fullLogo = require('../../static/fullLogo.png');
- fullLogoDark = require('../../static/fullLogo-dark.png');
+ fullLogo = require('../../static/fullLogo.png').default;
+ fullLogoDark = require('../../static/fullLogo-dark.png').default;
} catch (err) {
console.error('Header logosu bulunamadı.')
}
}
-export { logo, fullLogo, fullLogoDark, fourOhFourGif, bluray, HeaderPlaceholder, CoverPlaceholder }
\ No newline at end of file
+export { fourOhFourGif, bluray, cursorPrevious, cursorNext, LoginRegister, logo, fullLogo, fullLogoDark, HeaderPlaceholder, CoverPlaceholder }
\ No newline at end of file
diff --git a/src/config/theming/index.js b/src/config/theming/index.js
index b811bd7..df2fe7b 100644
--- a/src/config/theming/index.js
+++ b/src/config/theming/index.js
@@ -1,4 +1,6 @@
-import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+import { unstable_createMuiStrictModeTheme, responsiveFontSizes } from '@material-ui/core/styles';
+import { enUS, trTR } from '@material-ui/core/locale';
+import i18next from '../i18n'
import merge from 'lodash-es/merge'
import darkTheme from './dark/index'
@@ -6,6 +8,11 @@ import lightTheme from './light/index'
const generalBorderRadius = 2
+const languageMap = {
+ "en": enUS,
+ "tr": trTR
+}
+
const general = {
breakpoints: {
values: {
@@ -24,11 +31,11 @@ const general = {
},
},
typography: {
- fontFamily: `'Roboto', sans-serif`,
+ fontFamily: "'Source Sans Pro', sans-serif",
h1: {
fontWeight: "bold",
- fontSize: "4.8rem",
+ fontSize: "4.75rem",
lineHeight: 1.2
},
h2: {
@@ -38,12 +45,12 @@ const general = {
},
h3: {
fontWeight: "bold",
- fontSize: "2.4rem",
+ fontSize: "2.5rem",
lineHeight: 1.2
},
h4: {
fontWeight: "bold",
- fontSize: "1.7rem"
+ fontSize: "1.75rem"
},
h5: {
fontWeight: "bold",
@@ -51,27 +58,28 @@ const general = {
},
h6: {
fontWeight: "bold",
- fontSize: ".8rem"
+ fontSize: ".75rem"
},
body1: {
+ fontSize: "1rem",
fontFamily: "'Source Sans Pro', sans-serif"
},
body2: {
fontFamily: "'Source Sans Pro', sans-serif",
- fontSize: ".8rem",
+ fontSize: ".75rem",
fontWeight: "bold",
letterSpacing: "0.0075em",
lineHeight: 1.6
},
subtitle1: {
fontFamily: "'Source Sans Pro', sans-serif",
- fontSize: "0.875rem",
+ fontSize: "1rem",
lineHeight: 1.25,
borderRadius: generalBorderRadius,
},
subtitle2: {
fontFamily: "'Source Sans Pro', sans-serif",
- fontSize: "0.675rem",
+ fontSize: "0.75rem",
borderRadius: generalBorderRadius,
}
},
@@ -105,7 +113,7 @@ export default function getTheme(type) {
switch (type) {
case type: {
const theme = merge(general, type === "dark" ? darkTheme : lightTheme)
- return responsiveFontSizes(createMuiTheme(theme))
+ return responsiveFontSizes(unstable_createMuiStrictModeTheme(theme, languageMap[i18next.language]))
}
default:
return false
diff --git a/src/contexts/motd.context.js b/src/contexts/motd.context.js
new file mode 100644
index 0000000..d780b53
--- /dev/null
+++ b/src/contexts/motd.context.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const MotdContext = createContext({});
+
+export default MotdContext
\ No newline at end of file
diff --git a/src/contexts/settings.context.js b/src/contexts/settings.context.js
new file mode 100644
index 0000000..e8722ee
--- /dev/null
+++ b/src/contexts/settings.context.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SettingsContext = createContext({});
+
+export default SettingsContext
\ No newline at end of file
diff --git a/src/contexts/site_status.context.js b/src/contexts/site_status.context.js
new file mode 100644
index 0000000..cd6870d
--- /dev/null
+++ b/src/contexts/site_status.context.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SiteStatusContext = createContext({});
+
+export default SiteStatusContext
\ No newline at end of file
diff --git a/src/contexts/user.context.js b/src/contexts/user.context.js
new file mode 100644
index 0000000..7b85433
--- /dev/null
+++ b/src/contexts/user.context.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const UserContext = createContext({});
+
+export default UserContext
\ No newline at end of file
diff --git a/src/helpers/getDataFromAPI.js b/src/helpers/getDataFromAPI.js
new file mode 100644
index 0000000..077f541
--- /dev/null
+++ b/src/helpers/getDataFromAPI.js
@@ -0,0 +1,20 @@
+import axios from '../config/axios/axios'
+import merge from 'lodash-es/merge'
+
+export default async function getDataFromAPI({ route, config }) {
+ try {
+ const user = JSON.parse(localStorage.getItem('user'))
+ config = merge(config, { headers: { authorization: user.token } })
+ } catch (err) {
+ console.log(err)
+ }
+
+ try {
+ const lng = localStorage.getItem('i18nextLng')
+ config = merge(config, { headers: { "accept-language": lng } })
+ } catch (err) {
+ console.log(err)
+ }
+
+ return await axios.get(route, config)
+}
\ No newline at end of file
diff --git a/src/helpers/postDataToAPI.js b/src/helpers/postDataToAPI.js
new file mode 100644
index 0000000..da6f2a7
--- /dev/null
+++ b/src/helpers/postDataToAPI.js
@@ -0,0 +1,21 @@
+import { merge } from 'lodash-es'
+import axios from '../config/axios/axios'
+
+export default async function postDataToAPI({ route, data, config }) {
+ try {
+ const user = JSON.parse(localStorage.getItem('user'))
+ config = merge(config, { headers: { authorization: user.token } })
+ } catch (err) {
+ console.log(err)
+ }
+
+ try {
+ const lng = localStorage.getItem('i18nextLng')
+ config = merge(config, { headers: { "accept-language": lng } })
+ } catch (err) {
+ console.log(err)
+ }
+
+
+ return await axios.post(route, data, config)
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 0d44ab1..af2f530 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,208 +1,128 @@
-import React, { setGlobal, addReducer, useGlobal } from 'reactn'
-import ReactDOM from 'react-dom'
-import addReactNDevTools from 'reactn-devtools'
-import { indexURL } from './config/api-routes'
-import axios from './config/axios/axios'
-
-import './index.scss'
-import './config/polyfills'
-
-import { ThemeProvider } from '@material-ui/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import getTheme from './config/theming/index'
-
-import App from './App'
-import * as serviceWorker from './serviceWorker'
-import ToastNotification, { payload } from './components/toastify/toast';
-
-//Initiate program & define version
-addReactNDevTools()
-
-//Try reading localStorage before using it
-try {
- JSON.parse(localStorage.getItem("app-settings"))
-} catch (err) {
- if (err) localStorage.removeItem("app-settings")
-}
-
-try {
- const user_data = JSON.parse(localStorage.getItem("user"))
- if (user_data.exp < Date.now()) {
- localStorage.removeItem("user")
- }
-} catch (err) {
- if (err) localStorage.removeItem("user")
-}
-
-//Try reading localStorage before using it
-try {
- JSON.parse(localStorage.getItem("motd"))
-} catch (err) {
- if (err) localStorage.removeItem("motd")
-}
-
-//Get existing localstorage for later use
-const settings = localStorage.getItem("app-settings") ? JSON.parse(localStorage.getItem("app-settings")) : {}
-const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
-const motd = JSON.parse(localStorage.getItem("motd")) ? JSON.parse(localStorage.getItem("motd")) : []
-
-//Set global variables & reducers via reactn package
-setGlobal({
- user: user ? user : {
- username: "",
- exp: null,
- avatar: "",
- token: "",
- success: false
- },
- settings: {
- ...settings,
- readingStyle: settings.readingStyle ? settings.readingStyle : "pagebypage"
- },
- motd: motd,
- showModal: "",
- isAdmin: false,
- theme: settings.theme ? settings.theme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
- mobile: false
-})
-
-addReducer('getOnline', (global, dispatch, token) => {
- const headers = {
- "Authorization": user.token
- }
-
- axios.get(indexURL, { headers })
- .then(res => {
- dispatch.setOnline(res.data)
- dispatch.setAdmin(res.data.admin)
- })
- .catch(_ => dispatch.setOnline(false))
-})
-
-addReducer('checkMobile', (global, dispatch, navigator) => {
- // eslint-disable-next-line
- const check = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.substr(0, 4)) ? true : false
- return ({ mobile: check })
-})
-
-addReducer('setOnline', (global, dispatch, data) => {
- if (!data) return ({ online: false })
- else return ({
- online: true,
- settings: {
- ...global.settings,
- version: data.version,
- "release-name": data["release-name"]
- }
- })
-})
-
-addReducer('loginHandler', (global, dispatch, userData) => {
- const data = {
- username: userData.username,
- exp: userData.exp,
- avatar: userData.avatar,
- token: userData.token,
- success: userData.success
- }
-
- dispatch.checkAdmin(userData.token)
-
- ToastNotification(payload("login-success", "success", ""))
-
- localStorage.setItem("user", JSON.stringify(data));
- return ({ user: { ...userData } })
-})
-
-addReducer('logoutHandler', (global, dispatch) => {
- localStorage.removeItem("user");
-
- ToastNotification(payload("logout-success", "success", ""))
-
- return ({
- user: {
- username: "",
- exp: null,
- avatar: "",
- token: "",
- success: false
- }
- })
-})
-
-addReducer('setAdmin', (global, dispatch, status) => {
- return ({ isAdmin: status })
-})
-
-addReducer('setTheme', (global, dispatch, type) => {
- const settings = JSON.parse(localStorage.getItem('app-settings'))
- settings.theme = type
- localStorage.setItem('app-settings', JSON.stringify(settings))
- return ({ theme: type })
-})
-
-addReducer('setSettings', (global, dispatch, key, value) => {
- const settings = global.settings
- settings[key] = value
- localStorage.setItem('app-settings', JSON.stringify(settings))
- return ({ settings: settings })
-})
-
-addReducer('setMotd', (global, dispatch, motd_id) => {
- const motd = global.motd
- motd.push(motd_id)
- localStorage.setItem('motd', JSON.stringify(motd))
- console.log(motd)
- return ({ motd: motd })
-})
-
-addReducer('checkAdmin', (global, dispatch, token) => {
- const headers = {
- "Authorization": token
- }
-
- axios.get(indexURL, { headers })
- .then(res => dispatch.setAdmin(res.data.admin))
- .catch(_ => dispatch.setAdmin(false))
-})
-
-if (!settings.theme) {
- settings.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-}
-
-localStorage.setItem("app-settings", JSON.stringify(settings))
+// Importing polyfills at the top
+import "./config/polyfills";
+import "./config/i18n";
+import "./index.scss";
+
+import { StrictMode, useState, Suspense, useEffect } from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
+import reportWebVitals from "./reportWebVitals";
+import { SnackbarProvider, useSnackbar } from "notistack";
+
+import { ThemeProvider } from "@material-ui/styles";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import getTheme from "./config/theming/index";
+
+import { initNewLanguage } from "./config/initNewLanguage";
+
+import { indexURL } from "./config/api-routes";
+import getDataFromAPI from "./helpers/getDataFromAPI";
+
+import defaultSettings, {
+ handleStateChange as handleSettingsStateChange,
+} from "./config/localStorage/settings";
+import defaultUser, {
+ handleStateChange as handleUserStateChange,
+} from "./config/localStorage/user";
+import defaultMotd, {
+ handleStateChange as handleMotdStateChange,
+} from "./config/localStorage/motd";
+import SettingsContext from "./contexts/settings.context";
+import UserContext from "./contexts/user.context";
+import SiteStatusContext from "./contexts/site_status.context";
+import MotdContext from "./contexts/motd.context";
function Mount() {
- const [theme] = useGlobal('theme')
- const themeObject = getTheme(theme)
-
- window.theme = themeObject
+ const [motd, setMotd] = useState(defaultMotd);
+ const [settings, setSettings] = useState(defaultSettings);
+ const [user, setUser] = useState(defaultUser);
+ const [siteStatus, setSiteStatus] = useState({
+ loading: true,
+ status: false,
+ });
+
+ useEffect(() => {
+ handleSettingsStateChange(settings);
+ }, [settings]);
+
+ useEffect(() => {
+ handleUserStateChange(user);
+ }, [user]);
+
+ useEffect(() => {
+ handleMotdStateChange(motd);
+ }, [motd]);
+
+ useEffect(() => {
+ getDataFromAPI({ route: indexURL })
+ .then((res) => {
+ if (res.status === 200) {
+ setSiteStatus({ loading: false, status: true });
+ setSettings((state) => ({
+ ...state,
+ version: res.data.version,
+ "release-name": res.data["release-name"],
+ }));
+ setUser((state) => ({ ...state, admin: res.data.admin }));
+ }
+ })
+ .catch((_) => {
+ setSiteStatus({ loading: false, status: false });
+ });
+ }, [user.token]);
+
+ useEffect(() => {
+ initNewLanguage(localStorage.getItem("i18nextLng") || "en");
+ }, []);
+
+ const themeObject = getTheme(settings.theme);
+ window.theme = themeObject;
return (
-
-
-
-
- )
+
+
+
+
+
+
+
+
+ }>
+
+
+
+
+
+
+
+
+
+ );
}
-ReactDOM.render(, document.getElementById('app-mount'))
-
-serviceWorker.register({
- onUpdate: function onUpdateHandler(registration) {
- const waitingServiceWorker = registration.waiting
-
- const payload = {
- container: "notification-success",
- type: "success",
- autoClose: false,
- onClickFunction: () => {
- waitingServiceWorker.postMessage({ type: "SKIP_WAITING" })
- window.location.reload()
- },
- message: "Uygulamanın yeni bir sürümü var. Güncellemek için bu bildirime basın."
- }
-
- ToastNotification(payload)
- }
-})
+ReactDOM.render(, document.getElementById("app-mount"));
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals(console.log);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+if (process.env.REACT_APP_USE_SERVICE_WORKER === "true") {
+ serviceWorkerRegistration.register({
+ onUpdate: function onUpdateHandler(registration) {
+ const waitingServiceWorker = registration.waiting;
+ waitingServiceWorker.postMessage({ type: "SKIP_WAITING" });
+ window.location.reload();
+ },
+ });
+}
diff --git a/src/index.scss b/src/index.scss
index 43813f6..2efad0a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,9 +1,15 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;700;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;700;900&display=swap");
-h1,h2,h3,h4,h5,h6,li {
- margin-block-start: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li {
+ margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
@@ -11,60 +17,70 @@ h1,h2,h3,h4,h5,h6,li {
-webkit-margin-after: 0em;
}
-p{
- margin-block-start: 0;
+p {
+ margin-block-start: 0;
margin-block-end: 0;
}
html {
- position: relative;
+ position: relative;
min-height: 100%;
}
body {
- width: 100%;
- height: 100%;
- overscroll-behavior-y: none;
+ width: 100%;
+ height: 100%;
+ overscroll-behavior-y: none;
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
- margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
#app-mount {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
}
ul {
- display: block;
- list-style-type: none;
- margin-block-start: 0;
- margin-block-end: 0;
- margin-inline-start: 0px;
- margin-inline-end: 0px;
- padding-inline-start: 0;
- padding: 0;
- -webkit-margin-before: 0;
- -webkit-margin-after: 0;
+ display: block;
+ list-style-type: none;
+ margin-block-start: 0;
+ margin-block-end: 0;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ padding-inline-start: 0;
+ padding: 0;
+ -webkit-margin-before: 0;
+ -webkit-margin-after: 0;
}
a {
- text-decoration: none;
- color: inherit;
+ text-decoration: none;
+ color: inherit;
}
iframe {
- border-width: 0px;
- border-style: inset;
- border-color: initial;
- border-image: initial;
+ border-width: 0px;
+ border-style: inset;
+ border-color: initial;
+ border-image: initial;
+}
+
+.unselectable {
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Old versions of Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently
+ supported by Chrome, Edge, Opera and Firefox */
}
diff --git a/src/pages/ara/index.js b/src/pages/ara/index.js
index 15cc57e..670ef88 100644
--- a/src/pages/ara/index.js
+++ b/src/pages/ara/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
import ReactGA from 'react-ga';
import Metatags from '../../components/helmet/index'
@@ -6,7 +6,7 @@ import TextField from '@material-ui/core/TextField'
import InfiniteScroll from 'react-infinite-scroll-component'
import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import axios from '../../config/axios/axios'
+import getDataFromAPI from '../../helpers/getDataFromAPI'
import { getGenresList, getFullSearchList } from '../../config/api-routes'
import filter from 'lodash-es/filter'
@@ -23,6 +23,7 @@ import { Typography, Box, Grid, Button } from '@material-ui/core'
import InfoIcon from '@material-ui/icons/Info'
import WarningIcon from '@material-ui/icons/Warning'
import CircularProgress from '../../components/progress/index'
+import { useTranslation } from 'react-i18next';
const searchTextAPI = (data, text) => {
if (text.length < 3) {
@@ -55,6 +56,7 @@ const searchGenresAPIDebounced = AwesomeDebouncePromise(searchGenresAPI, 500);
export default function SearchPage(props) {
const classes = useStyles()
+ const { t } = useTranslation(['pages', 'components', 'common', 'genres']);
const [offset, setOffset] = useState(1)
const [data, setData] = useState([])
@@ -75,8 +77,8 @@ export default function SearchPage(props) {
useEffect(() => {
const fetchData = async () => {
- const searchList = await axios.get(getFullSearchList(type))
- const genres = await axios.get(getGenresList)
+ const searchList = await getDataFromAPI({ route: getFullSearchList(type) })
+ const genres = await getDataFromAPI({ route: getGenresList })
const initialData = slice(searchList.data, 0, 24)
if (searchList.data.length === 0 || searchList.status !== 200) {
@@ -127,7 +129,7 @@ export default function SearchPage(props) {
})
const fetchData = async () => {
- const searchList = await axios.get(getFullSearchList(newType))
+ const searchList = await getDataFromAPI({ route: getFullSearchList(newType) })
const initialData = slice(searchList.data, 0, 24)
if (searchList.data.length === 0 || searchList.status !== 200) {
@@ -203,13 +205,13 @@ export default function SearchPage(props) {
if (!loadingData) {
if (data.length !== 0 && type === "anime") {
mappedData = data.map(d =>
-
+
)
}
else if (data.length !== 0 && type === "manga") {
mappedData = data.map(d =>
-
+
)
}
@@ -248,12 +250,13 @@ export default function SearchPage(props) {
)
}
- const title = `${process.env.REACT_APP_SITENAME} Anime & Manga Ara Türkçe İzle`
- const desc = `${process.env.REACT_APP_SITENAME} Anime ve Manga arama motoru. Türlere göre anime ve manga arayabilir, konularına göz atabilirsiniz.`
-
return (
<>
-
+
@@ -264,7 +267,7 @@ export default function SearchPage(props) {
color={type === "anime" ? "primary" : "default"}
onClick={() => handleTypeChange("anime")}
disabled={isSearching}>
- Anime
+ {t('common:ns.anime')}
diff --git a/src/pages/episode/index.js b/src/pages/episode/index.js
index a242aaa..708eaa1 100644
--- a/src/pages/episode/index.js
+++ b/src/pages/episode/index.js
@@ -1,21 +1,17 @@
-import React, { useState, useEffect } from 'react'
-import { useGlobal } from 'reactn'
+import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
-import axios from '../../config/axios/axios'
-import Metatags from '../../components/helmet/index'
import ReactGA from 'react-ga'
+import { useTranslation } from 'react-i18next';
import find from 'lodash-es/find'
import Loading from '../../components/progress/index'
+import Metatags from '../../components/helmet/index'
import { getEpisodePageInfo, getEpisodeInfo, contentCover } from '../../config/api-routes'
import { episodePage, animePage } from '../../config/front-routes'
-import {
- useStyles,
- EpisodeListParser,
- defaultBoxProps,
-} from '../../components/episode/components'
+import { useStyles, EpisodeButton, defaultBoxProps } from '../../components/episode/components'
+import EpisodeTitleParser from '../../config/episode-title-parser'
import ContentError from '../../components/warningerrorbox/error'
import ContentWarning from '../../components/warningerrorbox/warning'
import DisqusBox from '../../components/disqus/disqus'
@@ -27,11 +23,12 @@ import { format } from 'date-fns'
import Dotdotdot from 'react-dotdotdot'
import MotdContainer from '../../components/motd'
import { CoverPlaceholder } from '../../config/theming/images'
+import getDataFromAPI from '../../helpers/getDataFromAPI';
+import postDataToAPI from '../../helpers/postDataToAPI';
export default function EpisodePage(props) {
const classes = useStyles()
- let episodeDataMapped = "", watchLinksMapped = ""
- const [mobile] = useGlobal("mobile")
+ const { t } = useTranslation('pages')
const [animeData, setAnimeData] = useState({
name: "",
@@ -59,7 +56,7 @@ export default function EpisodePage(props) {
const fetchData = async () => {
const { slug, episodeInfo } = props.match.params
- const pageInfo = await axios.get(getEpisodePageInfo(slug))
+ const pageInfo = await getDataFromAPI({ route: getEpisodePageInfo(slug) })
if (pageInfo.data.length === 0 || pageInfo.status !== 200) {
return setLoading(false)
@@ -80,7 +77,7 @@ export default function EpisodePage(props) {
let special_type = episodeInfo.replace(episode_number, '')
if (special_type === "bolum") special_type = ""
- let { slug, title, data } = EpisodeListParser(episode_number, special_type)
+ let { slug, title, data } = EpisodeTitleParser("", episode_number, special_type)
const episode = find(pageInfo.data, { special_type, episode_number })
if (episode) {
const { credits, created_time, id } = episode
@@ -131,7 +128,8 @@ export default function EpisodePage(props) {
episode_number: null,
special_type: "",
slug: "",
- title: ""
+ title: "",
+ created_time: null
})
setActiveLink("")
setWatchLinks([])
@@ -146,7 +144,7 @@ export default function EpisodePage(props) {
}
const fetchData = async () => {
- const episodeInfo = await axios.post(getEpisodeInfo, data)
+ const episodeInfo = await postDataToAPI({ route: getEpisodeInfo, data: data })
if (episodeInfo.data.length === 0 || episodeInfo.status !== 200) {
return setEpisodeLoading(false)
@@ -178,47 +176,20 @@ export default function EpisodePage(props) {
}
if (!loading && episodeData.length !== 0) {
- const data_length = episodeData.length
-
- episodeDataMapped = episodeData.map((e, i) => {
- let { slug, title, data } = EpisodeListParser(e.episode_number, e.special_type)
-
- return (
-
- )
- })
-
- if (watchLinks.length !== 0) {
- watchLinksMapped = watchLinks.map((w, i) => (
-
- ))
- }
-
- const title = `${animeData.name} ${activeEpisode.title} Türkçe İzle - ${process.env.REACT_APP_SITENAME} Anime`
- const desc = `${animeData.name} ${activeEpisode.title} Türkçe İzle ve İndir - ${process.env.REACT_APP_SITENAME} Anime İzle`
-
return (
<>
-
+
@@ -230,7 +201,6 @@ export default function EpisodePage(props) {
watchLinks.length !== 0
?
<>
- {/*TODO: Video ekranıyla link kutusunu bir dive al, ona background shadow ver.*/}
{iframeLoading
?
@@ -260,17 +230,17 @@ export default function EpisodePage(props) {
- Link bulunamadı.
+ {t('episode.warnings.links_not_found')}
:
- Lütfen bölüm seçiniz.
+ {t('episode.warnings.please_select_episode')}
}
- {watchLinksMapped.length !== 0
+ {watchLinks.length !== 0
?
<>
- {watchLinksMapped}
+ {watchLinks.map((w, i) => (
+
+ ))}
@@ -289,9 +271,13 @@ export default function EpisodePage(props) {
- {episodeDataMapped.length !== 0
+ {episodeData.length !== 0
?
- episodeDataMapped
+ episodeData.map((e, i) => )
:
""
}
@@ -317,21 +303,21 @@ export default function EpisodePage(props) {
-
+
{animeData.name}
{activeEpisode.credits ?
- Emektar:
- {activeEpisode.credits}
+ {t('episode.credits')}:
+ {activeEpisode.credits}
:
""
}
{activeEpisode.created_time ?
- Eklenme Tarihi:
- {format(new Date(activeEpisode.created_time), "dd.MM.yyyy")}
+ {t('episode.added_at')}:
+ {format(new Date(activeEpisode.created_time), "dd.MM.yyyy")}
:
""
@@ -345,7 +331,7 @@ export default function EpisodePage(props) {
@@ -368,7 +354,7 @@ export default function EpisodePage(props) {
return (
<>
- Bölüm bulunamadı.
+ {t('episode.warnings.no_episode_data')}
)
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 34a5c82..288cc5f 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -1,31 +1,29 @@
-import React, { useEffect, useState } from 'react'
-import { useGlobal } from 'reactn'
-import useTheme from '@material-ui/styles/useTheme'
+import { useEffect, useState } from 'react'
import ReactGA from 'react-ga';
-import { Helmet } from 'react-helmet-async'
+import { useTranslation } from 'react-i18next';
-import axios from '../../config/axios/axios'
-import { getIndexEpisodes, getIndexFeaturedAnime, getIndexBatchEpisodes } from '../../config/api-routes'
+import { getIndexEpisodes, getIndexFeaturedAnime, getIndexFeaturedManga, getIndexBatchEpisodes } from '../../config/api-routes'
import { Grid, Typography } from '@material-ui/core'
-import { useStyles } from '../../components/index/index'
+import { IndexDivider, useStyles } from '../../components/index/index'
import LatestAniManga, { LoadingDivAniManga } from '../../components/index/latest/latestanimanga'
import LatestEpisode, { LoadingDivEpisode } from '../../components/index/latest/latestepisode';
import FeaturedContainer from '../../components/index/featured/FeaturedContainer'
import LatestBatchLinks from '../../components/index/latest/latestbatchlinks';
-import { logoRoute } from '../../config/front-routes';
import LatestMangaEpisode, { LoadingDivMangaEpisode } from '../../components/index/latest/latestmangaepisode';
import MotdContainer from '../../components/motd';
+import Metatags from '../../components/helmet/index'
+import getDataFromAPI from '../../helpers/getDataFromAPI';
+
export default function IndexPage(props) {
- const theme = useTheme()
const classes = useStyles()
+ const { t } = useTranslation('pages');
let latestAnimesWindow = []
let latestMangasWindow = []
let latestEpisodesWindow = []
let latestMangaEpisodesWindow = []
- let featuredAnimeWindow = []
let batchEpisodesWindow = []
const [latestAnimes, setLatestAnimes] = useState([])
@@ -33,16 +31,17 @@ export default function IndexPage(props) {
const [latestEpisodes, setLatestEpisodes] = useState([])
const [latestMangaEpisodes, setLatestMangaEpisodes] = useState([])
const [featuredAnimes, setFeaturedAnimes] = useState([])
+ const [featuredMangas, setFeaturedMangas] = useState([])
const [batchEpisodes, setBatchEpisodes] = useState([])
const [latestLoading, setLatestLoading] = useState(true)
const [featuredLoading, setFeaturedLoading] = useState(true)
+ const [featuredMangaLoading, setFeaturedMangaLoading] = useState(true)
const [batchLoading, setBatchLoading] = useState(true)
- const [mobile] = useGlobal('mobile')
//Handle data fetch
useEffect(() => {
- axios.get(getIndexEpisodes)
+ getDataFromAPI({ route: getIndexEpisodes })
.then(res => {
setLatestAnimes(res.data.animes)
setLatestMangas(res.data.mangas)
@@ -51,68 +50,67 @@ export default function IndexPage(props) {
setLatestLoading(false)
})
.catch(_ => {
+ setLatestLoading(false)
console.log("Son konular yüklenirken bir sorunla karşılaştık.")
})
- axios.get(getIndexFeaturedAnime)
+ getDataFromAPI({ route: getIndexFeaturedAnime })
.then(res => {
setFeaturedAnimes(res.data)
setFeaturedLoading(false)
})
.catch(_ => {
+ setFeaturedLoading(false)
console.log("Öne çıkarılmış animeleri yüklerken bir sorunla karşılaştık.")
})
- axios.get(getIndexBatchEpisodes)
+ getDataFromAPI({ route: getIndexFeaturedManga })
+ .then(res => {
+ setFeaturedMangas(res.data)
+ setFeaturedMangaLoading(false)
+ })
+ .catch(_ => {
+ setFeaturedMangaLoading(false)
+ console.log("Öne çıkarılmış mangaları yüklerken bir sorunla karşılaştık.")
+ })
+ getDataFromAPI({ route: getIndexBatchEpisodes })
.then(res => {
setBatchEpisodes(res.data)
setBatchLoading(false)
})
.catch(_ => {
+ setBatchLoading(false)
console.log("Toplu linkleri yüklerken bir sorunla karşılaştık.")
})
ReactGA.pageview(window.location.pathname)
- }, [mobile])
+ }, [])
if (latestLoading) {
- if (!mobile) {
- for (let i = 0; i < 24; i++) {
- latestAnimesWindow.push(LoadingDivAniManga(i + "loadingani"))
- latestMangasWindow.push(LoadingDivAniManga(i + "loadingman"))
- }
- for (let k = 0; k < 13; k++) {
- latestEpisodesWindow.push(LoadingDivEpisode(k + "loadingepi"))
- latestMangaEpisodesWindow.push(LoadingDivMangaEpisode(k + "loadingepi"))
- }
+ for (let i = 0; i < 24; i++) {
+ latestAnimesWindow.push(LoadingDivAniManga(i + "loadingani"))
+ latestMangasWindow.push(LoadingDivAniManga(i + "loadingman"))
}
- else {
- for (let i = 0; i < 12; i++) {
- latestAnimesWindow.push(LoadingDivAniManga(i + "loadingani"))
- latestMangasWindow.push(LoadingDivAniManga(i + "loadingman"))
- }
- for (let i = 0; i < 13; i++) {
- latestEpisodesWindow.push(LoadingDivEpisode(i + "loadingepi"))
- latestMangaEpisodesWindow.push(LoadingDivMangaEpisode(i + "loadingepi"))
- }
+ for (let k = 0; k < 18; k++) {
+ latestEpisodesWindow.push(LoadingDivEpisode(k + "loadingepi"))
+ latestMangaEpisodesWindow.push(LoadingDivMangaEpisode(k + "loadingepi"))
}
}
//Hande latest loading
if (!latestLoading) {
latestAnimesWindow = latestAnimes.map(anime => (
-
+
))
latestMangasWindow = latestMangas.map(manga => (
-
+
))
latestEpisodesWindow = latestEpisodes.map(episode => (
-
+
))
latestMangaEpisodesWindow = latestMangaEpisodes.map(episode => (
-
+
))
}
//Öne çıkarılmışlar yükleniyor...
- featuredAnimeWindow =
//Handle latest batch episodes
batchEpisodesWindow = batchEpisodes.map(episode => )
- const title = `${process.env.REACT_APP_SITENAME} ${process.env.REACT_APP_INDEX_TITLE_TEXT}`
return (
- <>
-
- {title}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
- {featuredAnimeWindow}
+
- {batchEpisodesWindow.length ?
-
-
- Toplu Linkler
-
-
- Sisteme eklenen toplu linkleri sırasıyla burada bulabilirsiniz
-
-
- {batchEpisodesWindow}
-
-
- : ""}
- {latestAnimesWindow.length ?
-
-
- Animeler
-
-
- {latestAnimesWindow}
-
-
- : ""}
- {latestEpisodesWindow.length ?
-
-
-
-
- En Yeni
-
-
- Bölümler
-
-
- {latestEpisodesWindow}
-
- : ""}
- {latestMangasWindow.length ?
-
-
- Mangalar
+ {
+ batchEpisodesWindow.length ?
+
+
+ {t('index.batch_links.default')}
-
- {latestMangasWindow}
-
-
- : ""}
- {latestMangaEpisodesWindow.length ?
-
-
-
-
- En Yeni
+ {t('index.batch_links.description') ?
+
+ {t('index.batch_links.description')}
+ : ""}
+
+ {batchEpisodesWindow}
+
+
+ : ""
+ }
+
+ {
+ latestEpisodesWindow.length || latestAnimesWindow.length ?
+
+ {t('index.newest_anime.default')}
+
+ : ""
+ }
+ {
+ latestEpisodesWindow.length ?
+
+
+ {t('index.newest_anime_episodes.default')}
-
- Bölümler
+
+ {latestEpisodesWindow}
+
+
+ : ""
+ }
+
+ {
+ latestAnimesWindow.length ?
+
+ {t('index.newest_anime.description') ?
+
+ {t('index.newest_anime.description')}
+ : ""}
+
+ {latestAnimesWindow}
+
+
+ : ""
+ }
+
+
+
+ {
+ latestMangaEpisodesWindow.length || latestMangasWindow.length ?
+
+ {t('index.newest_manga.default')}
+
+ : ""
+ }
+ {
+ latestMangaEpisodesWindow.length ?
+
+
+ {t('index.newest_manga_episodes.default')}
+
+ {latestMangaEpisodesWindow}
- {latestMangaEpisodesWindow}
-
-
- : ""}
-
+
+ : ""
+ }
+
+ {
+ latestMangasWindow.length ?
+
+ {t('index.newest_manga.description') ?
+
+ {t('index.newest_manga.description')}
+ : ""}
+
+ {latestMangasWindow}
+
+
+ : ""
+ }
+
@@ -192,7 +188,7 @@ export default function MangaEpisodePage(props) {
className={classes.ToManga}
variant="outlined"
>
- Mangaya git
+ {t('common:buttons.goto_manga')}
@@ -207,20 +203,22 @@ export default function MangaEpisodePage(props) {
{
handleCenteringPage()
}} />
-
-
: ""}
+ {activePageNumber !== activeEpisodeData.pages.length && activeEpisodeData.episode_number ?
+ title={t('manga_episode.next_page')} /> : ""}
@@ -263,7 +261,7 @@ export default function MangaEpisodePage(props) {
return (
<>
- Bölüm bulunamadı.
+ {t('manga_episode.warnings.no_episode_data')}
)
diff --git a/src/pages/sss/index.js b/src/pages/sss/index.js
index e2d2734..87b95c6 100644
--- a/src/pages/sss/index.js
+++ b/src/pages/sss/index.js
@@ -1,4 +1,3 @@
-import React from 'react'
import ReactGA from 'react-ga';
import Grid from '@material-ui/core/Grid'
@@ -8,8 +7,10 @@ import Typography from '@material-ui/core/Typography'
import SSS_TEXT from '../../config/sss_page_text'
import Markdown from '../../components/markdown/markdown'
import { Redirect } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
export default function SSSPage() {
+ const { t } = useTranslation('pages')
document.title = `SSS - ${process.env.REACT_APP_SITENAME}`
ReactGA.pageview(window.location.pathname)
@@ -20,7 +21,7 @@ export default function SSSPage() {
- Sıkça Sorulan Sorular
+ {t('faq.header_text')}
diff --git a/src/pages/user/logIn.js b/src/pages/user/logIn.js
new file mode 100644
index 0000000..e511740
--- /dev/null
+++ b/src/pages/user/logIn.js
@@ -0,0 +1,166 @@
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import { Link, Redirect } from "react-router-dom";
+import { indexPage, registerPage } from "../../config/front-routes";
+import postDataToAPI from "../../helpers/postDataToAPI";
+import { useSnackbar } from "notistack";
+
+import { VscLock } from "react-icons/vsc";
+import { MdArrowBack } from "react-icons/md";
+
+import useStyles from "./logIn.styles";
+import { useContext, useState } from "react";
+import { loginRoute } from "../../config/api-routes";
+import UserContext from "../../contexts/user.context";
+import { Typography } from "@material-ui/core";
+import Loading from "../../components/progress";
+import { useTranslation } from "react-i18next";
+
+export default function LoginPage() {
+ const { t } = useTranslation("pages");
+ const classes = useStyles();
+ const { enqueueSnackbar } = useSnackbar();
+ const [user, setUser] = useContext(UserContext);
+
+ const [userData, setUserData] = useState({ username: "", password: "" });
+ const [loginLoading, setLoginLoading] = useState(false);
+ const [loginError, setLoginError] = useState({});
+
+ function _handleInputChange(event) {
+ setUserData((state) => ({
+ ...state,
+ [event.target.id]: event.target.value,
+ }));
+ }
+
+ function _handleSubmit(event) {
+ event.preventDefault();
+ setLoginLoading(true);
+ setLoginError({});
+ postDataToAPI({ route: loginRoute, data: userData })
+ .then((res) => {
+ if (res.status === 200) {
+ setUser({
+ username: res.data.username,
+ token: res.data.token,
+ exp: res.data.exp,
+ admin: res.data.admin,
+ });
+ enqueueSnackbar("Başarıyla giriş yapıldı", {
+ variant: "success",
+ autoHideDuration: 3500,
+ });
+ setLoginLoading(false);
+ }
+ })
+ .catch((err) => {
+ setLoginError(err.response.data);
+ setLoginLoading(false);
+ });
+ }
+
+ return (
+
+ {user.token ? : ""}
+
+
+
+
+
+
+
+
+
+
+
+
+ {process.env.REACT_APP_SITE_NAME}{" "}
+ {t("user.login.title")}
+
+
+ {loginError && loginError.message ? (
+
+
+ {loginError.message}
+
+
+ ) : (
+ ""
+ )}
+
+
+ {process.env.REACT_APP_SITE_NAME}
+
+
+
+
+
+
+
+
+
+
+
+
+ {process.env.REACT_APP_SITE_NAME}{" "}
+ {t("user.register.title")}
+
+
+
+
+ {process.env.REACT_APP_SITE_NAME}
+
+
+