Socially Rebuild In React
I'm just going to say it, I do not like React JS. It is completely different from normal HTML and CSS. I have been attempting to learn React for the past few months and I just cannot get my head around it. That being said, I have chosen to rebuild Socially in React. But why would I do that?
Socially is an application that combines all your social media direct messages into one window. It allows you to easily switch social media without the need for clunky and unorganised Chrome tabs. Currently, Socially is in version 0.5 and there are many bugs. If you want more information about it and a download link, click here.
Under the hood, Socially runs on Electron. Version 0.5 doesn't use any frameworks or any external libraries, apart from electron-json-config and the notify library. Everything else is written from scratch. This is good as it gives me control over the UI and each part of the program. However, it is very unsafe and it's some major spaghetti code! I originally wanted to rewrite the entire thing so that I could make the whole app more object-orientated so that adding socials was easy instead of adding code on 12 new lines. But then React came along. It seemed to solve a few problems.
One fear I had is the unexpected behaviour of the application. Originally I used an if statement to determine which webview to show. I really do not like this so when I found React's state system, my prayers were answered. It allowed me to just update a variable and that part of the UI would update. It also allows me to put everything into functional components and reuse them. This makes the future maintainability of the code better. If socials need to be added and changed, they can with ease.
I have thought about this for many days and I have finally got a plan in my head. This is my idea for how it would all work. It may not use best practices as I am not an expert. So, I will give each Social it's own state object which will store the name, web URL, and other data. Then I will build a map of the states which will be used to recursively search through them all. This will allow me to build the Sidebar and other elements recursively.
I feel like it is a janky solution and I hope that one day I can revisit this code, cringe and manage to make it better.