Use navigatemixin to navigate to files

Author: surajp

force-app/main/default/lwc/filePreviewCol/filePreviewCol.html

@@ -1,5 +1,5 @@
 <template>
-  <a href={url} onmouseover={handleMouseOver} onmouseout={handleMouseOut}>{label}</a>
+  <a href="javascript:void(0)" onmouseover={handleMouseOver} onmouseout={handleMouseOut} onclick={navigateToFile}>{label}</a>
   <template if:true={showPreview}>
     <div class="overlay">
       <c-file-preview-comp file-id={fileOrVersionId} height-in-rem="1.25"></c-file-preview-comp>

force-app/main/default/lwc/filePreviewCol/filePreviewCol.js

@@ -1,15 +1,24 @@
 import { LightningElement, api } from "lwc";
-import { baseNavigation } from "lightning/datatableKeyboardMixins";
-import template from "./filePreviewCol.html";
+import { NavigationMixin } from "lightning/navigation";
 
-export default class FilePreviewCol extends LightningElement {
+export default class FilePreviewCol extends NavigationMixin(LightningElement) {
   showPreview = false;
-  @api fileId = "";
   @api label = "";
   @api versionId = "";
+  @api fileId = "";
 
-  get url() {
-    return this.fileId ? "/" + this.fileId : "#";
+  navigateToFile(event) {
+    event.preventDefault();
+    this[NavigationMixin.Navigate]({
+      type: "standard__namedPage",
+      attributes: {
+        pageName: "filePreview"
+      },
+      state: {
+        recordIds: this.fileId,
+        selectedRecordId: this.fileId
+      }
+    });
   }
 
   get fileOrVersionId() {

force-app/main/default/lwc/filesRelatedList/filesRelatedList.js

@@ -112,7 +112,7 @@ export default class FilesRelatedList extends LightningElement {
     const selectedRowIds = this.template
       .querySelector("c-custom-datatable[data-tablename='filestable']")
       .getSelectedRows()
-      .map((row) => row.id);
+      .map(row => row.id);
     if (selectedRowIds.length > 0) {
       let decision = confirm(
         `Are you sure you want to delete ${selectedRowIds.length} records?`
@@ -125,7 +125,7 @@ export default class FilesRelatedList extends LightningElement {
 
   _deleteRecord(recordIds) {
     //{{{
-    Promise.all(recordIds.map((id) => deleteRecord(id)))
+    Promise.all(recordIds.map(id => deleteRecord(id)))
       .then(() => {
         refreshApex(this._filesList);
         this.dispatchEvent(
@@ -135,7 +135,7 @@ export default class FilesRelatedList extends LightningElement {
           })
         );
       })
-      .catch((err) => {
+      .catch(err => {
         this.dispatchEvent(
           new ShowToastEvent({
             variant: "error",
@@ -157,12 +157,12 @@ export default class FilesRelatedList extends LightningElement {
     //{{{
     console.log(">> file version details");
     getFileVersionDetails({ fileId: this._currentDocId })
-      .then((result) => {
+      .then(result => {
         console.log(">> version details " + JSON.stringify(result));
         this.versionDetails = result;
         this.showModal = true;
       })
-      .catch((err) => {
+      .catch(err => {
         console.error(JSON.stringify(err));
       });
   } //}}}
@@ -194,7 +194,7 @@ export default class FilesRelatedList extends LightningElement {
       payload.ContentDocumentId = this._currentDocId;
     }
     createRecord({ apiName: "ContentVersion", fields: payload })
-      .then((cVersion) => {
+      .then(cVersion => {
         if (!this._currentDocId) {
           this._createContentDocLink(cVersion.id);
         } else {
@@ -207,7 +207,7 @@ export default class FilesRelatedList extends LightningElement {
           );
         }
       })
-      .catch((err) => {
+      .catch(err => {
         this.dispatchEvent(
           new ShowToastEvent({
             variant: "error",
@@ -223,7 +223,7 @@ export default class FilesRelatedList extends LightningElement {
       contentVersionId: cvId,
       recordId: this.recordId
     })
-      .then((cId) => {
+      .then(cId => {
         this.closeModal();
         this.dispatchEvent(
           new ShowToastEvent({
@@ -232,7 +232,7 @@ export default class FilesRelatedList extends LightningElement {
           })
         );
       })
-      .catch((err) => {
+      .catch(err => {
         this.dispatchEvent(
           new ShowToastEvent({
             variant: "error",