Fixed errors with undefined tags

frontend/src/components/dashboard/AddTagsMenu.tsx

@@ -6,10 +6,12 @@ import { Menu, Transition } from '@headlessui/react';
 import { Tag } from 'public/data/frequentInterfaces';
 
 /**
- * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
+ * This is the menu that is used to add more tags to a secret
  * @param {object} obj
- * @param {SecretDataProps[]} obj.data - 
+ * @param {Tag[]} obj.allTags - all available tags for a vertain project
- * 
+ * @param {Tag[]} obj.currentTags - currently selected tags for a certain secret
+ * @param {function} obj.modifyTags - modify tags for a certain secret
+ * @param {Tag[]} obj.position - currently selected tags for a certain secret
  */
 const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], position: number) => void; position: number; }) => {
   const router = useRouter();
@@ -21,7 +23,7 @@ const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags:
       >
         <div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
           <FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
-          {currentTags.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
+          {currentTags?.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
         </div>
       </Menu.Button>
       <Transition
@@ -38,10 +40,10 @@ const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags:
             <Menu.Item key={tag._id}>
               <button
                 type="button"
-                className={`${currentTags.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
+                className={`${currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
-                onClick={() => {if (!currentTags.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
+                onClick={() => {if (!currentTags?.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
               >
-                {currentTags.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
+                {currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
               </button>
             </Menu.Item>
           )})}

frontend/src/components/dashboard/KeyPair.tsx

@@ -140,7 +140,7 @@ const KeyPair = ({
       </div>
       <div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
         <div className="flex items-center max-h-16">
-          {keyPair.tags.map((tag, index) => (
+          {keyPair.tags?.map((tag, index) => (
             index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.colorText} flex items-center`}>
               <span className='mb-0.5 cursor-default'>{tag.name}</span>
               <FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag._id !== tag._id), keyPair.pos)}/>

frontend/src/pages/dashboard/[id].tsx

@@ -446,8 +446,8 @@ export default function Dashboard() {
                 initDataPoint.key ||
               newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
                 initDataPoint.comment) ||
-              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].tags !==
+              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !==
-                initDataPoint.tags
+                initDataPoint?.tags
         )
         .map((secret) => secret.id)
         .includes(newDataPoint.id)
@@ -498,8 +498,7 @@ export default function Dashboard() {
                   initDataPoint.key ||
                 newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
                   .comment !== initDataPoint.comment ||
-                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
+                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !== initDataPoint?.tags)
-                  .tags !== initDataPoint.tags)
           )
           .map((secret) => secret.id)
           .includes(newDataPoint.id)
@@ -877,7 +876,7 @@ export default function Dashboard() {
                         .map((keyPair) => (
                           <KeyPair
                             isCapitalized={autoCapitalization}
-                            key={keyPair.id}
+                            key={keyPair.id ? keyPair.id : keyPair.idOverride}
                             keyPair={keyPair}
                             modifyValue={listenChangeValue}
                             modifyValueOverride={listenChangeValueOverride}