Merge branch 'doc-community-components' into 'main'

Added documentation and cleaned code

See merge request !147

src/components/CommunityComponents/CommunityHamburger.vue

 <template>
+  <!-- Hamburger menu for community header, contains options for adding a new listing,
+       seeing all members in the community, administrating the community if admin and
+       leaving the community -->
   <div
     id="dropdown"
     class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"

src/components/CommunityComponents/CommunityHeader.vue

 <template>
+  <!-- Community header contains the community's name and address, a join button if
+       the user is not in the community and community hamburger menu if the user is
+       in the community -->
   <div>
+    <!-- A warning asking user is it is sure it wants to leave the community when leave community
+         from hamburger menu is clicked -->
     <CustomFooterModal
       :title="'Er du sikker på at du vil forlate felleskapet?'"
       :message="'Dersom felleskapet er låst er du nødt til å spørre om å bli med på nytt.'"
@@ -20,9 +25,13 @@
         />
       </div>
     </CustomFooterModal>
+
+    <!-- The load spinner will show while community and it's members are being loaded from the db -->
     <div v-if="loading" class="flex place-content-center mx-4">
       <LoaderSpinner />
     </div>
+
+    <!-- After loaded the community header shows -->
     <div v-else class="flex items-center justify-between mx-4">
       <router-link
         :to="'/community/' + community.communityId"
@@ -97,7 +106,6 @@
             :community-i-d="community.communityId"
             :admin="admin"
           />
-          <!-- class="absolute" -->
         </div>
       </div>
     </div>

src/components/CommunityComponents/CommunityHome.vue

 <template>
+  <!-- The community home page, shows all the items in the community with the possibility of
+       clicking on an item to be redirected to the item info page -->
   <div>
+    <!-- Shows loading component while loading the content for the page -->
     <div v-if="loading" class="flex place-content-center">
       <LoaderSpinner />
     </div>
+    <!-- When finish loading the home page for community is shown -->
     <section v-else class="w-full px-5 py-4 mx-auto rounded-md">
       <CommunityHeader :admin="false" class="mb-5" />
 
@@ -27,7 +31,7 @@
           <input
             type="text"
             class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
-            placeholder="Search"
+            placeholder="Søk"
             v-model="search"
             @change="searchWritten"
           />

src/components/CommunityComponents/CommunityList.vue

 <template>
+  <!-- A list conatining all the communities -->
   <p v-if="!communities.length" class="flex place-content-center text-gray-400">
     Ingen grupper
   </p>

src/components/CommunityComponents/CommunityListItem.vue

@@ -39,7 +39,7 @@
         />
       </div>
 
-      <!-- If a user is not logges in and tries to join a community, this message shows -->
+      <!-- If a user is not logged in and tries to join a community, this message shows -->
       <div class="flex justify-center p-2">
         <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
           {{ responseToUser }}

src/components/CommunityComponents/CommunityRequestForm.vue

 <template>
+  <!-- A request form for joining a private community -->
   <div
     class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
