Skip to content

Commit

Permalink
final commit
Browse files Browse the repository at this point in the history
  • Loading branch information
elaheys committed Jul 3, 2023
1 parent 7e9e953 commit c8740d0
Show file tree
Hide file tree
Showing 84 changed files with 17,789 additions and 124 deletions.
1,691 changes: 1,662 additions & 29 deletions package-lock.json

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,22 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.7.15",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"graphql": "^16.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loader-spinner": "^5.3.4",
"react-router-dom": "^6.11.2",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
"sanitize-html": "^2.10.0",
"stylis": "^4.2.0",
"stylis-plugin-rtl": "^2.0.2",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
4 changes: 2 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
Expand All @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Blog</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

37 changes: 19 additions & 18 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import logo from './logo.svg';
import './App.css';
import { Route, Routes } from 'react-router-dom';

//components
import HomePage from './components/Home/HomePage';
import Layout from './components/layout';
import BlogPage from './components/blog/BlogPage';
import AuthorPage from './components/authors/AuthorPage';
import ScrollToTop from './components/shared/ScrollToTop';
import JustBlogs from './components/blog/JustBlogs';

function App() {

return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Layout>
<ScrollToTop/>
<Routes>
<Route path='/' element={<HomePage/>}/>
<Route path='/blogs' element={<JustBlogs/>}/>
<Route path='/blogs/:slug' element={<BlogPage/>}/>
<Route path='/authors/:slug' element={<AuthorPage/>}/>
</Routes>
</Layout>
);
}

Expand Down
8 changes: 0 additions & 8 deletions src/App.test.js

This file was deleted.

32 changes: 32 additions & 0 deletions src/components/Home/HomePage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import { Link } from 'react-router-dom';

//mui
import { Container, Grid, Typography } from '@mui/material';

//components
import Authors from '../authors/Authors';
import Blogs from '../blog/Blogs';

const HomePage = () => {
return (
<div>
<Container maxWidth='lg'>
<Grid container spacing={2} padding={3}>
<Grid item xs={12} md={3} mt={4}>
<Typography component='h3' variant='h5' mb={3} fontWeight={700}>
نویسنده ها</Typography>
<Authors/>
</Grid>
<Grid item xs={12} md={9} mt={4}>
<Typography component='h3' variant='h5' mb={3} fontWeight={700}>
<Link to='/blogs' style={{textDecoration:'none' , color:'black',}}>مقالات</Link></Typography>
<Blogs/>
</Grid>
</Grid>
</Container>
</div>
);
};

export default HomePage;
65 changes: 65 additions & 0 deletions src/components/authors/AuthorPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { useQuery } from '@apollo/client';
import React from 'react';
import { useParams } from 'react-router-dom';
import sanitizeHtml from 'sanitize-html';

//query
import { GET_AUTHOR_INFO } from '../../graphQL/Queries';

//MUI
import { Avatar, Container, Grid, Typography } from '@mui/material';

//components
import CardEL from '../shared/CardEL';
import Loader from '../shared/Loader';

const AuthorPage = () => {

const {slug} = useParams()

const { loading,data,error} = useQuery(GET_AUTHOR_INFO, {
variables: {slug },
});

if(loading) return <Loader/>

if(error) return <h2>Somthing Went Wrong!</h2>

const {author:{name,posts,description,field,avatar}} = data;

return (
<Container maxWidth='lg'>
<Grid container mt={10}>
<Grid item xs={12} display='flex' flexDirection='column' alignItems='center'>
<Avatar src={avatar.url} sx={{width:250 , height:250}}/>
<Typography component='h3' variant='h5' fontWeight={700} mt={4}>{name}</Typography>
<Typography component='p' variant='h5' mt={2} color='text.secondary'>{field}</Typography>
</Grid>
<Grid item xs={12} mt={5}>
<div dangerouslySetInnerHTML={{
__html: sanitizeHtml(description.html)}}>

</div>
</Grid>
<Grid item xs={12} mt={6}>
<Typography component='h3' variant='h5' fontWeight={700}>
مقالات {name}
</Typography>
<Grid container spacing={2} mt={2}>
{posts.map(post => (
<Grid item xs={12} sm={6} md={4} key={post.id}>
<CardEL
title={post.title}
slug={post.slug}
coverPhoto={post.coverPhoto}
/>
</Grid>
))}
</Grid>
</Grid>
</Grid>
</Container>
);
};

