Skip to content

Commit

Permalink
Post related upadtes
Browse files Browse the repository at this point in the history
  • Loading branch information
Khumoyun Akhmedov committed Oct 24, 2020
1 parent 8bb0ad9 commit f760175
Show file tree
Hide file tree
Showing 15 changed files with 296 additions and 217 deletions.
87 changes: 10 additions & 77 deletions src/components/Post.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import React, { useState } from 'react'
import { useRouter } from 'next/router'
import { Flex, Box, Heading } from '@chakra-ui/core'
import Downvote from '../icons/arrow-down.svg'
import Upvote from '../icons/arrow-up.svg'

import GiveAward from '../icons/give-award.svg'
import PostSave from '../icons/post-save.svg'
import PostUnsave from '../icons/post-unsave.svg'
import Share from '../icons/arrow-share.svg'
import Comments from '../icons/comments.svg'

import styled from '@emotion/styled'
import { useRouter } from 'next/router'
import PostFooter from './PostFooter'

interface PostProps {
data: PostData;
Expand All @@ -32,13 +26,16 @@ const Flexbox = styled.div`
display: flex;
flex-direction: row;
min-height: 100px;
margin: 10px 0;
border: 1px solid lightgrey;
margin: 15px 0;
border: 1px solid #fff;
box-shadow: 0 2px 4px 0 hsla(0, 0%, 0%, 0.1);
border-radius: 3px;
cursor: pointer;
transition: box-shadow 0.1s ease-in;
&:hover {
border-color: black;
// border-color: black;
border: 1px solid lightgrey;
}
`

Expand All @@ -54,29 +51,7 @@ const PostHeader = styled(FlexCore)`
`
const PostContent = styled(FlexCore)`
height: 100%;
`
const PostFooter = styled(FlexCore)`
height: 100%;
align-items: center;
`

const PostButton = styled.div`
display: inline-flex;
padding: 2px 4px;
flex-direction: row;
font-size: 10px;
border-radius: 3px;
transition: background-color 0.2s ease-in;
margin-left: 2px;
span {
display: inline-block;
margin-left: 2px;
}
&:hover {
background-color: #e1e2e4;
}
flex-direction: column;
`

export const Post = ({ data }: PostProps) => {
Expand All @@ -88,9 +63,7 @@ export const Post = ({ data }: PostProps) => {
router.push(`/post/${data.id}`)
}

const command = (e: React.SyntheticEvent, cmd: string) => {
console.log('command', cmd)
}


const handleVote = (e: React.SyntheticEvent, vote: string) => {
e.stopPropagation()
Expand Down Expand Up @@ -146,46 +119,6 @@ export const Post = ({ data }: PostProps) => {
</PostContent>

<PostFooter className="post-footer">
<PostButton>
<GiveAward
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>123</span>
<span>Comments</span>
</PostButton>

<PostButton>
<Comments
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>Give Award</span>
</PostButton>

<PostButton>
<Share
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>Share</span>
</PostButton>

<PostButton>
<PostSave
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>Save</span>
</PostButton>

</PostFooter>
</Flex>
Expand Down
64 changes: 30 additions & 34 deletions src/components/PostFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, { useState } from 'react'
import { Flex, Box, Heading } from '@chakra-ui/core'
import Downvote from '../icons/arrow-down.svg'
import Upvote from '../icons/arrow-up.svg'

import GiveAward from '../icons/give-award.svg'
import PostSave from '../icons/post-save.svg'
Expand All @@ -23,16 +21,6 @@ export interface PostData {
points: number;
}

const FlexCore = styled.div`
display: flex;
flex-direction: row;
`

const PostFooter = styled(FlexCore)`
height: 100%;
align-items: center;
`

const PostButton = styled.div`
display: inline-flex;
padding: 2px 4px;
Expand All @@ -52,57 +40,65 @@ const PostButton = styled.div`
}
`

export const PostFooter = ({ data }: PostProps) => {
const [vote, setVote] = useState(data.points)
const router = useRouter()
const PostFooter = ({ data }: PostProps) => {
const [isSaved, setIsSaved] = useState(Math.round(Math.random()))

const command = (e: React.SyntheticEvent, cmd: string) => {
console.log('command', cmd)

if (cmd === 'bookmark') {
setIsSaved((old) => (old + 1)%2)
} else if (cmd === 'share') {
console.log()
}
}

return (
<PostFooter className="post-footer">
<PostButton>
<Flex direction="row" align="center" h="100%" mt={2}>
<PostButton onClick={(e) => command(e, 'give-award')}>
<GiveAward
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>123</span>
<span>Comments</span>
<span>Give Award</span>
</PostButton>

<PostButton>
<PostButton onClick={(e) => command(e, 'comments')}>
<Comments
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>Give Award</span>
<span>Comments</span>
</PostButton>

<PostButton>
<PostButton onClick={(e) => command(e, 'share')}>
<Share
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>Share</span>
</PostButton>

<PostButton>
<PostSave
onClick={(e) => command(e, 'share')}
style={{ fill: '#455A64' }}
width={16}
height={16}
/>
<span>Save</span>
<PostButton onClick={(e) => command(e, 'bookmark')}>
{isSaved ?
<PostUnsave
style={{ fill: '#455A64' }}
width={16}
height={16} /> :
<PostSave
style={{ fill: '#455A64' }}
width={16}
height={16} />
}
{isSaved ? <span>Unsave</span>: <span>Save</span>}
</PostButton>

</PostFooter>
</Flex>
)
}
}

export default PostFooter
Loading

0 comments on commit f760175

Please sign in to comment.