Words count (#16)

Author: manhtai

release/app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bookless",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Hassle-free book-writing app",
   "main": "./dist/main/main.js",
   "author": {

release/app/package.json

@@ -1,9 +1,17 @@
+const numformatter = new Intl.NumberFormat('en-US');
+
 export const pathToName = (pathname: string) =>
   pathname.split('\\').pop()?.split('/').pop();
 
 export const truncate = (str: string, num = 60) => {
   if (str.length > num) {
-    return `${str.slice(0, num)}...`;
+    const remain = str.slice(0, num).split(' ');
+    remain.pop();
+    return `${remain.join(' ')}...`;
   }
   return str;
 };
+
+export const words = (str: string): string => {
+  return str ? numformatter.format(str.split(' ').length) : '0';
+};

src/helpers/string.ts

@@ -3,7 +3,7 @@ import { readFile, rename, unlink, writeFile } from 'fs/promises';
 import path from 'path';
 import { clipboard, dialog } from 'electron';
 import { nanoid } from 'nanoid';
-import { truncate, pathToName } from '../helpers/string';
+import { words, truncate, pathToName } from '../helpers/string';
 import { Doc, DocFile } from '../renderer/state/AppState';
 
 const mdExtensions = ['md', 'txt', 'markdown'];
@@ -48,12 +48,14 @@ export const loadFiles = async (
   const docFiles = await Promise.all(
     filenames.map(async (name) => {
       try {
+        const content = await readFile(path.join(dir, name), 'utf-8');
         return {
           name,
-          body: truncate(await readFile(path.join(dir, name), 'utf-8')),
+          body: truncate(content),
+          count: words(content),
         };
       } catch (err) {
-        return { name: '', body: '' };
+        return { name: '', body: '', count: '' };
       }
     })
   );

src/main/file.ts

@@ -257,29 +257,35 @@ const Explorer = (props: AppStateProps) => {
                           onClick={() => chooseFile(state.dir, file.name)}
                           onDoubleClick={() => renameFile(state.dir, file.name)}
                           onKeyPress={() => chooseFile(state.dir, file.name)}
-                          className="flex flex-col items-stretch justify-between p-4 text-xs h-28 w-60"
+                          className="flex flex-col items-stretch justify-between h-32 p-4 text-xs w-60"
                         >
                           <section className="space-y-1">
                             <h1 className="font-semibold">{file.name}</h1>
                             <p>{file.body}</p>
                           </section>
-                          <span className="flex items-center justify-start mt-2 space-x-2 transition-opacity duration-300 opacity-0 hover:opacity-100">
-                            <IoTrashOutline
-                              className="w-4 h-4 transition-opacity duration-300 hover:opacity-70"
-                              title="Delete"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                deleteFile(state.dir, file.name);
-                              }}
-                            />
-                            <IoCreateOutline
-                              className="w-4 h-4 transition-opacity duration-300 hover:opacity-70"
-                              title="Rename"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                renameFile(state.dir, file.name);
-                              }}
-                            />
+                          <span className="flex items-center justify-between opacity-70">
+                            <span>
+                              {file.count} word
+                              {file.count === '1' ? '' : 's'}
+                            </span>
+                            <span className="flex items-center justify-end flex-1 space-x-2 transition-opacity duration-300 opacity-0 hover:opacity-100">
+                              <IoTrashOutline
+                                className="w-4 h-4 transition-opacity duration-300 hover:opacity-70"
+                                title="Delete"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  deleteFile(state.dir, file.name);
+                                }}
+                              />
+                              <IoCreateOutline
+                                className="w-4 h-4 transition-opacity duration-300 hover:opacity-70"
+                                title="Rename"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  renameFile(state.dir, file.name);
+                                }}
+                              />
+                            </span>
                           </span>
                         </div>
                       </div>

src/renderer/components/Explorer/Explorer.tsx

@@ -22,6 +22,7 @@ export interface Doc {
 export interface DocFile {
   name: string;
   body: string;
+  count: string;
 }
 
 export const ConfigKey = {

src/renderer/state/AppState.ts

@@ -1,4 +1,4 @@
-import { truncate } from 'helpers/string';
+import { truncate, words } from 'helpers/string';
 import { Dispatch } from 'react';
 import { AppState } from './AppState';
 import { Action } from './Action';
@@ -38,7 +38,11 @@ const appStateReducer = (state: AppState, action: Action): AppState => {
       };
       const files = state.files.map((file) => {
         if (file.name === doc.fileName) {
-          return { ...file, body: truncate(doc.md) };
+          return {
+            ...file,
+            body: truncate(doc.md),
+            count: words(doc.md),
+          };
         }
         return file;
       });