Finished frontend-task

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",

app/src/app/children/image/index.js → 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 (
     <img
       src={data.display_url}
@@ -13,4 +13,4 @@ const Image = (props) => {
   )
 }
 
-export default Image
+export default CaptionImage

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,
+    '<a href="#" style="color: blue; text-decoration: none">#$1</a>'
+  )
+
+  const textWithLinks = textWithHashtags.replace(
+    usernameRegex,
+    '<a href="#" style="color: blue; text-decoration: none">@$1</a>'
+  )
+  const finalHTML = `<strong>${name}</strong> ${textWithLinks}`
+  // Okay to use here since we know the HTML source
+  return <div dangerouslySetInnerHTML={{ __html: finalHTML }} />
+}
+
+export { processText }

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 (
+    <div className='textStyle' style={styles.containerStyle}>
+      <div style={styles.textStyle}>
+        <span>{processText(comment.node.text, comment.node.owner.username)}</span>
+      </div>
+      <div style={styles.heartStyle}>
+        <LikeButton />
+      </div>
+    </div>
+  )
+}
+
+export default Comment

app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css

@@ -0,0 +1,5 @@
+@media (max-width: 900px) {
+    .textStyle {
+      font-size: 8px;
+    }
+  }

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
+  }
+}

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 (
+    <div className='containerStyle' style={styles}>
+      {data.edge_media_to_comment.edges.map((comment, index) => (
+        <Comment key={index} comment={comment} />
+      ))}
+    </div>
+  )
+}
+
+export default CommentList

app/src/app/children/CommentSection/children/CommentList/styles.css

@@ -0,0 +1,5 @@
+@media (max-width: 900px) {
+    .containerStyle{
+        height: 250px;
+    }
+  }

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'
+}

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 (
+    <div>
+      <CommentList data={data} />
+    </div>
+  )
+}
+
+export default CommentSection

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'
+  }
+}

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 (
+    <div style={styles.container}>
+      <div style={styles.postInfoStyle}>
+        <p style={styles.likesTextStyle}>{data.edge_media_preview_like.count} likes</p>
+        <p style={styles.timeTextStyle}>{timeSincePost(data.taken_at_timestamp)}</p>
+      </div>
+      <div style={styles.heartStyle}>
+        <LikeButton />
+      </div>
+    </div>
+
+  )
+}
+
+export default PostFooter

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'
+  }
+
+}

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 (
+    <img
+      src={data.owner.profile_pic_url}
+      style={styles}
+      alt='User Profile Picture'
+    />
+  )
+}
+
+export default ProfileImage

app/src/app/children/UserInfoHeader/children/ProfileImage/styles.js

@@ -0,0 +1,4 @@
+export default {
+  width: '10%',
+  display: 'block'
+}

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 (
+    <div style={styles.containerStyle}>
+      <ProfileImage data={data} />
+      <div style={styles.infoTextStyle}>
+        <p style={styles.textUserNameStyle}>{data.owner.username}</p>
+        <p>{data.location.name}</p>
+      </div>
+    </div>
+
+  )
+}
+
+export default UserInfoHeader

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'
+  }
+}

app/src/app/children/like_button/children/liked_icon/index.js

@@ -2,8 +2,8 @@ import React from 'react'
 
 const LikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#ed4956" fill="#ed4956" height="24" role="img" viewBox="0 0 48 48" width="24">
-      <path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    <svg aria-label='' color='#ed4956' fill='#ed4956' height='40' role='img' viewBox='0 0 48 48' width='50'>
+      <path d='M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z' />
     </svg>
   )
 }

app/src/app/children/like_button/children/unliked_icon/index.js

@@ -2,8 +2,19 @@ import React from 'react'
 
 const UnlikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#8e8e8e" fill="#8e8e8e" height="24" role="img" viewBox="0 0 48 48" width="24">
-      <path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    <svg
+      aria-label=''
+      fill='#ffffff'
+      height='40'
+      role='img'
+      viewBox='0 0 48 48'
+      width='50'
+    >
+      <path
+        d='M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z'
+        stroke='#8e8e8e'
+        strokeWidth='2'
+      />
     </svg>
   )
 }

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 <LikedIcon />
+  const [liked, setLiked] = useState(false)
+
+  const toggleLike = () => {
+    setLiked((prevLiked) => !prevLiked)
+  }
+
+  return (
+    <button style={styles.button} onClick={toggleLike}>
+      {liked ? <LikedIcon /> : <UnlikedIcon />}
+    </button>
+  )
 }
 
 export default LikeButton

app/src/app/children/like_button/styles.js

@@ -0,0 +1,8 @@
+export default {
+  button: {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer'
+  }
+}

app/src/app/children/like_button_mini/children/liked_icon/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const LikedIcon = (props) => {
+  return (
+    <svg aria-label='' color='#ed4956' fill='#ed4956' height='2vh' role='img' viewBox='0 0 48 48' width='40'>
+      <path d='M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z' />
+    </svg>
+  )
+}
+
+export default LikedIcon

app/src/app/children/like_button_mini/children/unliked_icon/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const UnlikedIcon = (props) => {
+  return (
+    <svg aria-label='' color='#8e8e8e' fill='#8e8e8e' height='2vh' role='img' viewBox='0 0 48 48' width='40'>
+      <path d='M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z' />
+    </svg>
+  )
+}
+
+export default UnlikedIcon

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 (
+    <button style={styles.button} onClick={toggleLike}>
+      {liked ? <LikedIcon /> : <UnlikedIcon />}
+    </button>
+  )
+}
+
+export default LikeButton

app/src/app/children/like_button_mini/styles.js

@@ -0,0 +1,8 @@
+export default {
+  button: {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer'
+  }
+}