Replaced all :key instances with unique ids rather than an index

frontend/src/components/AddToPlaylistDropdown.vue

@@ -25,7 +25,7 @@
 				class="nav-item"
 				href="#"
 				v-for="(playlist, index) in playlists"
-				:key="index"
+				:key="playlist._id"
 				@click.prevent="toggleSongInPlaylist(index)"
 				:title="playlist.displayName"
 			>

frontend/src/components/Queue.vue

@@ -18,7 +18,7 @@
 			>
 				<song-item
 					v-for="(song, index) in queue"
-					:key="`queue-${index}`"
+					:key="`queue-${song._id}`"
 					:song="song"
 					:requested-by="
 						station.type === 'community' &&

frontend/src/components/modals/EditNews.vue

@@ -36,9 +36,9 @@
 						>
 					</p>
 					<span
-						v-for="(bug, index) in news.bugs"
+						v-for="bug in news.bugs"
 						class="tag is-info"
-						:key="index"
+						:key="bug"
 					>
 						{{ bug }}
 						<button
@@ -65,9 +65,9 @@
 						>
 					</p>
 					<span
-						v-for="(feature, index) in news.features"
+						v-for="feature in news.features"
 						class="tag is-info"
-						:key="index"
+						:key="feature"
 					>
 						{{ feature }}
 						<button
@@ -97,9 +97,9 @@
 						>
 					</p>
 					<span
-						v-for="(improvement, index) in news.improvements"
+						v-for="improvement in news.improvements"
 						class="tag is-info"
-						:key="index"
+						:key="improvement"
 					>
 						{{ improvement }}
 						<button
@@ -126,9 +126,9 @@
 						>
 					</p>
 					<span
-						v-for="(upcoming, index) in news.upcoming"
+						v-for="upcoming in news.upcoming"
 						class="tag is-info"
-						:key="index"
+						:key="upcoming"
 					>
 						{{ upcoming }}
 						<button

frontend/src/components/modals/EditPlaylist.vue

@@ -160,7 +160,7 @@
 					>
 						<search-query-item
 							v-for="(result, index) in search.songs.results"
-							:key="index"
+							:key="result.id"
 							:result="result"
 						>
 							<div slot="actions">
@@ -241,7 +241,7 @@
 							>
 								<li
 									v-for="(song, index) in playlist.songs"
-									:key="'key-' + song._id"
+									:key="`key-${song._id}`"
 								>
 									<song-item
 										:song="song"

frontend/src/components/modals/EditSong.vue

@@ -193,17 +193,16 @@
 										class="autosuggest-item"
 										tabindex="0"
 										@click="selectArtistAutosuggest(item)"
-										v-for="(item,
-										index) in artistAutosuggestItems"
-										:key="index"
+										v-for="item in artistAutosuggestItems"
+										:key="item"
 										>{{ item }}</span
 									>
 								</div>
 								<div class="list-container">
 									<div
 										class="list-item"
-										v-for="(artist, index) in song.artists"
-										:key="index"
+										v-for="artist in song.artists"
+										:key="artist"
 									>
 										<div
 											class="list-item-circle"
@@ -265,17 +264,16 @@
 									<span
 										class="autosuggest-item"
 										@click="selectGenreAutosuggest(item)"
-										v-for="(item,
-										index) in genreAutosuggestItems"
-										:key="index"
+										v-for="item in genreAutosuggestItems"
+										:key="item"
 										>{{ item }}</span
 									>
 								</div>
 								<div class="list-container">
 									<div
 										class="list-item"
-										v-for="(genre, index) in song.genres"
-										:key="index"
+										v-for="genre in song.genres"
+										:key="genre"
 									>
 										<div
 											class="list-item-circle"
@@ -381,7 +379,7 @@
 							<div
 								class="api-result"
 								v-for="(result, index) in discogs.apiResults"
-								:key="index"
+								:key="result.album.id"
 								tabindex="0"
 								@keydown.space.prevent
 								@keyup.enter="toggleAPIResult(index)"
@@ -441,7 +439,9 @@
 											tabindex="0"
 											v-for="(track,
 											trackIndex) in result.tracks"
-											:key="trackIndex"
+											:key="
+												`${track.position}-${track.title}`
+											"
 											@click="
 												selectTrack(index, trackIndex)
 											"
