Merge pull request #5 from denOldTimer/chapter-four

chapter four - refactoring behind the scenes

README.md

@@ -146,3 +146,5 @@ Lifecycle hooks : { [beforeCreated], [created], [beforeMount], [mounted],
 [conditionals]: https://v3.vuejs.org/guide/conditional.html
 [v-if]: https://v3.vuejs.org/guide/conditional.html#v-if
 [v-for]: https://v3.vuejs.org/guide/list.html#mapping-an-array-to-elements-with-v-for
+
+4. Refactoring behaind the sences: new component TwootItem

src/components/TwootItem.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="twoot-item">
+    <div class="user-profile__twoot">
+      <div class="twoot-item__user">@{{ username }}</div>
+      <div class="twoot-item__content">
+        {{ twoot.content }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "TwootItem",
+    props: {
+        username: {
+            type: String,
+            required: true
+        },
+        twoot: {
+            type: Object,
+            required: true 
+        }
+    }
+}
+</script>
+
+<style>
+.twoot-item {
+  padding: 20px;
+  background-color: white;
+  border-radius: 5px;
+  border: 1px solid #dfe3e8;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.twoot-item:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.twoot-item__user {
+  font-weight: bold;
+}
+</style>

src/components/UserProfile.vue

@@ -8,20 +8,21 @@
       </div>
     </div>
     <div class="user-profile__twoots-wrapper">
-      <div
-        class="user-profile__twoot"
+      <TwootItem
         v-for="twoot in user.twoots"
         :key="twoot.id"
-      >
-        {{ twoot.content }}
-      </div>
+        :username="user.username"
+        :twoot="twoot"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import TwootItem from './TwootItem';
 export default {
     name:"UserProfile",
+    components: { TwootItem },
     data(){
     return {
      followers: 0,
@@ -92,6 +93,11 @@ export default {
   font-weight: bold;
 }
 
+.user-profile__twoots-wrapper {
+  display: grid;
+  grid-gap: 10px;
+}
+
 h1 {
   margin: 0;
 }