Open file

Author: manhtai

src/App.global.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply rounded-md bg-gray-50 px-2 py-0.5 outline-none text-xs border shadow-sm active:bg-blue-500 active:text-white disabled:opacity-50;
+  }
+}

src/components/Main.tsx

@@ -53,7 +53,7 @@ const Main = () => {
         </nav>
 
         {/* Main content */}
-        <section className="relative flex flex-col w-full bg-gray-100 text-base">
+        <section className="relative flex flex-col w-full bg-gray-100">
           <div className="h-full overflow-x-hidden overflow-y-auto px-6 my-6">
             {routes.map(({ path, Component }) => (
               <Route key={path} exact path={path}>

src/components/html-preview/HtmlPreview.tsx

@@ -1,26 +1,49 @@
 /* eslint-disable react/no-danger */
+import { ipcRenderer } from 'electron';
 import React, { useState } from 'react';
 
 const HtmlPreview = () => {
   const [html, setHtml] = useState(
-    '<h1>Hello</h1>\n<quote>This is a quote</quote>'
+    '<h1>Hello</h1>\n<blockquote>This is a quote</blockquote>'
   );
+  const [opening, setOpening] = useState(false);
 
   const handleChange = (evt: { target: { value: string } }) =>
     setHtml(evt.target.value);
 
+  const handleOpen = async () => {
+    setOpening(true);
+    const filters = [{ name: 'HTML Files', extensions: ['htm', 'html'] }];
+    const content = await ipcRenderer.invoke('open-file', filters);
+    setHtml(content);
+    setOpening(false);
+  };
+
   return (
-    <div className="flex min-h-full">
-      <textarea
-        onChange={handleChange}
-        className="flex-1 min-h-full bg-white p-4"
-        value={html}
-      />
-      <div className="mx-1" />
-      <section
-        className="flex-1 min-h-full bg-blue-50 p-4 prose"
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
+    <div className="min-h-full flex flex-col">
+      <div className="flex justify-start mb-1">
+        <button
+          type="button"
+          className="btn"
+          onClick={handleOpen}
+          disabled={opening}
+        >
+          Open...
+        </button>
+      </div>
+      <div className="flex flex-1 min-h-full">
+        <textarea
+          onChange={handleChange}
+          className="flex-1 min-h-full bg-white p-4 rounded-md"
+          value={html}
+          disabled={opening}
+        />
+        <div className="mx-1" />
+        <section
+          className="flex-1 min-h-full bg-blue-50 p-4 prose rounded-md"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
     </div>
   );
 };

src/components/md-to-html/MarkdownToHtml.tsx

@@ -1,20 +1,40 @@
 /* eslint-disable react/no-danger */
 import React, { useState } from 'react';
 import marked from 'marked';
+import { ipcRenderer } from 'electron';
 
 const Md2Html = () => {
   const [md, setMd] = useState('# Hello\n> This is a quote');
   const [preview, setPreview] = useState(false);
+  const [opening, setOpening] = useState(false);
 
   const handleChange = (evt: { target: { value: string } }) =>
     setMd(evt.target.value);
 
+  const handleOpen = async () => {
+    setOpening(true);
+    const filters = [
+      { name: 'Markdown Files', extensions: ['md', 'markdown', 'txt'] },
+    ];
+    const content = await ipcRenderer.invoke('open-file', filters);
+    setMd(content);
+    setOpening(false);
+  };
+
   return (
     <div className="min-h-full flex flex-col">
-      <div className="flex justify-end mb-1">
+      <div className="flex justify-between mb-1">
+        <button
+          type="button"
+          className="btn"
+          onClick={handleOpen}
+          disabled={opening}
+        >
+          Open...
+        </button>
         <button
           type="button"
-          className="rounded bg-gray-300 px-2 py-1 outline-none text-sm text-gray-600"
+          className="btn"
           onClick={() => setPreview(!preview)}
         >
           {preview ? 'Raw HTML' : 'Preview'}
@@ -23,18 +43,19 @@ const Md2Html = () => {
       <div className="flex min-h-full flex-1">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full bg-white p-4"
+          className="flex-1 min-h-full bg-white p-4 rounded-md"
           value={md}
+          disabled={opening}
         />
         <div className="mx-1" />
         {preview ? (
           <section
-            className="flex-1 min-h-full bg-blue-50 p-4 prose"
+            className="flex-1 min-h-full bg-blue-50 p-4 prose rounded-md"
             dangerouslySetInnerHTML={{ __html: marked(md) }}
           />
         ) : (
           <textarea
-            className="flex-1 min-h-full bg-blue-100 p-4"
+            className="flex-1 min-h-full bg-blue-100 p-4 rounded-md"
             value={marked(md)}
             disabled
           />

src/components/unix-timestamp/UnixTimestamp.tsx

@@ -1,8 +1,10 @@
 import dayjs from 'dayjs';
 import React, { useState, useEffect } from 'react';
+import { clipboard } from 'electron';
 
 const UnixTimestampConverter = () => {
   const [date, setDate] = useState(dayjs());
+  const [copied, setCopied] = useState(false);
 
   useEffect(() => {
     const timerID = setInterval(() => setDate(dayjs()), 1000);
@@ -12,12 +14,30 @@ const UnixTimestampConverter = () => {
     };
   });
 
+  const handleCopy = () => {
+    clipboard.write({ text: `${date.unix()}` });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1_000);
+  };
+
   return (
-    <div>
-      The current Unix epoch time is
-      <span className="text-lg bg-blue-200 mx-2 p-2 rounded inline-flex items-center content-center">
-        {date.unix()}
-      </span>
+    <div className="min-h-full flex flex-col">
+      <div className="flex justify-start mb-1">
+        <button
+          type="button"
+          className="btn"
+          onClick={handleCopy}
+          disabled={copied}
+        >
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <div className="flex-1 min-h-full">
+        The current Unix epoch time is
+        <span className="text-base bg-blue-200 mx-2 px-2 py-1 rounded inline-flex items-center content-center font-mono">
+          {date.unix()}
+        </span>
+      </div>
     </div>
   );
 };

src/main.dev.ts

@@ -11,9 +11,12 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import path from 'path';
-import { app, BrowserWindow, shell } from 'electron';
+import { app, BrowserWindow, dialog, ipcMain, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
+import { FileFilter, IpcMainInvokeEvent } from 'electron/main';
+import fs from 'fs';
+import { promisify } from 'util';
 import MenuBuilder from './menu';
 
 export default class AppUpdater {
@@ -112,9 +115,28 @@ const createWindow = async () => {
 };
 
 /**
- * Add event listeners...
+ * Handlers events from React
  */
+ipcMain.handle(
+  'open-file',
+  async (_event: IpcMainInvokeEvent, filters: FileFilter[]) => {
+    const files = await dialog.showOpenDialog({
+      properties: ['openFile'],
+      filters,
+    });
+
+    let content = '';
+    if (files) {
+      const buffer = await promisify(fs.readFile)(files.filePaths[0]);
+      content = buffer.toString();
+    }
+    return content;
+  }
+);
 
+/**
+ * Add event listeners...
+ */
 app.on('window-all-closed', () => {
   // Respect the OSX convention of having the application in memory even
   // after all windows have been closed

tailwind.config.js

@@ -5,6 +5,12 @@ module.exports = {
   purge: {
     content: ['./src/**/*.{ts,tsx,html}'],
   },
-  variants: {},
+  variants: {
+    extend: {
+      backgroundColor: ['active'],
+      textColor: ['active'],
+      opacity: ['disabled'],
+    },
+  },
   plugins: [typography],
 };