@@ -593,10 +593,10 @@ export default {
 	},
 	watch: {
 		/* eslint-disable */
-		"song.duration": function () {
+		"song.duration": function() {
 			this.drawCanvas();
 		},
-		"song.skipDuration": function () {
+		"song.skipDuration": function() {
 			this.drawCanvas();
 		}
 		/* eslint-enable */

frontend/src/components/modals/ManageStation/Tabs/Blacklist.vue

@@ -25,8 +25,8 @@
 				<div v-if="excludedPlaylists.length > 0">
 					<playlist-item
 						:playlist="playlist"
-						v-for="(playlist, index) in excludedPlaylists"
-						:key="'key-' + index"
+						v-for="playlist in excludedPlaylists"
+						:key="`key-${playlist._id}`"
 					>
 						<div class="icons-group" slot="actions">
 							<confirm @confirm="deselectPlaylist(playlist._id)">

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -28,8 +28,8 @@
 			<div class="tab" v-show="tab === 'current'">
 				<div v-if="currentPlaylists.length > 0">
 					<playlist-item
-						v-for="(playlist, index) in currentPlaylists"
-						:key="'key-' + index"
+						v-for="playlist in currentPlaylists"
+						:key="`key-${playlist._id}`"
 						:playlist="playlist"
 						:show-owner="true"
 					>
@@ -106,8 +106,8 @@
 				</div>
 				<div v-if="search.results.length > 0">
 					<playlist-item
-						v-for="(playlist, index) in search.results"
-						:key="'searchKey-' + index"
+						v-for="playlist in search.results"
+						:key="`searchKey-${playlist._id}`"
 						:playlist="playlist"
 						:show-owner="true"
 					>

frontend/src/components/modals/ManageStation/Tabs/Search.vue

@@ -21,8 +21,8 @@
 			</div>
 			<div v-if="musareSearch.results.length > 0">
 				<song-item
-					v-for="(song, index) in musareSearch.results"
-					:key="index + song._id"
+					v-for="song in musareSearch.results"
+					:key="song._id"
 					:song="song"
 				>
 					<div class="song-actions" slot="actions">
@@ -69,7 +69,7 @@
 			<div v-if="search.songs.results.length > 0" id="song-query-results">
 				<search-query-item
 					v-for="(result, index) in search.songs.results"
-					:key="index"
+					:key="result.id"
 					:result="result"
 				>
 					<div slot="actions">

frontend/src/components/modals/Report.vue

@@ -84,15 +84,15 @@
 			<div class="edit-report-wrapper">
 				<div class="columns is-multiline">
 					<div
-						v-for="(issue, issueIndex) in issues"
+						v-for="issue in issues"
 						class="column is-half"
-						:key="issueIndex"
+						:key="issue.name"
 					>
 						<label class="label">{{ issue.name }}</label>
 						<p
-							v-for="(reason, reasonIndex) in issue.reasons"
+							v-for="reason in issue.reasons"
 							class="control"
-							:key="reasonIndex"
+							:key="reason"
 						>
 							<label class="checkbox">
 								<input

frontend/src/components/modals/RequestSong.vue

@@ -42,7 +42,7 @@
 				>
 					<search-query-item
 						v-for="(result, index) in search.songs.results"
-						:key="index"
+						:key="result.id"
 						:result="result"
 					>
 						<div slot="actions">

frontend/src/components/modals/ViewReport.vue

@@ -50,7 +50,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(issue, index) in report.issues" :key="index">
+					<tr v-for="issue in report.issues" :key="issue.name">
 						<td>
 							<span>{{ issue.name }}</span>
 						</td>

frontend/src/components/modals/WhatIsNew.vue

@@ -22,10 +22,7 @@
 						The features are so great
 					</div>
 					<ul class="sect-body">
-						<li
-							v-for="(feature, index) in news.features"
-							:key="index"
-						>
+						<li v-for="feature in news.features" :key="feature">
 							{{ feature }}
 						</li>
 					</ul>
@@ -34,8 +31,8 @@
 					<div class="sect-head-improvements">Improvements</div>
 					<ul class="sect-body">
 						<li
-							v-for="(improvement, index) in news.improvements"
-							:key="index"
+							v-for="improvement in news.improvements"
+							:key="improvement"
 						>
 							{{ improvement }}
 						</li>
@@ -44,7 +41,7 @@
 				<div v-show="news.bugs.length > 0" class="sect">
 					<div class="sect-head-bugs">Bugs Smashed</div>
 					<ul class="sect-body">
-						<li v-for="(bug, index) in news.bugs" :key="index">
+						<li v-for="bug in news.bugs" :key="bug">
 							{{ bug }}
 						</li>
 					</ul>
@@ -54,10 +51,7 @@
 						Coming Soon to a Musare near you
 					</div>
 					<ul class="sect-body">
-						<li
-							v-for="(upcoming, index) in news.upcoming"
-							:key="index"
-						>
+						<li v-for="upcoming in news.upcoming" :key="upcoming">
 							{{ upcoming }}
 						</li>
 					</ul>

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -44,7 +44,7 @@
 				<tbody>
 					<tr
 						v-for="(song, index) in filteredSongs"
-						:key="index"
+						:key="song._id"
 						tabindex="0"
 						@keydown.up.prevent
 						@keydown.down.prevent

frontend/src/pages/Admin/tabs/News.vue

@@ -15,7 +15,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(news, index) in news" :key="index">
+					<tr v-for="news in news" :key="news._id">
 						<td>
 							<strong>{{ news.title }}</strong>
 						</td>
@@ -87,7 +87,7 @@
 								</p>
 								<span
 									v-for="(bug, index) in creating.bugs"
-									:key="index"
+									:key="bug"
 									class="tag is-info"
 								>
 									{{ bug }}
@@ -117,7 +117,7 @@
 								<span
 									v-for="(feature,
 									index) in creating.features"
-									:key="index"
+									:key="feature"
 									class="tag is-info"
 								>
 									{{ feature }}
@@ -150,7 +150,7 @@
 								<span
 									v-for="(improvement,
 									index) in creating.improvements"
-									:key="index"
+									:key="improvement"
 									class="tag is-info"
 								>
 									{{ improvement }}
@@ -182,7 +182,7 @@
 								<span
 									v-for="(upcoming,
 									index) in creating.upcoming"