export default AuthorPage;
54 changes: 54 additions & 0 deletions src/components/authors/Authors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { useQuery } from '@apollo/client';
import React from 'react';
import { Link } from 'react-router-dom';

//query
import { GET_AUTHORS_INFO } from '../../graphQL/Queries';

//MUI
import { Avatar, Grid, Typography,Divider } from '@mui/material';

//components
import Loader from '../shared/Loader';

const Authors = () => {
const {loading,data,error} = useQuery(GET_AUTHORS_INFO)

if(loading) return <Loader/>

if(error) return <h2>Somthing Went Wrong!</h2>

const { authors } = data;

return (


<Grid container sx={{boxShadow:'rgba(0,0,0,0.1)0px 4px 12px',borderRadius:4}}>

{
authors.map((author , index) => (
<React.Fragment key={author.id}>
<Grid item xs={12} padding={2}>
<Link to={`/authors/${author.slug}`} style={{display:'flex',alignItems:'center',textDecoration:'none'}}>
<Avatar src={author.avatar.url} sx={{marginLeft:2}} />
<Typography component='p' variant='p' color='text.secondary'>
{author.name}
</Typography>
</Link>
</Grid>
{index !== authors.length - 1 && (
<Grid item xs={12} >
<Divider variant='middle' sx={{margin:'10px'}}/>
</Grid>
)}

</React.Fragment>
))
}

</Grid>

);
};

export default Authors;
78 changes: 78 additions & 0 deletions src/components/blog/BlogPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { useQuery } from '@apollo/client';
import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import sanitizeHtml from 'sanitize-html';

//query
import { GET_POST_INFO } from '../../graphQL/Queries';

//components
import Loader from '../shared/Loader';
import CommentForm from '../comment/commentForm';
import Comments from '../comment/Comments';

//MUI
import { Avatar, Box, Container, Grid, Typography } from '@mui/material';

//Icon
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';


const BlogPage = () => {

const {slug} = useParams();
const navigate = useNavigate()

const{loading,data,error} = useQuery(GET_POST_INFO , {
variables:{slug}
});

if(loading) return <Loader/>

if(error) return <h2>Somthing Went Wrong!</h2>


return (
<Container maxWidth='lg'>
<Grid container >
<Grid item xs={12} mt={9} display='flex' justifyContent='space-between'>
<Typography component='h2' variant='h4' color='primary' fontWeight={700}>
{data?.post?.title}
</Typography>
<ArrowBackRoundedIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
</Grid>
<Grid item xs={12} mt={6} >
<img
src={data?.post?.coverPhoto.url}
alt={data?.post?.slug}
width='100%'
style={{borderRadius: 15}}
/>
</Grid>
<Grid item xs={12} mt={7} display='flex' alignItems='center'>
<Avatar
src={data?.post?.author?.avatar.url}
sx={{width:80 , height:80 , marginLeft:4}}
/>
<Box component='div' >
<Typography component='p' variant='h5' fontWeight={700}>{data?.post?.author.name}</Typography>
<Typography component='p' variant='p' color='text.secondary'>{data?.post?.author.field}</Typography>
</Box>
</Grid>
<Grid item xs={12} mt={4}>
<div dangerouslySetInnerHTML={{
__html: sanitizeHtml(data?.post?.content.html)}}></div>
</Grid>
<Grid item xs={12}>
<CommentForm slug={slug}/>
</Grid>
<Grid item xs={12}>
<Comments slug={slug}/>
</Grid>
</Grid>

</Container>
);
};

export default BlogPage;
Loading

0 comments on commit c8740d0

Please sign in to comment.