Code

How I created the Focus app using React and Rust

Time Stamp: March 27, 2023 7:43 AM
Source Node: 2456820

Republished By Plato

Hello 👋,

In this article, I will describe the steps I went through to create a small desktop application to help me focus on my daily tasks.

One of my goals is to create the ultimate time management tool that will solve all my productivity issues, but let’s start with one small problem for now.
When I am working on a task, I often get interrupted by other tasks that should be done (a new task is assigned to me, I remember something that I should do, …), most of the time, the new task is not that urgent and can wait until I finish my current one. But it gets me distracted and sometimes I find myself prioritizing it over the current task only to not forget about it. Then resuming the original task becomes hard because I lost focus. To solve this problem I needed a way to quickly log interrupting tasks as they popup and forget about them until I finish my current task.

I am working on something … an interrupting idea/task appears.
I hit a custom shurtcut on my keyboard then a text input appears in the center of the screen.
I type a quick description of the interrupting idea/task, hit enter and the text input disapears.
I continue my work normally.
…
When I finish, I open a predefined file and find all the ideas/tasks I typed written inside it.

What I am trying to build here is a desktop application, but I want to use web technologies (at least for the UI). The popular tool to do that is Electron, but I started recently learning Rust and Tauri seems like a good tool to try. So I will be using it with React for the frontend and Tailwind for styling.

I followed the instructions on Tauri’s prerequisites page to setup Rust and Node on my system, then I run yarn create tauri-app to create the project. I named the project focus and chose the create-vite receipe for the UI and agreed to install @tauri-apps/api. Then chose the react-ts template of create-vite:

Tauri created the project and installed the dependencies. Let’s take a look at the files structure:

src/ main.tsx <- entry point of JS/TS ... other UI files here
src-tauri/ icons/ <- icons of different sizes src/ main.rs <- entry point for the application target/ <- the compiled and bundles files Cargo.toml <- like package.json for Rust Cargo.lock <- like yarn.lock tauri.conf.json <- config file for Tauri
index.html <- entry point of the UI
package.json
yarn.lock
tsconfig.json
vite.config.ts <- config file for Vite

Now running the yarn tauri dev should start the app. This will take some time as Rust compiles the code for the first time, the following executions will be fast.

The final step of the setup was to add Tailwind to the project, I did that by following the official docs

For the UI, all I need is a text input where I will type the task then hit Enter to save it. So I changed the App component code to the following:

function App() { return <input type="text" className="w-[800px] h-[80px] bg-[#222] text-2xl text-white px-6" />
}

Note that I am using Tailwind’s arbitrary values syntax to have a dark gray 800px/80px input.

When I type some text in this input then hit Enter, I want that text to be appended to a file somewhere. Let’s start by saving the text in a state and logging it when Enter is pressed:

function App() { const [content, setContent] = React.useState('') return ( <input type="text" value={content} onChange={e => setContent(e.target.value)} onKeyDown={e => e.key === 'Enter' && console.log(content)} className="w-[800px] h-[80px] bg-[#222] text-2xl text-white px-6" /> )
}

The next step is to write a Rust function that will receive the input content and append it to a file. After reading the Calling Rust from the frontend documentation page, I changed the src-tauri/src/main.rs to the following:

Warning: I am new to Rust, so I may be doing many things wrong in this code

#![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows"
)] use std::fs::OpenOptions;
use std::io::prelude::*; #[tauri::command]
fn add_task(content: String) { let mut file = OpenOptions::new() .create(true) .append(true) .open("../tasks.txt") .expect("Error while opening the tasks file"); writeln!(file, "{}", content).expect("Error while writing in the tasks file");
} fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![add_task]) .run(tauri::generate_context!()) .expect("error while running tauri application");
}

Then I modified the App component to call that function when Enter is pressed:

function App() { const [content, setContent] = React.useState('') const handleKeyDown = async (e: React.KeyboardEvent) => { if (e.key === 'Enter') { await invoke('add_task', { content }) } } return ( <input type="text" value={content} onChange={e => setContent(e.target.value)} onKeyDown={handleKeyDown} className="w-[800px] h-[80px] bg-[#222] text-2xl text-white px-6" /> )
}

Now when typing some text and hiting Enter, the entered text is added to the tasks.txt file.

Note that this file is created in the root of the project while the path in the Rust code is ../tasks.txt, this is because the app is executed inside the src-tauri directory, so any relative path will be relative to that directory. It will be better to use an absolute path and let the user define it. The easiest way I could think of to define it is via an environment variable, let’s call it FOCUS_TASKS_PATH.

So I added this variable to my .zshrc then updated the Rust code:


use std::env; #[tauri::command]
fn add_task(content: String) { let path = env::var("FOCUS_TASKS_PATH") .expect("The 'FOCUS_TASKS_PATH' env variable was not found!"); let mut file = OpenOptions::new() .create(true) .append(true) .open(path) .expect("Error while opening the tasks file"); writeln!(file, "{}", content).expect("Error while writing in the tasks file")
}

The initial idea was to have a popup, something like Spotlight on macOS, but what we have now in a browser window! Luckily, Tauri allows us to tweak the window using the src-tauri/tauri.conf.json file. The initial window configuration was:

{ "fullscreen": false, "height": 600, "resizable": true, "title": "Focus", "width": 800
}

I replaced it with

{ "fullscreen": false, "width": 800, "height": 80, "title": "Focus", "resizable": false, "center": true, "decorations": false }

The result looks good

Now I want the popup to disapear when I hit Enter, so let’s add a process.exit() in our App component (This could also be added on the add_task Rust function).

import { process } from '@tauri-apps/api' function App() { const [content, setContent] = React.useState('') const handleKeyDown = async (e: React.KeyboardEvent) => { if (e.key === 'Enter') { await invoke('add_task', { content }) process.exit() } } }

Now the popup is closed when Enter is pressed

I think we have the alpha version of the application ready now, let’s build it

yarn tauri build

First the command failed with this message

Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

Setting the identifier to dev.webneat.focus solved the problem.

The compilation took a while then I had the following files generated (I am using Ubuntu):

src-tauri/target/release/bundle/ deb/focus_0.1.0_amd64.deb appimage/focus_0.1.0_amd64.AppImage

Since the AppImage is easier to use (no installation needed), I just moved it to my bin directory and named it focus:

sudo mv src-tauri/target/release/bundle/appimage/focus_0.1.0_amd64.AppImage /usr/bin/focus

Now runing the command focus on the terminal opens the popup

On Ubuntu, I can setup a new custom shortcut on the Keyboard settings. Now when I hit that shortcut anywhere, The popup appears, I type what I have in mind and hit Enter then continue what I was doing 🎉

Check out the repository here https://github.com/webNeat/focus