-									:key="index"
+									:key="upcoming"
 									class="tag is-info"
 								>
 									{{ upcoming }}

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -14,8 +14,8 @@
 				</thead>
 				<tbody>
 					<tr
-						v-for="(punishment, index) in sortedPunishments"
-						:key="index"
+						v-for="punishment in sortedPunishments"
+						:key="punishment._id"
 					>
 						<td v-if="punishment.type === 'banUserId'">User ID</td>
 						<td v-else>IP Address</td>

frontend/src/pages/Admin/tabs/Reports.vue

@@ -13,7 +13,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(report, index) in reports" :key="index">
+					<tr v-for="report in reports" :key="report._id">
 						<td>
 							<span>
 								{{ report.song.youtubeId }}

frontend/src/pages/Admin/tabs/Stations.vue

@@ -20,7 +20,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(station, index) in stations" :key="index">
+					<tr v-for="station in stations" :key="station._id">
 						<td>
 							<span>{{ station._id }}</span>
 						</td>
@@ -124,7 +124,7 @@
 								</p>
 								<span
 									v-for="(genre, index) in newStation.genres"
-									:key="index"
+									:key="genre"
 									class="tag is-info"
 								>
 									{{ genre }}
@@ -153,7 +153,7 @@
 								<span
 									v-for="(genre,
 									index) in newStation.blacklistedGenres"
-									:key="index"
+									:key="genre"
 									class="tag is-info"
 								>
 									{{ genre }}

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -43,8 +43,8 @@
 				</thead>
 				<tbody>
 					<tr
-						v-for="(song, index) in filteredSongs"
-						:key="index"
+						v-for="song in filteredSongs"
+						:key="song._id"
 						tabindex="0"
 						@keydown.up.prevent
 						@keydown.down.prevent

frontend/src/pages/Admin/tabs/Users.vue

@@ -20,7 +20,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(user, index) in users" :key="index">
+					<tr v-for="user in users" :key="user._id">
 						<td>
 							<profile-picture
 								:avatar="user.avatar"

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -80,7 +80,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(song, index) in filteredSongs" :key="index">
+					<tr v-for="(song, index) in filteredSongs" :key="song._id">
 						<td>
 							<img
 								class="song-thumbnail"

frontend/src/pages/Home.vue

@@ -54,8 +54,8 @@
 						:name="!drag ? 'draggable-list-transition' : null"
 					>
 						<router-link
-							v-for="(station, index) in favoriteStations"
-							:key="`key-${index}`"
+							v-for="station in favoriteStations"
+							:key="`key-${station._id}`"
 							:to="{
 								name: 'station',
 								params: { id: station.name }
