From 67c4355dffbfe52d8d0ea5e8bb318cbe5fd1334b Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 11 Mar 2022 12:05:20 +0100
Subject: [PATCH] #287 - Show folder name on `index.md` files

---
 CHANGELOG.md                             |  1 +
 src/commands/Folders.ts                  |  4 +++-
 src/models/PanelSettings.ts              |  1 +
 src/panelWebView/components/FileItem.tsx | 18 ++++++++++++++----
 src/panelWebView/components/FileList.tsx |  2 +-
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfd79452..f6ee6e46 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - [#270](https://github.com/estruyf/vscode-front-matter/issues/270): Only show media files from public folder if `pageBundle` is not enabled on any of the content types
 - [#282](https://github.com/estruyf/vscode-front-matter/issues/282): Insert relative paths for media files located in a page bundle (also sub-folders)
 - [#283](https://github.com/estruyf/vscode-front-matter/issues/283): Added published date sorting options for the content dashboard
+- [#287](https://github.com/estruyf/vscode-front-matter/issues/287): Show folder name on `index.md` files for recently modified files
 
 ### 🐞 Fixes
 
diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts
index 7650be95..219b24f2 100644
--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -1,7 +1,7 @@
 import { Questions } from './../helpers/Questions';
 import { SETTING_CONTENT_PAGE_FOLDERS, SETTING_CONTENT_STATIC_FOLDER, SETTING_CONTENT_SUPPORTED_FILETYPES, TelemetryEvent } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
-import { basename, join } from "path";
+import { basename, dirname, join, sep } from "path";
 import { ContentFolder, FileInfo, FolderInfo } from "../models";
 import uniqBy = require("lodash.uniqby");
 import { Template } from "./Template";
@@ -238,12 +238,14 @@ export class Folders {
               for (const file of files) {
                 try {
                   const fileName = basename(file.fsPath);
+                  const folderName = dirname(file.fsPath).split(sep).pop();
                   
                   const stats = await workspace.fs.stat(file);
 
                   fileStats.push({
                     filePath: file.fsPath,
                     fileName,
+                    folderName,
                     ...stats
                   });
                 } catch (error) {
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index cdf030af..565c93e4 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -98,6 +98,7 @@ export interface FolderInfo {
 export interface FileInfo extends FileStat {
   filePath: string;
   fileName: string;
+  folderName: string | undefined;
 };
 
 export interface CustomScript {
diff --git a/src/panelWebView/components/FileItem.tsx b/src/panelWebView/components/FileItem.tsx
index 899e84a4..bfd7fb35 100644
--- a/src/panelWebView/components/FileItem.tsx
+++ b/src/panelWebView/components/FileItem.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { DEFAULT_FILE_TYPES } from '../../constants/DefaultFileTypes';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { CommandToCode } from '../CommandToCode';
@@ -8,16 +9,25 @@ import { MarkdownIcon } from './Icons/MarkdownIcon';
 export interface IFileItemProps {
   name: string;
   path: string;
+  folderName: string | undefined;
 }
 
-const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
-  
+const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, folderName, path }: React.PropsWithChildren<IFileItemProps>) => {
+
   const openFile = () => {
     MessageHelper.sendMessage(CommandToCode.openInEditor, path);
   };
 
+  const itemName = useMemo(() => {
+    if (folderName && name === 'index.md') {
+      return folderName;
+    }
+
+    return name;
+  }, [name, folderName]);
+
   // File extension
-  const fileExtension = `.${name.split('.').pop()}`;
+  const fileExtension = useMemo(() => `.${name.split('.').pop()}`, [name]);
 
   return (
     <li className={`file_list__items__item`}
@@ -30,7 +40,7 @@ const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React
         )
       }
 
-      <span>{name}</span>
+      <span>{itemName}</span>
     </li>
   );
 };
diff --git a/src/panelWebView/components/FileList.tsx b/src/panelWebView/components/FileList.tsx
index 85b8d9e3..badc8134 100644
--- a/src/panelWebView/components/FileList.tsx
+++ b/src/panelWebView/components/FileList.tsx
@@ -22,7 +22,7 @@ const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, t
       <ul className="file_list__items">
         {
           (files && files.length > 0) && files.map(file => (
-            <FileItem key={file.filePath} name={file.fileName} path={file.filePath} />
+            <FileItem key={file.filePath} name={file.fileName} path={file.filePath} folderName={file.folderName} />
           ))
         }
       </ul>