diff --git a/app/package.json b/app/package.json index 4eca751..da861d1 100755 --- a/app/package.json +++ b/app/package.json @@ -8,6 +8,7 @@ "react-scripts": "4.0.3" }, "scripts": { + "lint": "standard", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", diff --git a/app/src/app/children/image/helpers.js b/app/src/app/children/CaptionImage/helpers.js similarity index 100% rename from app/src/app/children/image/helpers.js rename to app/src/app/children/CaptionImage/helpers.js diff --git a/app/src/app/children/image/index.js b/app/src/app/children/CaptionImage/index.js similarity index 59% rename from app/src/app/children/image/index.js rename to app/src/app/children/CaptionImage/index.js index cfeae9f..984c018 100755 --- a/app/src/app/children/image/index.js +++ b/app/src/app/children/CaptionImage/index.js @@ -1,9 +1,9 @@ import React from 'react' import styles from './styles' -import {getCaptionFromEdges} from './helpers' +import { getCaptionFromEdges } from './helpers' -const Image = (props) => { - const {data} = props +const CaptionImage = (props) => { + const { data } = props return ( { ) } -export default Image +export default CaptionImage diff --git a/app/src/app/children/image/styles.js b/app/src/app/children/CaptionImage/styles.js similarity index 100% rename from app/src/app/children/image/styles.js rename to app/src/app/children/CaptionImage/styles.js diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js new file mode 100644 index 0000000..336e722 --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js @@ -0,0 +1,19 @@ +const processText = (text, name) => { + const hashtagRegex = /#(\w+)/g + const usernameRegex = /@(\w+)/g + + const textWithHashtags = text.replace( + hashtagRegex, + '#$1' + ) + + const textWithLinks = textWithHashtags.replace( + usernameRegex, + '@$1' + ) + const finalHTML = `${name} ${textWithLinks}` + // Okay to use here since we know the HTML source + return
+} + +export { processText } diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js new file mode 100644 index 0000000..61d0f98 --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js @@ -0,0 +1,22 @@ +import React from 'react' +import styles from './styles' +import { processText } from './helpers' +import './styles.css' +import LikeButton from '../../../../../like_button_mini' + +const Comment = (props) => { + const { comment } = props + + return ( +
+
+ {processText(comment.node.text, comment.node.owner.username)} +
+
+ +
+
+ ) +} + +export default Comment diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css new file mode 100644 index 0000000..fe8b8da --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css @@ -0,0 +1,5 @@ +@media (max-width: 900px) { + .textStyle { + font-size: 8px; + } + } \ No newline at end of file diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js new file mode 100644 index 0000000..58913f1 --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js @@ -0,0 +1,18 @@ +export default { + containerStyle: { + + display: 'flex', + paddingLeft: '2vw', + paddingRight: '2vw' + }, + heartStyle: { + + alignSelf: 'center' + + }, + textStyle: { + + marginLeft: '0.5em', + flex: 1 + } +} diff --git a/app/src/app/children/CommentSection/children/CommentList/index.js b/app/src/app/children/CommentSection/children/CommentList/index.js new file mode 100644 index 0000000..ef1c3d1 --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/index.js @@ -0,0 +1,17 @@ +import React from 'react' +import Comment from './children/Comment' +import styles from './styles' +import './styles.css' + +const CommentList = (props) => { + const { data } = props + return ( +
+ {data.edge_media_to_comment.edges.map((comment, index) => ( + + ))} +
+ ) +} + +export default CommentList diff --git a/app/src/app/children/CommentSection/children/CommentList/styles.css b/app/src/app/children/CommentSection/children/CommentList/styles.css new file mode 100644 index 0000000..2f1a789 --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/styles.css @@ -0,0 +1,5 @@ +@media (max-width: 900px) { + .containerStyle{ + height: 250px; + } + } \ No newline at end of file diff --git a/app/src/app/children/CommentSection/children/CommentList/styles.js b/app/src/app/children/CommentSection/children/CommentList/styles.js new file mode 100644 index 0000000..ad87fe1 --- /dev/null +++ b/app/src/app/children/CommentSection/children/CommentList/styles.js @@ -0,0 +1,8 @@ +export default { + maxHeight: '60vh', + display: 'flex', + flexDirection: 'column', + overflowY: 'scroll', + alignContent: 'flex-start', + gap: '0.5vh' +} diff --git a/app/src/app/children/CommentSection/index.js b/app/src/app/children/CommentSection/index.js new file mode 100644 index 0000000..1424048 --- /dev/null +++ b/app/src/app/children/CommentSection/index.js @@ -0,0 +1,13 @@ +import React from 'react' +import CommentList from './children/CommentList' + +const CommentSection = (props) => { + const { data } = props + return ( +
+ +
+ ) +} + +export default CommentSection diff --git a/app/src/app/children/PostFooter/helpers.js b/app/src/app/children/PostFooter/helpers.js new file mode 100644 index 0000000..7a37b05 --- /dev/null +++ b/app/src/app/children/PostFooter/helpers.js @@ -0,0 +1,24 @@ +export default function timeSincePost (epochTime) { + const currentTime = Math.floor(Date.now() / 1000) + + const timeElapsed = currentTime - epochTime + + if (timeElapsed < 60) { + return timeElapsed + ' seconds ago' + } else if (timeElapsed < 3600) { + const minutes = Math.floor(timeElapsed / 60) + return minutes + (minutes === 1 ? ' minute' : ' minutes') + ' ago' + } else if (timeElapsed < 86400) { + const hours = Math.floor(timeElapsed / 3600) + return hours + (hours === 1 ? ' hour' : ' hours') + ' ago' + } else if (timeElapsed < 604800) { + const days = Math.floor(timeElapsed / 86400) + return days + (days === 1 ? ' day' : ' days') + ' ago' + } else if (timeElapsed < 2419200) { + const weeks = Math.floor(timeElapsed / 604800) + return weeks + (weeks === 1 ? ' week' : ' weeks') + ' ago' + } else { + const years = Math.floor(timeElapsed / 31536000) + return years + (years === 1 ? ' year' : ' years') + ' ago' + } +} diff --git a/app/src/app/children/PostFooter/index.js b/app/src/app/children/PostFooter/index.js new file mode 100644 index 0000000..9cfb06d --- /dev/null +++ b/app/src/app/children/PostFooter/index.js @@ -0,0 +1,22 @@ +import React from 'react' +import LikeButton from '../like_button' +import styles from './styles' +import timeSincePost from './helpers' +const PostFooter = (props) => { + const { data } = props + + return ( +
+
+

{data.edge_media_preview_like.count} likes

+

{timeSincePost(data.taken_at_timestamp)}

+
+
+ +
+
+ + ) +} + +export default PostFooter diff --git a/app/src/app/children/PostFooter/styles.js b/app/src/app/children/PostFooter/styles.js new file mode 100644 index 0000000..c6e42d1 --- /dev/null +++ b/app/src/app/children/PostFooter/styles.js @@ -0,0 +1,26 @@ +export default { + + heartStyle: { + paddingTop: '2vh', + paddingBottom: '1vh' + }, + + container: { + display: 'flex', + justifyContent: 'space-between', + paddingLeft: '2vw', + paddingRight: '1vw', + marginTop: '3vh' + }, + timeTextStyle: { + color: 'grey', + paddingTop: '0.5vw', + margin: '0' + }, + likesTextStyle: { + paddingTop: '0.5vw', + margin: '0', + fontWeight: 'bold' + } + +} diff --git a/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js b/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js new file mode 100755 index 0000000..9b5973e --- /dev/null +++ b/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js @@ -0,0 +1,15 @@ +import React from 'react' +import styles from './styles' + +const ProfileImage = (props) => { + const { data } = props + return ( + User Profile Picture + ) +} + +export default ProfileImage diff --git a/app/src/app/children/UserInfoHeader/children/ProfileImage/styles.js b/app/src/app/children/UserInfoHeader/children/ProfileImage/styles.js new file mode 100644 index 0000000..a81ef20 --- /dev/null +++ b/app/src/app/children/UserInfoHeader/children/ProfileImage/styles.js @@ -0,0 +1,4 @@ +export default { + width: '10%', + display: 'block' +} diff --git a/app/src/app/children/UserInfoHeader/index.js b/app/src/app/children/UserInfoHeader/index.js new file mode 100644 index 0000000..335b142 --- /dev/null +++ b/app/src/app/children/UserInfoHeader/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import styles from './styles' +import ProfileImage from './children/ProfileImage' + +const UserInfoHeader = (props) => { + const { data } = props + console.log(data) + return ( +
+ +
+

{data.owner.username}

+

{data.location.name}

+
+
+ + ) +} + +export default UserInfoHeader diff --git a/app/src/app/children/UserInfoHeader/styles.js b/app/src/app/children/UserInfoHeader/styles.js new file mode 100644 index 0000000..a3c38b6 --- /dev/null +++ b/app/src/app/children/UserInfoHeader/styles.js @@ -0,0 +1,15 @@ +export default { + containerStyle: { + display: 'flex', + alignItems: 'center', + paddingLeft: '2vw', + paddingTop: '2vh' + }, + infoTextStyle: { + marginLeft: '0.5em', + lineHeight: '0.5em' + }, + textUserNameStyle: { + fontWeight: 'bold' + } +} diff --git a/app/src/app/children/like_button/children/liked_icon/index.js b/app/src/app/children/like_button/children/liked_icon/index.js index f25b47f..fda30d6 100644 --- a/app/src/app/children/like_button/children/liked_icon/index.js +++ b/app/src/app/children/like_button/children/liked_icon/index.js @@ -2,8 +2,8 @@ import React from 'react' const LikedIcon = (props) => { return ( - - + + ) } diff --git a/app/src/app/children/like_button/children/unliked_icon/index.js b/app/src/app/children/like_button/children/unliked_icon/index.js index 660c1c1..c4a50dd 100644 --- a/app/src/app/children/like_button/children/unliked_icon/index.js +++ b/app/src/app/children/like_button/children/unliked_icon/index.js @@ -2,8 +2,19 @@ import React from 'react' const UnlikedIcon = (props) => { return ( - - + + ) } diff --git a/app/src/app/children/like_button/index.js b/app/src/app/children/like_button/index.js index 6403576..cc5de33 100644 --- a/app/src/app/children/like_button/index.js +++ b/app/src/app/children/like_button/index.js @@ -1,8 +1,20 @@ -import React from 'react' +import React, { useState } from 'react' import LikedIcon from './children/liked_icon' +import UnlikedIcon from './children/unliked_icon' +import styles from './styles' const LikeButton = (props) => { - return + const [liked, setLiked] = useState(false) + + const toggleLike = () => { + setLiked((prevLiked) => !prevLiked) + } + + return ( + + ) } export default LikeButton diff --git a/app/src/app/children/like_button/styles.js b/app/src/app/children/like_button/styles.js new file mode 100644 index 0000000..50a00a7 --- /dev/null +++ b/app/src/app/children/like_button/styles.js @@ -0,0 +1,8 @@ +export default { + button: { + background: 'none', + border: 'none', + padding: 0, + cursor: 'pointer' + } +} diff --git a/app/src/app/children/like_button_mini/children/liked_icon/index.js b/app/src/app/children/like_button_mini/children/liked_icon/index.js new file mode 100644 index 0000000..86724d3 --- /dev/null +++ b/app/src/app/children/like_button_mini/children/liked_icon/index.js @@ -0,0 +1,11 @@ +import React from 'react' + +const LikedIcon = (props) => { + return ( + + + + ) +} + +export default LikedIcon diff --git a/app/src/app/children/like_button_mini/children/unliked_icon/index.js b/app/src/app/children/like_button_mini/children/unliked_icon/index.js new file mode 100644 index 0000000..ed6c7fc --- /dev/null +++ b/app/src/app/children/like_button_mini/children/unliked_icon/index.js @@ -0,0 +1,11 @@ +import React from 'react' + +const UnlikedIcon = (props) => { + return ( + + + + ) +} + +export default UnlikedIcon diff --git a/app/src/app/children/like_button_mini/index.js b/app/src/app/children/like_button_mini/index.js new file mode 100644 index 0000000..cc5de33 --- /dev/null +++ b/app/src/app/children/like_button_mini/index.js @@ -0,0 +1,20 @@ +import React, { useState } from 'react' +import LikedIcon from './children/liked_icon' +import UnlikedIcon from './children/unliked_icon' +import styles from './styles' + +const LikeButton = (props) => { + const [liked, setLiked] = useState(false) + + const toggleLike = () => { + setLiked((prevLiked) => !prevLiked) + } + + return ( + + ) +} + +export default LikeButton diff --git a/app/src/app/children/like_button_mini/styles.js b/app/src/app/children/like_button_mini/styles.js new file mode 100644 index 0000000..50a00a7 --- /dev/null +++ b/app/src/app/children/like_button_mini/styles.js @@ -0,0 +1,8 @@ +export default { + button: { + background: 'none', + border: 'none', + padding: 0, + cursor: 'pointer' + } +} diff --git a/app/src/app/index.js b/app/src/app/index.js index a5c5ed1..71080c6 100755 --- a/app/src/app/index.js +++ b/app/src/app/index.js @@ -1,19 +1,25 @@ import React from 'react' -import Image from './children/image' -import LikeButton from './children/like_button' +import CaptionImage from './children/CaptionImage' +import UserInfoHeader from './children/UserInfoHeader' +import CommentSection from './children/CommentSection' +import PostFooter from './children/PostFooter' +import './styles.css' import styles from './styles' const App = (props) => { const { data } = props return ( -
-
- -
-
-

User block

-

Comments block

- +
+
+
+ +
+
+ +
+ + +
) diff --git a/app/src/app/styles.css b/app/src/app/styles.css new file mode 100644 index 0000000..240c2ba --- /dev/null +++ b/app/src/app/styles.css @@ -0,0 +1,16 @@ +@media (max-width: 900px) { + .main{ + + flex-direction: column; + } + + .image { + max-width: 600px; + order: 2; + } + + .text { + max-width: 100%; + order: 2; + } + } \ No newline at end of file diff --git a/app/src/app/styles.js b/app/src/app/styles.js index 5f7c3a4..176b5db 100644 --- a/app/src/app/styles.js +++ b/app/src/app/styles.js @@ -1,30 +1,42 @@ export default { + + separator: { + border: '1px solid #f0f0f0', + marginTop: '2vh', + width: '90%', + marginLeft: '2vw' + + }, main: { - backgroundColor: '#fff', + backgroundColor: '#f5f5f5', border: '1px solid #e6e6e6', borderBottomRightRadius: '3px', borderTopRightRadius: '3px', - maxWidth: '935px', + maxWidth: '1400px', margin: '16px auto', width: 'calc(100% - 40px)', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', justifyContent: 'flex-start', alignContent: 'stretch', alignItems: 'flex-start' }, image: { + paddingTop: '4vh', + paddingBottom: '4vh', + maxWidth: '60%', order: '1', flex: '1 0 60%', - alignSelf: 'flex-start' + alignSelf: 'center', + marginTop: '0 20px' }, text: { + + backgroundColor: 'white', + // maxWidth: '40%', order: '2', - flex: '1 0 40%', + flex: '1 0 30%', alignSelf: 'flex-start' } }