{"action":"created","comment":{"url":"https://api.github.com/repos/ashatat/e-commerce/pulls/comments/234447318","pull_request_review_id":176091937,"id":234447318,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIzNDQ0NzMxOA==","diff_hunk":"@@ -0,0 +1,157 @@\n+import React, { Component } from 'react';\n+import PropTypes from 'prop-types';\n+\n+import ZoomImg from './ZoomImg';\n+import './ItemPic.css';\n+\n+class ItemPic extends Component {\n+  state = {\n+    currentIndex: 0,\n+    translateValue: 0,\n+  };\n+\n+  componentDidMount() {\n+    window.addEventListener('resize', () => {\n+      this.setState({\n+        currentIndex: 0,\n+        translateValue: 0,\n+      });\n+    });\n+  }\n+\n+  componentWillUnmount() {\n+    window.removeEventListener('resize');\n+  }\n+\n+  slideWidth = element => {\n+    const { currentIndex } = this.state;\n+    const { picArr } = this.props;\n+\n+    let sliderWidth;\n+\n+    if (element === 'current_img') {\n+      sliderWidth = document.querySelector(`#img${currentIndex}`).clientWidth;\n+    }\n+    if (element === 'slider') {\n+      sliderWidth = document.querySelector(`#img${currentIndex}`).clientWidth;\n+      picArr.forEach((item, index) => {\n+        sliderWidth -= document.querySelector(`#img${index}`).clientWidth;\n+      });\n+    }\n+    return sliderWidth;\n+  };\n+\n+  nextImg = () => {\n+    const { currentIndex, translateValue } = this.state;\n+    const { picArr } = this.props;\n+\n+    if (currentIndex === picArr.length - 1) {\n+      this.setState({\n+        currentIndex: 0,\n+        translateValue: 0,\n+      });\n+    } else {\n+      this.setState({\n+        currentIndex: currentIndex + 1,\n+        translateValue: translateValue - this.slideWidth('current_img'),\n+      });\n+    }\n+  };\n+\n+  prevImg = () => {\n+    const { currentIndex, translateValue } = this.state;\n+    const { picArr } = this.props;\n+\n+    if (currentIndex === 0) {\n+      this.setState({\n+        currentIndex: picArr.length - 1,\n+        translateValue: this.slideWidth('slider'),\n+      });\n+    } else {\n+      this.setState({\n+        currentIndex: currentIndex - 1,\n+        translateValue: translateValue + this.slideWidth('current_img'),\n+      });\n+    }\n+  };\n+\n+  clickedImg = e => {\n+    const { currentIndex, translateValue } = this.state;\n+    const translateAdd =\n+      (currentIndex - Number(e.target.id)) * this.slideWidth('current_img');\n+\n+    this.setState({\n+      currentIndex: Number(e.target.id),\n+      translateValue: translateValue + translateAdd,\n+    });\n+  };\n+\n+  render() {\n+    const { translateValue, currentIndex } = this.state;\n+    const { picArr } = this.props;\n+    return (\n+      <div className=\"item-pic\">\n+        <div className=\"item-pic__slider\">\n+          <div","path":"client/src/components/ItemPic/index.jsx","position":103,"original_position":95,"commit_id":"67720a8b3eacb27b2d81202990662796864da4e4","original_commit_id":"3e3f0e6eb6b9a92a053ef6a1af52a8eea8207545","user":{"login":"ashatat","id":18149438,"node_id":"MDQ6VXNlcjE4MTQ5NDM4","avatar_url":"https://avatars3.githubusercontent.com/u/18149438?v=4","gravatar_id":"","url":"https://api.github.com/users/ashatat","html_url":"https://github.com/ashatat","followers_url":"https://api.github.com/users/ashatat/followers","following_url":"https://api.github.com/users/ashatat/following{/other_user}","gists_url":"https://api.github.com/users/ashatat/gists{/gist_id}","starred_url":"https://api.github.com/users/ashatat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashatat/subscriptions","organizations_url":"https://api.github.com/users/ashatat/orgs","repos_url":"https://api.github.com/users/ashatat/repos","events_url":"https://api.github.com/users/ashatat/events{/privacy}","received_events_url":"https://api.github.com/users/ashatat/received_events","type":"User","site_admin":false},"body":"I added it","created_at":"2018-11-18T14:34:36Z","updated_at":"2018-11-18T14:34:36Z","html_url":"https://github.com/ashatat/e-commerce/pull/51#discussion_r234447318","pull_request_url":"https://api.github.com/repos/ashatat/e-commerce/pulls/51","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/ashatat/e-commerce/pulls/comments/234447318"},"html":{"href":"https://github.com/ashatat/e-commerce/pull/51#discussion_r234447318"},"pull_request":{"href":"https://api.github.com/repos/ashatat/e-commerce/pulls/51"}},"in_reply_to_id":234441153},"pull_request":{"url":"https://api.github.com/repos/ashatat/e-commerce/pulls/51","id":226115612,"node_id":"MDExOlB1bGxSZXF1ZXN0MjI2MTE1NjEy","html_url":"https://github.com/ashatat/e-commerce/pull/51","diff_url":"https://github.com/ashatat/e-commerce/pull/51.diff","patch_url":"https://github.com/ashatat/e-commerce/pull/51.patch","issue_url":"https://api.github.com/repos/ashatat/e-commerce/issues/51","number":51,"state":"open","locked":false,"title":"Create item-view picture","user":{"login":"ashatat","id":18149438,"node_id":"MDQ6VXNlcjE4MTQ5NDM4","avatar_url":"https://avatars3.githubusercontent.com/u/18149438?v=4","gravatar_id":"","url":"https://api.github.com/users/ashatat","html_url":"https://github.com/ashatat","followers_url":"https://api.github.com/users/ashatat/followers","following_url":"https://api.github.com/users/ashatat/following{/other_user}","gists_url":"https://api.github.com/users/ashatat/gists{/gist_id}","starred_url":"https://api.github.com/users/ashatat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashatat/subscriptions","organizations_url":"https://api.github.com/users/ashatat/orgs","repos_url":"https://api.github.com/users/ashatat/repos","events_url":"https://api.github.com/users/ashatat/events{/privacy}","received_events_url":"https://api.github.com/users/ashatat/received_events","type":"User","site_admin":false},"body":"Details on  #47\r\n\r\nprops example to run `ItemPic` component:\r\n```jsx\r\n picArr = [\r\n      { id: '1', url: 'http://atelier.swiftideas.com/wp-content/uploads/2014/11/dvn-shirt-long-blue01_1alt.jpg' },\r\n      { id: '2', url: 'http://atelier.swiftideas.com/wp-content/uploads/2014/11/dvn-shirt-long-blue02_1alt.jpg' },\r\n      { id: '3', url: 'http://atelier.swiftideas.com/wp-content/uploads/2014/11/dvn-shirt-long-blue03_1alt.jpg' }\r\n ]\r\n```\r\n","created_at":"2018-10-26T14:20:20Z","updated_at":"2018-11-18T14:34:36Z","closed_at":null,"merged_at":null,"merge_commit_sha":"9332ae51d9afdcf6b6531a6bf23c3e0c777bb621","assignee":null,"assignees":[],"requested_reviewers":[{"login":"RamyAlshurafa","id":34629478,"node_id":"MDQ6VXNlcjM0NjI5NDc4","avatar_url":"https://avatars2.githubusercontent.com/u/34629478?v=4","gravatar_id":"","url":"https://api.github.com/users/RamyAlshurafa","html_url":"https://github.com/RamyAlshurafa","followers_url":"https://api.github.com/users/RamyAlshurafa/followers","following_url":"https://api.github.com/users/RamyAlshurafa/following{/other_user}","gists_url":"https://api.github.com/users/RamyAlshurafa/gists{/gist_id}","starred_url":"https://api.github.com/users/RamyAlshurafa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RamyAlshurafa/subscriptions","organizations_url":"https://api.github.com/users/RamyAlshurafa/orgs","repos_url":"https://api.github.com/users/RamyAlshurafa/repos","events_url":"https://api.github.com/users/RamyAlshurafa/events{/privacy}","received_events_url":"https://api.github.com/users/RamyAlshurafa/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[{"id":1130485818,"node_id":"MDU6TGFiZWwxMTMwNDg1ODE4","url":"https://api.github.com/repos/ashatat/e-commerce/labels/Changes%20requested","name":"Changes requested","color":"ff9f4c","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/ashatat/e-commerce/pulls/51/commits","review_comments_url":"https://api.github.com/repos/ashatat/e-commerce/pulls/51/comments","review_comment_url":"https://api.github.com/repos/ashatat/e-commerce/pulls/comments{/number}","comments_url":"https://api.github.com/repos/ashatat/e-commerce/issues/51/comments","statuses_url":"https://api.github.com/repos/ashatat/e-commerce/statuses/67720a8b3eacb27b2d81202990662796864da4e4","head":{"label":"ashatat:item-pic","ref":"item-pic","sha":"67720a8b3eacb27b2d81202990662796864da4e4","user":{"login":"ashatat","id":18149438,"node_id":"MDQ6VXNlcjE4MTQ5NDM4","avatar_url":"https://avatars3.githubusercontent.com/u/18149438?v=4","gravatar_id":"","url":"https://api.github.com/users/ashatat","html_url":"https://github.com/ashatat","followers_url":"https://api.github.com/users/ashatat/followers","following_url":"https://api.github.com/users/ashatat/following{/other_user}","gists_url":"https://api.github.com/users/ashatat/gists{/gist_id}","starred_url":"https://api.github.com/users/ashatat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashatat/subscriptions","organizations_url":"https://api.github.com/users/ashatat/orgs","repos_url":"https://api.github.com/users/ashatat/repos","events_url":"https://api.github.com/users/ashatat/events{/privacy}","received_events_url":"https://api.github.com/users/ashatat/received_events","type":"User","site_admin":false},"repo":{"id":151413585,"node_id":"MDEwOlJlcG9zaXRvcnkxNTE0MTM1ODU=","name":"e-commerce","full_name":"ashatat/e-commerce","private":false,"owner":{"login":"ashatat","id":18149438,"node_id":"MDQ6VXNlcjE4MTQ5NDM4","avatar_url":"https://avatars3.githubusercontent.com/u/18149438?v=4","gravatar_id":"","url":"https://api.github.com/users/ashatat","html_url":"https://github.com/ashatat","followers_url":"https://api.github.com/users/ashatat/followers","following_url":"https://api.github.com/users/ashatat/following{/other_user}","gists_url":"https://api.github.com/users/ashatat/gists{/gist_id}","starred_url":"https://api.github.com/users/ashatat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashatat/subscriptions","organizations_url":"https://api.github.com/users/ashatat/orgs","repos_url":"https://api.github.com/users/ashatat/repos","events_url":"https://api.github.com/users/ashatat/events{/privacy}","received_events_url":"https://api.github.com/users/ashatat/received_events","type":"User","site_admin":false},"html_url":"https://github.com/ashatat/e-commerce","description":"Basic e-commerce website to practice our gitflow, teamwork, communication and clean code best practices.","fork":false,"url":"https://api.github.com/repos/ashatat/e-commerce","forks_url":"https://api.github.com/repos/ashatat/e-commerce/forks","keys_url":"https://api.github.com/repos/ashatat/e-commerce/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ashatat/e-commerce/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ashatat/e-commerce/teams","hooks_url":"https://api.github.com/repos/ashatat/e-commerce/hooks","issue_events_url":"https://api.github.com/repos/ashatat/e-commerce/issues/events{/number}","events_url":"https://api.github.com/repos/ashatat/e-commerce/events","assignees_url":"https://api.github.com/repos/ashatat/e-commerce/assignees{/user}","branches_url":"https://api.github.com/repos/ashatat/e-commerce/branches{/branch}","tags_url":"https://api.github.com/repos/ashatat/e-commerce/tags","blobs_url":"https://api.github.com/repos/ashatat/e-commerce/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ashatat/e-commerce/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ashatat/e-commerce/git/refs{/sha}","trees_url":"https://api.github.com/repos/ashatat/e-commerce/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ashatat/e-commerce/statuses/{sha}","languages_url":"https://api.github.com/repos/ashatat/e-commerce/languages","stargazers_url":"https://api.github.com/repos/ashatat/e-commerce/stargazers","contributors_url":"https://api.github.com/repos/ashatat/e-commerce/contributors","subscribers_url":"https://api.github.com/repos/ashatat/e-commerce/subscribers","subscription_url":"https://api.github.com/repos/ashatat/e-commerce/subscription","commits_url":"https://api.github.com/repos/ashatat/e-commerce/commits{/sha}","git_commits_url":"https://api.github.com/repos/ashatat/e-commerce/git/commits{/sha}","comments_url":"https://api.github.com/repos/ashatat/e-commerce/comments{/number}","issue_comment_url":"https://api.github.com/repos/ashatat/e-commerce/issues/comments{/number}","contents_url":"https://api.github.com/repos/ashatat/e-commerce/contents/{+path}","compare_url":"https://api.github.com/repos/ashatat/e-commerce/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ashatat/e-commerce/merges","archive_url":"https://api.github.com/repos/ashatat/e-commerce/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ashatat/e-commerce/downloads","issues_url":"https://api.github.com/repos/ashatat/e-commerce/issues{/number}","pulls_url":"https://api.github.com/repos/ashatat/e-commerce/pulls{/number}","milestones_url":"https://api.github.com/repos/ashatat/e-commerce/milestones{/number}","notifications_url":"https://api.github.com/repos/ashatat/e-commerce/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ashatat/e-commerce/labels{/name}","releases_url":"https://api.github.com/repos/ashatat/e-commerce/releases{/id}","deployments_url":"https://api.github.com/repos/ashatat/e-commerce/deployments","created_at":"2018-10-03T13:03:08Z","updated_at":"2018-11-18T11:06:11Z","pushed_at":"2018-11-18T14:34:02Z","git_url":"git://github.com/ashatat/e-commerce.git","ssh_url":"git@github.com:ashatat/e-commerce.git","clone_url":"https://github.com/ashatat/e-commerce.git","svn_url":"https://github.com/ashatat/e-commerce","homepage":null,"size":494,"stargazers_count":3,"watchers_count":3,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":2,"mirror_url":null,"archived":false,"open_issues_count":37,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":2,"open_issues":37,"watchers":3,"default_branch":"master"}},"base":{"label":"ashatat:master","ref":"master","sha":"b87543b32240793e941e8b39afc10ecef998629d","user":{"login":"ashatat","id":18149438,"node_id":"MDQ6VXNlcjE4MTQ5NDM4","avatar_url":"https://avatars3.githubusercontent.com/u/18149438?v=4","gravatar_id":"","url":"https://api.github.com/users/ashatat","html_url":"https://github.com/ashatat","followers_url":"https://api.github.com/users/ashatat/followers","following_url":"https://api.github.com/users/ashatat/following{/other_user}","gists_url":"https://api.github.com/users/ashatat/gists{/gist_id}","starred_url":"https://api.github.com/users/ashatat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashatat/subscriptions","organizations_url":"https://api.github.com/users/ashatat/orgs","repos_url":"https://api.github.com/users/ashatat/repos","events_url":"https://api.github.com/users/ashatat/events{/privacy}","received_events_url":"https://api.github.com/users/ashatat/received_events","type":"User","site_admin":false},"repo":{"id":151413585,"node_id":"MDEwOlJlcG9zaXRvcnkxNTE0MTM1ODU=","name":"e-commerce","full_name":"ashatat/e-commerce","private":false,"owner":{"login":"ashatat","id":18149438,"node_id":"MDQ6VXNlcjE4MTQ5NDM4","avatar_url":"https://avatars3.githubusercontent.com/u/18149438?v=4","gravatar_id":"","url":"https://api.github.com/users/ashatat","html_url":"https://github.com/ashatat","followers_url":"https://api.github.com/users/ashatat/followers","following_url":"https://api.github.com/users/ashatat/following{/other_user}","gists_url":"https://api.github.com/users/ashatat/gists{/gist_id}","starred_url":"https://api.github.com/users/ashatat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashatat/subscriptions","organizations_url":"https://api.github.com/users/ashatat/orgs","repos_url":"https://api.github.com/users/ashatat/repos","events_url":"https://api.github.com/users/ashatat/events{/privacy}","received_events_url":"https://api.github.com/users/ashatat/received_events","type":"User","site_admin":false},"html_url":"https://github.com/ashatat/e-commerce","description":"Basic e-commerce website to practice our gitflow, teamwork, communication and clean code best practices.","fork":false,"url":"https://api.github.com/repos/ashatat/e-commerce","forks_url":"https://api.github.com/repos/ashatat/e-commerce/forks","keys_url":"https://api.github.com/repos/ashatat/e-commerce/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ashatat/e-commerce/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ashatat/e-commerce/teams","hooks_url":"https://api.github.com/repos/ashatat/e-commerce/hooks","issue_events_url":"https://api.github.com/repos/ashatat/e-commerce/issues/events{/number}","events_url":"https://api.github.com/repos/ashatat/e-commerce/events","assignees_url":"https://api.github.com/repos/ashatat/e-commerce/assignees{/user}","branches_url":"https://api.github.com/repos/ashatat/e-commerce/branches{/branch}","tags_url":"https://api.github.com/repos/ashatat/e-commerce/tags","blobs_url":"https://api.github.com/repos/ashatat/e-commerce/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ashatat/e-commerce/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ashatat/e-commerce/git/refs{/sha}","trees_url":"https://api.github.com/repos/ashatat/e-commerce/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ashatat/e-commerce/statuses/{sha}","languages_url":"https://api.github.com/repos/ashatat/e-commerce/languages","stargazers_url":"https://api.github.com/repos/ashatat/e-commerce/stargazers","contributors_url":"https://api.github.com/repos/ashatat/e-commerce/contributors","subscribers_url":"https://api.github.com/repos/ashatat/e-commerce/subscribers","subscription_url":"https://api.github.com/repos/ashatat/e-commerce/subscription","commits_url":"https://api.github.com/repos/ashatat/e-commerce/commits{/sha}","git_commits_url":"https://api.github.com/repos/ashatat/e-commerce/git/commits{/sha}","comments_url":"https://api.github.com/repos/ashatat/e-commerce/comments{/number}","issue_comment_url":"https://api.github.com/repos/ashatat/e-commerce/issues/comments{/number}","contents_url":"https://api.github.com/repos/ashatat/e-commerce/contents/{+path}","compare_url":"https://api.github.com/repos/ashatat/e-commerce/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ashatat/e-commerce/merges","archive_url":"https://api.github.com/repos/ashatat/e-commerce/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ashatat/e-commerce/downloads","issues_url":"https://api.github.com/repos/ashatat/e-commerce/issues{/number}","pulls_url":"https://api.github.com/repos/ashatat/e-commerce/pulls{/number}","milestones_url":"https://api.github.com/repos/ashatat/e-commerce/milestones{/number}","notifications_url":"https://api.github.com/repos/ashatat/e-commerce/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ashatat/e-commerce/labels{/name}","releases_url":"https://api.github.com/repos/ashatat/e-commerce/releases{/id}","deployments_url":"https://api.github.com/repos/ashatat/e-commerce/deployments","created_at":"2018-10-03T13:03:08Z","updated_at":"2018-11-18T11:06:11Z","pushed_at":"2018-11-18T14:34:02Z","git_url":"git://github.com/ashatat/e-commerce.git","ssh_url":"git@github.com:ashatat/e-commerce.git","clone_url":"https://github.com/ashatat/e-commerce.git","svn_url":"https://github.com/ashatat/e-commerce","homepage":null,"size":494,"stargazers_count":3,"watchers_count":3,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":2,"mirror_url":null,"archived":false,"open_issues_count":37,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":2,"open_issues":37,"watchers":3,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/ashatat/e-commerce/pulls/51"},"html":{"href":"https://github.com/ashatat/e-commerce/pull/51"},"issue":{"href":"https://api.github.com/repos/ashatat/e-commerce/issues/51"},"comments":{"href":"https://api.github.com/repos/ashatat/e-commerce/issues/51/comments"},"review_comments":{"href":"https://api.github.com/repos/ashatat/e-commerce/pulls/51/comments"},"review_comment":{"href":"https://api.github.com/repos/ashatat/e-commerce/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/ashatat/e-commerce/pulls/51/commits"},"statuses":{"href":"https://api.github.com/repos/ashatat/e-commerce/statuses/67720a8b3eacb27b2d81202990662796864da4e4"}},"author_association":"OWNER"}}
{"actor":{"display_login":"ashatat"}}