@@ -280,8 +280,8 @@
 				</a>
 
 				<router-link
-					v-for="(station, index) in filteredStations"
-					:key="index"
+					v-for="station in filteredStations"
+					:key="station._id"
 					:to="{
 						name: 'station',
 						params: { id: station.name }

frontend/src/pages/News.vue

@@ -5,8 +5,8 @@
 		<div class="container">
 			<div class="content-wrapper">
 				<div
-					v-for="(item, index) in news"
-					:key="index"
+					v-for="item in news"
+					:key="item._id"
 					class="card is-fullwidth"
 				>
 					<header class="card-header">
@@ -24,9 +24,8 @@
 							</div>
 							<ul class="sect-body">
 								<li
-									v-for="(feature,
-									itemIndex) in item.features"
-									:key="itemIndex"
+									v-for="feature in item.features"
+									:key="feature"
 								>
 									{{ feature }}
 								</li>
@@ -38,9 +37,8 @@
 							</div>
 							<ul class="sect-body">
 								<li
-									v-for="(improvement,
-									itemIndex) in item.improvements"
-									:key="itemIndex"
+									v-for="improvement in item.improvements"
+									:key="improvement"
 								>
 									{{ improvement }}
 								</li>
@@ -49,10 +47,7 @@
 						<div v-show="item.bugs.length > 0" class="sect">
 							<div class="sect-head-bugs">Bugs Smashed</div>
 							<ul class="sect-body">
-								<li
-									v-for="(bug, itemIndex) in item.bugs"
-									:key="itemIndex"
-								>
+								<li v-for="bug in item.bugs" :key="bug">
 									{{ bug }}
 								</li>
 							</ul>
@@ -63,9 +58,8 @@
 							</div>
 							<ul class="sect-body">
 								<li
-									v-for="(upcoming,
-									itemIndex) in item.upcoming"
-									:key="itemIndex"
+									v-for="upcoming in item.upcoming"
+									:key="upcoming"
 								>
 									{{ upcoming }}
 								</li>

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -15,8 +15,8 @@
 			>
 				<playlist-item
 					:playlist="playlist"
-					v-for="(playlist, index) in playlists"
-					:key="'key-' + index"
+					v-for="playlist in playlists"
+					:key="`key-${playlist._id}`"
 					class="item-draggable"
 				>
 					<div class="icons-group" slot="actions">

frontend/src/pages/Station/Sidebar/Users.vue

@@ -34,7 +34,7 @@
 
 		<aside class="menu">
 			<ul class="menu-list scrollable-list">
-				<li v-for="(user, index) in users.loggedIn" :key="index">
+				<li v-for="user in users.loggedIn" :key="user.username">
 					<router-link
 						:to="{
 							name: 'profile',

frontend/src/pages/Team.vue

@@ -6,8 +6,8 @@
 			<h2 class="has-text-centered">Current Team</h2>
 			<div class="group">
 				<div
-					v-for="(member, index) in currentTeam"
-					:key="index"
+					v-for="member in currentTeam"
+					:key="member.name"
 					class="card"
 				>
 					<header class="card-header">
@@ -38,9 +38,8 @@
 						></div>
 						<div v-if="member.projects" class="projects">
 							<a
-								v-for="(project,
-								projectIndex) in member.projects"
-								:key="projectIndex"
+								v-for="project in member.projects"
+								:key="project"
 								:href="
 									'https://github.com/Musare/' +
 										project +
@@ -58,8 +57,8 @@
 			<h3 class="has-text-centered">Previous Team</h3>
 			<div class="group">
 				<div
-					v-for="(member, index) in previousTeam"
-					:key="index"
+					v-for="member in previousTeam"
+					:key="member.name"
 					class="card"
 				>
 					<header class="card-header">
@@ -90,9 +89,8 @@
 						></div>
 						<div v-if="member.projects" class="projects">
 							<a
-								v-for="(project,
-								projectIndex) in member.projects"
-								:key="projectIndex"
+								v-for="project in member.projects"
+								:key="project"
 								:href="
 									'https://github.com/Musare/' +
 										project +
@@ -111,8 +109,8 @@
 				<h4>Other Contributors</h4>
 				<div>
 					<a
-						v-for="(member, index) in otherContributors"
-						:key="index"
+						v-for="member in otherContributors"
+						:key="member.name"
 						:href="member.link"
 						target="_blank"
 					>