complete chapter 5

src/components/UserProfile.vue

@@ -7,6 +7,25 @@
         <strong>Followers:</strong>
         {{followers}}
       </div>
+      <form class="user-profile__create-twoot" @submit.prevent="createNewTwoot">
+        <label for="newToot">
+          <strong>New Twoot</strong>
+        </label>
+        <textarea id="newToot" rows="4" v-model="newTwootContent" />
+        <div class="user-profile_create-twoot-type">
+          <label for="newTwootType">
+            <strong>Type:</strong>
+          </label>
+          <select id="newTwootType" v-model="selectedTwootType">
+            <option
+              :value="option.value"
+              v-for="(option, index) in twootTypes"
+              :key="index"
+            >{{ option.name }}</option>
+          </select>
+        </div>
+        <button>Twoot!</button>
+      </form>
     </div>
     <div class="user-profile_twoots-wrapper">
       <TwootItem
@@ -28,6 +47,12 @@ export default {
   components: { TwootItem },
   data() {
     return {
+      newTwootContent: "",
+      selectedTwootType: "instant",
+      twootTypes: [
+        { value: "draft", name: "Draft" },
+        { value: "instant", name: "Instant twoot" },
+      ],
       followers: 0,
       user: {
         id: 1,
@@ -36,10 +61,7 @@ export default {
         lastName: "is cool",
         email: "me@ssene.ca",
         isAdmin: true,
-        twoots: [
-          { id: 1, content: "cat" },
-          { id: 2, content: "dog" },
-        ],
+        twoots: [],
       },
     };
   },
@@ -62,6 +84,15 @@ export default {
     toggleFavourite(id) {
       console.log(`Favourited tweet #${id}`);
     },
+    createNewTwoot() {
+      if (this.newTwootContent && this.selectedTwootType !== "draft") {
+        this.user.twoots.unshift({
+          id: this.user.twoots.length + 1,
+          content: this.newTwootContent,
+        });
+        this.newTwootContent = "";
+      }
+    },
   },
   mounted() {
     this.followUser();
@@ -99,4 +130,15 @@ export default {
 h1 {
   margin: 0;
 }
+
+.user-profile__twoots-wrapper {
+  display: grid;
+  grid-gap: 10px;
+}
+
+.user-profile__create-twoot {
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
 </style>