|
|
@@ -24,108 +24,221 @@ import {
|
|
|
actionPostUpsert,
|
|
|
backendURL,
|
|
|
actionAllPosts,
|
|
|
- actionOnePost
|
|
|
+ actionOnePost,
|
|
|
} from './actions'
|
|
|
-import { Upload, Button , DatePicker, Space } from 'antd'
|
|
|
-import moment from 'moment';
|
|
|
+import { Upload, Button, DatePicker, Space } from 'antd'
|
|
|
+import moment from 'moment'
|
|
|
import { UploadOutlined } from '@ant-design/icons'
|
|
|
import ImgCrop from 'antd-img-crop'
|
|
|
import { Avatar, Image, Divider, Radio } from 'antd'
|
|
|
import { UserOutlined } from '@ant-design/icons'
|
|
|
import user from './materials/user.png'
|
|
|
import photoNotFound from './materials/photoNotFound.png'
|
|
|
-
|
|
|
+// import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
|
|
|
+// import { Carousel } from 'react-responsive-carousel';
|
|
|
+import { Carousel } from 'antd'
|
|
|
+import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
|
|
|
console.log(store.getState())
|
|
|
store.subscribe(() => console.log(store.getState()))
|
|
|
const PageMain = () => <div className="PageMain">ГЛАВНАЯ</div>
|
|
|
|
|
|
-const Card = ({post, onPost} )=>(
|
|
|
-<>
|
|
|
-<Link to={`/post/${post?._id}`} onClick={()=>onPost(post?._id)}>
|
|
|
-{post?.images && post?.images[0] && post.images[0]?.url ?
|
|
|
-<img className='Card'
|
|
|
- src={
|
|
|
- backendURL+'/' + post.images[0].url
|
|
|
- }
|
|
|
- style={{ maxWidth: '200px', maxHeight: '200px' }} />
|
|
|
- :
|
|
|
- <img className='Card'
|
|
|
- src={
|
|
|
- photoNotFound
|
|
|
- }
|
|
|
- style={{ maxWidth: '200px', maxHeight: '200px' }} /> }
|
|
|
-{/* {console.log(post?._id)} */}
|
|
|
-</Link>
|
|
|
-</>
|
|
|
+const Card = ({ post, onPost }) => (
|
|
|
+ <>
|
|
|
+ <Link to={`/post/${post?._id}`} onClick={() => onPost(post?._id)}>
|
|
|
+ {post?.images && post?.images[0] && post.images[0]?.url ? (
|
|
|
+ <img
|
|
|
+ className="Card"
|
|
|
+ src={backendURL + '/' + post.images[0].url}
|
|
|
+ style={{ maxWidth: '200px', maxHeight: '200px' }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ className="Card"
|
|
|
+ src={photoNotFound}
|
|
|
+ style={{ maxWidth: '200px', maxHeight: '200px' }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ {/* {console.log(post?._id)} */}
|
|
|
+ </Link>
|
|
|
+ </>
|
|
|
)
|
|
|
+const SampleNextArrow = (props) => {
|
|
|
+ const { className, style, onClick } = props
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="carousel-control-next"
|
|
|
+ style={{
|
|
|
+ fontSize: '50px',
|
|
|
+ color: '#a8a8a8',
|
|
|
+ position: 'absolute',
|
|
|
+ left: '100%',
|
|
|
+ top: '50%',
|
|
|
+ margin: 'auto',
|
|
|
+ }}
|
|
|
+ onClick={onClick}
|
|
|
+ >
|
|
|
+ <RightCircleFilled />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
-const PagePost=({onePost,aboutMe:{avatar, login}={}, onPost})=>{
|
|
|
- return(
|
|
|
- <>
|
|
|
-
|
|
|
- {onePost?.images && onePost?.images[0] && onePost.images[0]?.url ?
|
|
|
-<img className='Card'
|
|
|
- src={
|
|
|
- backendURL+'/' + onePost.images[0].url
|
|
|
- }
|
|
|
- style={{ maxWidth: '600px', maxHeight: '600px' }} />
|
|
|
- :
|
|
|
- <img className='Card'
|
|
|
- src={
|
|
|
- photoNotFound
|
|
|
- }
|
|
|
- style={{ maxWidth: '600px', maxHeight: '600px' }} /> }
|
|
|
- {avatar ?
|
|
|
-<Avatar style={{width:'50px',height:'50px',position:'absolute'}} src={backendURL + '/' + avatar?.url} />
|
|
|
- :
|
|
|
-<Avatar style={{width:'50px',height:'50px',position:'absolute'}} src={user} />
|
|
|
+const SamplePrevArrow = (props) => {
|
|
|
+ const { className, style, onClick } = props
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="carousel-control-prev"
|
|
|
+ style={{
|
|
|
+ color: '#a8a8a8',
|
|
|
+ fontSize: '50px',
|
|
|
+ position: 'absolute',
|
|
|
+ margin: 'auto',
|
|
|
+ right: '100%',
|
|
|
+ top: '50%'
|
|
|
+ }}
|
|
|
+ onClick={onClick}
|
|
|
+ >
|
|
|
+ <LeftCircleFilled />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
+const MyCarousel = ({ images = [] }) => {
|
|
|
+ console.log('IMAGES', images)
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div>
|
|
|
+ <Carousel
|
|
|
+ style={{
|
|
|
+ display: 'block',
|
|
|
+ minWidth: '500px',
|
|
|
+ minHeight: '500px',
|
|
|
+ background: 'blue',
|
|
|
+ }}
|
|
|
+ effect="fade"
|
|
|
+ arrows
|
|
|
+ nextArrow={<SampleNextArrow />}
|
|
|
+ prevArrow={<SamplePrevArrow />}
|
|
|
+ >
|
|
|
+ {images &&
|
|
|
+ images.map((i, index) =>
|
|
|
+ i?.url ? (
|
|
|
+ <div key={index}>
|
|
|
+ <img
|
|
|
+ className="PostImage"
|
|
|
+ src={backendURL + '/' + i?.url}
|
|
|
+ style={{
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ maxWidth: '400px',
|
|
|
+ maxHeight: '400px',
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ className="PostImage"
|
|
|
+ src={photoNotFound}
|
|
|
+ style={{ maxWidth: '400px', maxHeight: '400px' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ )}
|
|
|
+ </Carousel>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )
|
|
|
}
|
|
|
- <h2> {onePost?.title||''} </h2>
|
|
|
- </>)
|
|
|
+const PagePost = ({ onePost, aboutMe: { avatar, login } = {}, onPost }) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <MyCarousel images={onePost?.images} />
|
|
|
+
|
|
|
+ {avatar ? (
|
|
|
+ <Avatar
|
|
|
+ style={{ width: '50px', height: '50px' }}
|
|
|
+ src={backendURL + '/' + avatar?.url}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <Avatar style={{ width: '50px', height: '50px' }} src={user} />
|
|
|
+ )}
|
|
|
+ <h2> {onePost?.title || ''} </h2>
|
|
|
+ <h2> {onePost?.text || ''} </h2>
|
|
|
+ </>
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-const CPost = connect((state)=>({ onePost: state.promise?.onePost?.payload, aboutMe: state.promise?.aboutMe?.payload}))(PagePost)
|
|
|
-const PageAboutMe = ({ aboutMe: {_id, login, nick, createdAt, avatar, followers,following } = {}, allPosts, onPosts,onPost }) => {
|
|
|
- useEffect(() => { onPosts() }, []);
|
|
|
+const CPost = connect((state) => ({
|
|
|
+ onePost: state.promise.onePost?.payload,
|
|
|
+ aboutMe: state.promise?.aboutMe?.payload,
|
|
|
+}))(PagePost)
|
|
|
+const PageAboutMe = ({
|
|
|
+ aboutMe: { _id, login, nick, createdAt, avatar, followers, following } = {},
|
|
|
+ allPosts,
|
|
|
+ onPosts,
|
|
|
+ onPost,
|
|
|
+}) => {
|
|
|
+ useEffect(() => {
|
|
|
+ onPosts()
|
|
|
+ }, [])
|
|
|
// console.log('CREATED AT',new Intl.DateTimeFormat().format(createdAt));
|
|
|
-return (
|
|
|
-<section className="AboutMe">
|
|
|
-<Avatar style={{width:'150px',height:'150px',position:'absolute'}} src={backendURL + '/' + avatar?.url || user} />
|
|
|
-<div className="Info">
|
|
|
-
|
|
|
-<h1> {login}</h1>
|
|
|
-<h3> Created Account: {new Intl.DateTimeFormat(('en-GB')).format(createdAt)}</h3>
|
|
|
-<div style={{display: 'flex'}}>
|
|
|
-
|
|
|
-{/* {allPosts?.length} style={{display: 'flex',justifyContent: 'space-between'}}*/}
|
|
|
-<h3 > {allPosts?.length} posts </h3>
|
|
|
-
|
|
|
-<h3 style={{marginLeft: '20px'}}> {followers?.length} followers </h3>
|
|
|
-
|
|
|
-<h3 style={{marginLeft: '20px'}}> {following?.length} following </h3>
|
|
|
+ return (
|
|
|
+ <section className="AboutMe">
|
|
|
+ <Avatar
|
|
|
+ style={{ width: '150px', height: '150px', position: 'absolute' }}
|
|
|
+ src={backendURL + '/' + avatar?.url || user}
|
|
|
+ />
|
|
|
+ <div className="Info">
|
|
|
+ <h1> {login}</h1>
|
|
|
+ <h3>
|
|
|
+ {' '}
|
|
|
+ Created Account: {new Intl.DateTimeFormat('en-GB').format(createdAt)}
|
|
|
+ </h3>
|
|
|
+ <div style={{ display: 'flex' }}>
|
|
|
+ {/* {allPosts?.length} style={{display: 'flex',justifyContent: 'space-between'}}*/}
|
|
|
+ <h3> {allPosts?.length} posts </h3>
|
|
|
|
|
|
-</div>
|
|
|
-<h3> nick: {nick==null?login:nick}</h3>
|
|
|
-<div style={{display:'flex',flexWrap: 'wrap', padding: '20px',margin:'20px'}}>
|
|
|
+ <h3 style={{ marginLeft: '20px' }}>
|
|
|
+ {' '}
|
|
|
+ {followers?.length} followers{' '}
|
|
|
+ </h3>
|
|
|
|
|
|
-{(allPosts||[])?.map((item) => (
|
|
|
- <Card post={item} onPost={onPost}/>
|
|
|
- ))}
|
|
|
-</div>
|
|
|
-{/* <h3> Created Account: {
|
|
|
+ <h3 style={{ marginLeft: '20px' }}>
|
|
|
+ {' '}
|
|
|
+ {following?.length} following{' '}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <h3> nick: {nick == null ? login : nick}</h3>
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ display: 'flex',
|
|
|
+ flexWrap: 'wrap',
|
|
|
+ padding: '20px',
|
|
|
+ margin: '20px',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {(allPosts || [])?.map((item) => (
|
|
|
+ <Card post={item} onPost={onPost} />
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ {/* <h3> Created Account: {
|
|
|
<div>
|
|
|
<img
|
|
|
src={backendURL + '/' + allPosts?.url}
|
|
|
style={{ maxWidth: '200px', maxHeight: '200px' }}/>
|
|
|
</div>
|
|
|
date} </h3> */}
|
|
|
-
|
|
|
-</div>
|
|
|
-</section>)}
|
|
|
-const CPageAboutMe = connect( (state) => ({ aboutMe: state.promise?.aboutMe?.payload,
|
|
|
-allPosts:state.promise?.allPosts?.payload
|
|
|
-}),{onPosts:actionAllPosts, onPost:actionOnePost})(PageAboutMe)
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ )
|
|
|
+}
|
|
|
+const CPageAboutMe = connect(
|
|
|
+ (state) => ({
|
|
|
+ aboutMe: state.promise?.aboutMe?.payload,
|
|
|
+ allPosts: state.promise?.allPosts?.payload,
|
|
|
+ }),
|
|
|
+ { onPosts: actionAllPosts, onPost: actionOnePost },
|
|
|
+)(PageAboutMe)
|
|
|
const PageCreatePost = () => (
|
|
|
<div style={{ maxWidth: '700px', maxHeight: '700px', background: '#FFFACD' }}>
|
|
|
<h2>Edit Post</h2>
|
|
|
@@ -170,23 +283,21 @@ const AddPost = ({ children }) => {
|
|
|
|
|
|
const CBasic = connect(null, { onLoad: actionSetAvatar })(Basic)
|
|
|
// const CAddPost =connect(null,{actionPostUpsert})
|
|
|
-const User = ({ aboutMe: { _id, login, avatar } = {}}) => (
|
|
|
- <Link className="User" to={`/profile/${_id}`} >
|
|
|
+const User = ({ aboutMe: { _id, login, avatar } = {} }) => (
|
|
|
+ <Link className="User" to={`/profile/${_id}`}>
|
|
|
<Avatar src={backendURL + '/' + avatar?.url || user} />
|
|
|
</Link>
|
|
|
)
|
|
|
|
|
|
-const CUser = connect(
|
|
|
- (state) => ({ aboutMe: state.promise.aboutMe?.payload }),
|
|
|
-
|
|
|
-)(User)
|
|
|
+const CUser = connect((state) => ({ aboutMe: state.promise.aboutMe?.payload }))(
|
|
|
+ User,
|
|
|
+)
|
|
|
|
|
|
function Basic({ onLoad }) {
|
|
|
const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
|
|
|
const files = acceptedFiles.map((file) => (
|
|
|
<li key={file.path}>
|
|
|
{file.path} - {file.size} bytes
|
|
|
-
|
|
|
</li>
|
|
|
))
|
|
|
useEffect(() => {
|
|
|
@@ -266,7 +377,7 @@ const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
|
|
|
const [state, setState] = useState(post)
|
|
|
useEffect(() => {
|
|
|
fileStatus?.status == 'FULFILLED' &&
|
|
|
- setState({
|
|
|
+ setState({
|
|
|
...state,
|
|
|
images: [
|
|
|
...state.images,
|
|
|
@@ -302,7 +413,7 @@ const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
|
|
|
})
|
|
|
return (
|
|
|
<section className="Post">
|
|
|
- <Basic onLoad={onFileDrop}/>
|
|
|
+ <Basic onLoad={onFileDrop} />
|
|
|
<SortableContainer onSortEnd={onSortEnd}>
|
|
|
{(state.images || []).map(({ _id, url }, index) => (
|
|
|
<>
|
|
|
@@ -325,10 +436,13 @@ const PostEditor = ({ post = defaultPost, onSave, onFileDrop, fileStatus }) => {
|
|
|
</section>
|
|
|
)
|
|
|
}
|
|
|
-const CPostEditor = connect((state) => ({ fileStatus: state.promise?.uploadFiles }), {
|
|
|
- onSave: actionPostUpsert,
|
|
|
- onFileDrop: actionUploadFiles,
|
|
|
-})(PostEditor)
|
|
|
+const CPostEditor = connect(
|
|
|
+ (state) => ({ fileStatus: state.promise?.uploadFiles }),
|
|
|
+ {
|
|
|
+ onSave: actionPostUpsert,
|
|
|
+ onFileDrop: actionUploadFiles,
|
|
|
+ },
|
|
|
+)(PostEditor)
|
|
|
// fileStatus=connect((state)=>(state.promise?.uploadFile))(CUploadFile)
|
|
|
|
|
|
const history = createHistory()
|
|
|
@@ -349,4 +463,4 @@ function App() {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-export default App
|
|
|
+export default App
|
