added doc and cleaned code

src/components/UserProfileComponents/RatingComponents/RatingModal.vue

 <template>
-  <!-- Main modal -->
+  <!-- Main modal for rating -->
   <div
     v-if="visible"
     class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
@@ -58,6 +58,7 @@
           />
         </div>
 
+        <!-- 5 rating stars -->
         <div class="flex items-center justify-center mb-8">
           <svg
             class="w-10 h-10 text-warn cursor-pointer"
@@ -121,13 +122,13 @@
           </svg>
         </div>
 
+        <!-- Button for submitting the rating -->
         <div class="flex justify-center mb-4">
           <Button :text="'Send en vurdering'" @click="sendRating"></Button>
         </div>
 
         <!-- Modal footer -->
         <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
-          <!-- Slot: Add any html you want here -->
           <slot />
         </div>
       </div>
@@ -166,6 +167,7 @@ export default {
     Button,
   },
   methods: {
+    //A method for setting the rating
     setRating(ratingNumber) {
       this.score = ratingNumber;
       for (let i = 0; i < 5; i++) {
@@ -179,6 +181,10 @@ export default {
     close() {
       this.$emit("close");
     },
+    /**
+     * A method for sending the rating when button is clicked.
+     * It posts the rating to the db.
+     */
     async sendRating() {
       const ratingInfo = {
         score: this.score,

src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue

 <template>
+  <!-- A card for a rent history containing the item's title,
+       name of the person who rented it, dates/renting period, and a button
+       to rate if not already rated it. -->
   <div
     class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50"
   >
+    <!-- Title -->
     <p class="font-bold mx-4" id="title">
       {{ historyItem.listing.title }}
     </p>
+
+    <!-- Name of the user who rented -->
     <div class="flex flex-row items-center">
       <div class="flex flex-col px-4 flex-1">
         <router-link :to="{ path: '/profile/' + user.userId }">
           Leid til: {{ user.firstName }} {{ user.lastName }}
         </router-link>
       </div>
+
+      <!-- Period it was rented for -->
       <div class="flex flex-col flex-1">
         <div>
           Fra:
@@ -20,6 +28,8 @@
           Til: {{ this.getDateString(historyItem.toTime, isMultipleDays) }}
         </div>
       </div>
+
+      <!-- Button to rate -->
       <colored-button
         v-if="!isRated"
         :text="'Vurder'"
@@ -74,12 +84,16 @@ export default {
     currentUser() {
       return parseCurrentUser();
     },
+    //Checks if the rent period was multiple days or not
     isMultipleDays() {
       if (this.historyItem.toTime - this.historyItem.fromTime < 86400000) {
         return false;
       }
       return true;
     },
+    /**
+     * computed the total price based on how long the renting period was.
+     */
     price() {
       if (this.isMultipleDays) {
         let numDays = Math.round(
@@ -89,11 +103,17 @@ export default {
       }
       return this.historyItem.listing.pricePerDay;
     },
+    /**
+     * Checks if the user rented its own item
+     */
     currentUserIsRenter() {
       return this.isCurrentUser(this.historyItem.renterId);
     },
   },
   methods: {
+    /**
+     * returns a date as a string
+     */
     getDateString(milliseconds) {
       let today = new Date();
       let date = new Date(milliseconds);
@@ -111,6 +131,9 @@ export default {
       return id == this.currentUser.accountId;
     },
   },
+  /**
+   * Gets the user and checks if a rating is saved, before mounting the page.
+   */
   async beforeCreate() {
     if (this.currentUserIsRenter) {
       this.user = await userService.getUserFromId(