@@ -99,7 +100,6 @@ export default {
     routeToHome() {
       this.$router.push("/");
     },
-    //TODO fix so that community id is set (not null)
     async saveClicked() {
       this.communityID = await this.$router.currentRoute.value.params
         .communityID;

src/components/CommunityComponents/MemberList.vue

 <template>
+  <!-- Shows all members in a community -->
   <ul>
     <li v-for="member in members" :key="member.userId">
       <UserListItemCard :buttons="buttons" :user="member" />

src/components/CommunityComponents/NewCommunityForm.vue

 <template>
+  <!-- A form for creating a new community -->
   <div
     class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >

tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap

@@ -2,34 +2,46 @@
 
 exports[`CommunityHeader component renders correctly 1`] = `
 <div
-  adminstatus="true"
-  community="[object Object]"
+  data-v-app=""
 >
   
-  <!-- Main modal -->
-  <!--v-if-->
-  
+  <!-- Community header contains the community's name and address, a join button if
+       the user is not in the community and community hamburger menu if the user is
+       in the community -->
   <div
-    class="flex place-content-center mx-4"
+    adminstatus="true"
+    community="[object Object]"
   >
+    <!-- A warning asking user is it is sure it wants to leave the community when leave community
+         from hamburger menu is clicked -->
+    
+    <!-- Main modal -->
+    <!--v-if-->
+    
+    <!-- The load spinner will show while community and it's members are being loaded from the db -->
     <div
-      class="loadingio-spinner-bean-eater-o5tefvffeqm"
+      class="flex place-content-center mx-4"
     >
       <div
-        class="ldio-sweozsnwol"
+        class="loadingio-spinner-bean-eater-o5tefvffeqm"
       >
-        <div>
-          <div />
-          <div />
-          <div />
-        </div>
-        <div>
-          <div />
-          <div />
-          <div />
+        <div
+          class="ldio-sweozsnwol"
+        >
+          <div>
+            <div />
+            <div />
+            <div />
+          </div>
+          <div>
+            <div />
+            <div />
+            <div />
+          </div>
         </div>
       </div>
     </div>
   </div>
+  
 </div>
 `;

tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CommunityList component renders correctly 1`] = `
-<ul>
+<div
+  data-v-app=""
+>
   
-  <li>
-    <div
-      class="border-black"
-    >
-      
-      <!-- Main modal -->
-      <!--v-if-->
-      
+  <!-- A list conatining all the communities -->
+  <ul>
+    
+    <li>
       <div
-        class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+        class="border-black"
       >
+        
+        <!-- Main modal -->
+        <!--v-if-->
+        
         <div
-          class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
-        >
-          <img
-            alt="Fellsekaps bilde"
-            class="rounded-md"
-            src="string"
-          />
-        </div>
-        <div
-          class="flex-1 pl-1 overflow-hidden"
+          class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
         >
           <div
-            class="font-medium text-gray-800 dark:text-white truncate"
+            class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
           >
-            string
+            <img
+              alt="Fellsekaps bilde"
+              class="rounded-md"
+              src="string"
+            />
           </div>
-        </div>
-        <div
-          class="flex flex-row justify-center items-center"
-        >
-          <svg
-            aria-hidden="true"
-            class="max-h-6 max-w-6 shrink m-2"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="flex-1 pl-1 overflow-hidden"
           >
-            <path
-              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
+            <div
+              class="font-medium text-gray-800 dark:text-white truncate"
+            >
+              string
+            </div>
+          </div>
+          <div
+            class="flex flex-row justify-center items-center"
+          >
+            <svg
+              aria-hidden="true"
+              class="max-h-6 max-w-6 shrink m-2"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
         </div>
       </div>
-    </div>
-  </li>
-  <li>
-    <div
-      class="border-black"
-    >
-      
-      <!-- Main modal -->
-      <!--v-if-->
-      
+    </li>
+    <li>
       <div
-        class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+        class="border-black"
       >
+        
+        <!-- Main modal -->
+        <!--v-if-->
+        
         <div
-          class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
-        >
-          <img
-            alt="Fellsekaps bilde"
-            class="rounded-md"
-            src="string"
-          />
-        </div>
-        <div
-          class="flex-1 pl-1 overflow-hidden"
+          class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
         >
           <div
-            class="font-medium text-gray-800 dark:text-white truncate"
+            class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
           >
-            string
+            <img
+              alt="Fellsekaps bilde"
+              class="rounded-md"
+              src="string"
+            />
           </div>
-        </div>
-        <div
-          class="flex flex-row justify-center items-center"
-        >
-          <svg
-            aria-hidden="true"
-            class="max-h-6 max-w-6 shrink m-2"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="flex-1 pl-1 overflow-hidden"
           >
-            <path
-              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
+            <div
+              class="font-medium text-gray-800 dark:text-white truncate"
+            >
+              string
+            </div>
+          </div>
+          <div
+            class="flex flex-row justify-center items-center"
+          >
+            <svg
+              aria-hidden="true"
+              class="max-h-6 max-w-6 shrink m-2"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
         </div>
       </div>
-    </div>
-  </li>
+    </li>
+    
+  </ul>
   
-</ul>
+</div>
 `;

tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap

@@ -2,160 +2,167 @@
 
 exports[`CreateNewGroup elements rendering renders correctly 1`] = `
 <div
-  class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+  data-v-app=""
 >
-  <!-- Component heading -->
+  
+  <!-- A form for creating a new community -->
   <div
-    class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
+    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
-     Opprett ny gruppe 
-  </div>
-  <!-- Radio boxes -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="radioBoxLabel"
+    <!-- Component heading -->
+    <div
+      class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
     >
-      Synlighet
-    </label>
+       Opprett ny gruppe 
+    </div>
+    <!-- Radio boxes -->
     <div
-      class="form-check"
+      class="mt-6"
     >
-      <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-        id="flexRadioOpen"
-        name="flexRadioDefault"
-        type="radio"
-        value="Åpen"
-      />
       <label
-        class="form-check-label inline-block text-gray-800"
-        for="flexRadioOpen"
-        id="radioBoxOpenLabel"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="radioBoxLabel"
       >
-         Åpen 
+        Synlighet
       </label>
+      <div
+        class="form-check"
+      >
+        <input
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          id="flexRadioOpen"
+          name="flexRadioDefault"
+          type="radio"
+          value="Åpen"
+        />
+        <label
+          class="form-check-label inline-block text-gray-800"
+          for="flexRadioOpen"
+          id="radioBoxOpenLabel"
+        >
+           Åpen 
+        </label>
+      </div>
+      <div
+        class="form-check"
+      >
+        <input
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          id="flexRadioPrivate"
+          name="flexRadioDefault"
+          type="radio"
+          value="Privat"
+        />
+        <label
+          class="form-check-label inline-block text-gray-800"
+          for="flexRadioPrivate"
+          id="radioBoxPrivateLabel"
+        >
+           Privat 
+        </label>
+      </div>
     </div>
+    <!-- Title -->
     <div
-      class="form-check"
+      class="mt-6"
     >
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="titleLabel"
+      >
+        Gruppenavn
+      </label>
       <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-        id="flexRadioPrivate"
-        name="flexRadioDefault"
-        type="radio"
-        value="Privat"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="title"
+        required=""
+        type="text"
       />
+      <!-- error message for title-->
+      
+      
+    </div>
+    <!-- Place -->
+    <div
+      class="mt-6"
+    >
       <label
-        class="form-check-label inline-block text-gray-800"
-        for="flexRadioPrivate"
-        id="radioBoxPrivateLabel"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="positionLabel"
       >
-         Privat 
+        By/Sted
       </label>
+      <input
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        required=""
+        type="text"
+      />
+      <!-- error message for place-->
+      
+      
     </div>
-  </div>
-  <!-- Title -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="titleLabel"
-    >
-      Gruppenavn
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="title"
-      required=""
-      type="text"
-    />
-    <!-- error message for title-->
-    
-    
-  </div>
-  <!-- Place -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="positionLabel"
-    >
-      By/Sted
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      required=""
-      type="text"
-    />
-    <!-- error message for place-->
-    
-    
-  </div>
-  <!-- Description -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="descriptionLabel"
-    >
-      Beskrivelse
-    </label>
-    <textarea
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="description"
-      required=""
-      rows="4"
-    />
-    <!-- error message for description -->
-    
-    
-  </div>
-  <!-- Images -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="imageLabel"
+    <!-- Description -->
+    <div
+      class="mt-6"
     >
-       Bilde (bildet må være .png) 
-    </label>
-    <input
-      accept="image/png"
-      multiple=""
-      style="display: none;"
-      type="file"
-    />
-    <!-- Button for adding an image -->
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="descriptionLabel"
+      >
+        Beskrivelse
+      </label>
+      <textarea
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="description"
+        required=""
+        rows="4"
+      />
+      <!-- error message for description -->
+      
+      
+    </div>
+    <!-- Images -->
     <div
-      class="inline-flex rounded-md shadow-sm"
+      class="mt-6"
     >
-      <!--&lt;div class="text-error uppercase text-center"&gt;Midlertidig fjernet&lt;/div&gt; -->
-      <button
-        class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="imageLabel"
+      >
+         Bilde (bildet må være .png) 
+      </label>
+      <input
+        accept="image/png"
+        multiple=""
+        style="display: none;"
+        type="file"
+      />
+      <!-- Button for adding an image -->
+      <div
+        class="inline-flex rounded-md shadow-sm"
       >
-         Velg bilde 
-      </button>
+        <!--&lt;div class="text-error uppercase text-center"&gt;Midlertidig fjernet&lt;/div&gt; -->
+        <button
+          class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+        >
+           Velg bilde 
+        </button>
+      </div>
+      <!-- Div box for showing all chosen images -->
+      
+      
+    </div>
+    <!-- Save item button -->
+    <div
+      class="flex justify-center mt-10 float-right"
+    >
+      <button-stub
+        buttoncolor="blue"
+        id="saveButton"
+        text="Lagre"
+      />
     </div>
-    <!-- Div box for showing all chosen images -->
-    
-    
-  </div>
-  <!-- Save item button -->
-  <div
-    class="flex justify-center mt-10 float-right"
-  >
-    <button-stub
-      buttoncolor="blue"
-      id="saveButton"
-      text="Lagre"
-    />
   </div>
+  
 </div>
 `;