UI + DB creation

YoussefKababe · Sep 7, 2024 · a2d3107 · a2d3107
1 parent fea3248
commit a2d3107
Show file tree

Hide file tree

Showing 22 changed files with 519 additions and 18 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 80,
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
@@ -8,5 +8,8 @@
   "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
-  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"]
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.wordWrap": "wordWrapColumn",
-  "editor.wordWrapColumn": 120,
+  "editor.wordWrapColumn": 80,
   "files.associations": {
     "*.css": "tailwindcss"
   },

diff --git a/forge.config.ts b/forge.config.ts
@@ -12,7 +12,12 @@ const config: ForgeConfig = {
     asar: true,
   },
   rebuildConfig: {},
-  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
+  makers: [
+    new MakerSquirrel({}),
+    new MakerZIP({}, ['darwin']),
+    new MakerRpm({}),
+    new MakerDeb({}),
+  ],
   plugins: [
     new VitePlugin({
       // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.

diff --git a/index.html b/index.html
@@ -5,7 +5,10 @@
     <title>Hello World!</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div
+      id="app"
+      class="flex h-full flex-col justify-between bg-gray-950 text-white"
+    ></div>
     <script type="module" src="/src/renderer.ts"></script>
   </body>
 </html>
diff --git a/interface.d.ts b/interface.d.ts
@@ -0,0 +1,16 @@
+export interface IElectronAPI {
+  startServer: () => void
+  stopServer: () => void
+  restartServer: () => void
+  getDatabases: () => void
+  createDatabase: (name: string) => Promise<void>
+  removeDatabase: (name: string) => void
+  onSetReady: (callback: (value: boolean) => void) => Electron.IpcRenderer
+  onSetDatabases: (callback: (value: string[]) => void) => Electron.IpcRenderer
+}
+
+declare global {
+  interface Window {
+    electronAPI: IElectronAPI
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "tailwindcss": "^3.4.10",
     "ts-node": "^10.9.2",
     "typescript": "~4.5.4",
+    "unplugin-fonts": "^1.1.1",
     "vite": "^5.4.3"
   },
   "keywords": [],
@@ -47,8 +48,14 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@electric-sql/pglite": "^0.2.5",
+    "@formkit/auto-animate": "^0.8.2",
+    "clsx": "^2.1.1",
     "electron-squirrel-startup": "^1.0.1",
+    "lucide-react": "^0.439.0",
+    "pg-gateway": "^0.3.0-alpha.6",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.2"
   }
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,9 +1,18 @@
+import { AppBar } from './AppBar'
+import { AppProvider } from './AppContext'
+import { DatabaseList } from './DatabaseList'
+import { StatusBar } from './StatusBar'
 import { TitleBar } from './TitleBar'
 
 export const App = () => {
   return (
-    <div className="flex h-screen w-full flex-col bg-black">
-      <TitleBar />
-    </div>
+    <AppProvider>
+      <>
+        <TitleBar />
+        <AppBar />
+        <DatabaseList />
+        <StatusBar />
+      </>
+    </AppProvider>
   )
 }
diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+
+import { useAppUpdate } from './AppContext'
+
+export const AppBar = () => {
+  const { setSearch } = useAppUpdate()
+  const [loading, setLoading] = useState(false)
+  const [dbName, setDbName] = useState('')
+
+  useEffect(() => {
+    setSearch(dbName)
+  }, [dbName])
+
+  return (
+    <div className="flex h-[70px] bg-blue-700 px-3 py-3">
+      <form
+        className="flex flex-1 rounded border border-blue-600 bg-blue-900 p-2"
+        onSubmit={async (e) => {
+          e.preventDefault()
+          setLoading(true)
+          await window.electronAPI.createDatabase(dbName)
+          setTimeout(() => {
+            setLoading(false)
+            setDbName('')
+          }, 1000)
+        }}
+      >
+        <input
+          className="flex-1 bg-transparent outline-none"
+          placeholder="Search / Name your new database"
+          value={dbName}
+          disabled={loading}
+          onChange={(e) => {
+            if (loading) return
+            setDbName(e.target.value)
+          }}
+        />
+        <button
+          type="submit"
+          className="rounded bg-green-600 px-2 text-sm font-semibold transition-opacity disabled:opacity-60"
+          disabled={!dbName || loading}
+        >
+          Create
+        </button>
+      </form>
+    </div>
+  )
+}
diff --git a/src/components/AppContext.tsx b/src/components/AppContext.tsx
@@ -0,0 +1,56 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+interface AppContextProps {
+  ready: boolean
+  search: string
+  databases: string[]
+}
+
+interface AppUpdatedContextProps {
+  setReady: (ready: boolean) => void
+  setSearch: (value: string) => void
+  setDatabases: (databases: string[]) => void
+}
+
+interface AppProviderProps {
+  children: React.ReactNode
+}
+
+const AppContext = createContext<AppContextProps | null>(null)
+
+const AppUpdateContext = createContext<AppUpdatedContextProps | null>(null)
+
+export const AppProvider = ({ children }: AppProviderProps) => {
+  const [ready, setReady] = useState(false)
+  const [search, setSearch] = useState('')
+  const [databases, setDatabases] = useState<string[]>([])
+
+  useEffect(() => {
+    window.electronAPI.startServer()
+    window.electronAPI.getDatabases()
+    window.electronAPI.onSetReady(setReady)
+    window.electronAPI.onSetDatabases(setDatabases)
+  }, [])
+
+  return (
+    <AppContext.Provider value={{ ready, search, databases }}>
+      <AppUpdateContext.Provider value={{ setReady, setSearch, setDatabases }}>
+        {children}
+      </AppUpdateContext.Provider>
+    </AppContext.Provider>
+  )
+}
+
+export const useApp = () => {
+  const context = useContext(AppContext)
+  if (!context) throw new Error('Context must be used within an AppProvider')
+
+  return context
+}
+
+export const useAppUpdate = () => {
+  const context = useContext(AppUpdateContext)
+  if (!context) throw new Error('Context must be used within an AppProvider')
+
+  return context
+}