Merge pull request #6 from whaaaley/next

Next

client/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "build-watch": "vite build --watch",
+    "build-watch": "env BUILD_ENV=local vite build --watch",
     "dev": "vite"
   },
   "dependencies": {

client/shell.nix

@@ -0,0 +1,12 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+pkgs.mkShell {
+  buildInputs = with pkgs; [
+    nodejs_20
+  ];
+
+  shellHook = ''
+    echo "🚀 Starting whaleybar client..."
+    npm run dev
+  '';
+}

client/src/App.tsx

@@ -48,9 +48,15 @@ const Zebar = defineComponent({
     })
 
     return () => (
-      <div class='flex h-screen items-center gap-4 px-6'>
+      <div class='flex h-screen items-center gap-4 bg-gradient-to-b from-transparent to-black/50 px-6'>
         <TimeDate/>
         <WeatherLocation location='Des Moines, Iowa'/>
+        <WeatherLocation
+          includeTime
+          label='Haywards Heath, UK'
+          location='RH16'
+          timezone='Europe/London'
+        />
         <MonitorGrid monitors={allMonitors.value}/>
         <WorkspaceGrid workspaces={monitorWorkspaces.value}/>
       </div>
@@ -77,7 +83,6 @@ const routes = [{
     setup () {
       return () => (
         <div class='h-screen overflow-auto bg-black text-white'>
-          <Zebar/>
           <LiveLogs/>
         </div>
       )

client/src/components/LiveLogs.tsx

@@ -16,9 +16,6 @@ const statusVariants = cva([
       fatal: 'bg-fuchsia-600',
     },
   },
-  compoundVariants: [
-    // {}
-  ],
   defaultVariants: {
     level: 'info',
   },

client/src/components/TimeDate.tsx

@@ -6,7 +6,8 @@ export default defineComponent({
   name: 'TimeDate',
   setup () {
     const { monthlyAppleEmojiUrl } = useEmoji()
-    const now = useNow()
+
+    const now = useNow({ interval: 1000 })
 
     const timeFormat = useDateFormat(now, 'h:mm')
     const dateFormat = useDateFormat(now, 'MM/DD/YYYY')

client/src/components/WeatherLocation.tsx

@@ -1,19 +1,45 @@
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useNow } from '@vueuse/core'
 import { computed, defineComponent, onMounted } from 'vue'
 import { useEmoji } from '~/hooks/useEmoji'
 import { weatherQueries } from '~/io/queries/index'
-import { getWeatherEmoji } from '~/utils/getWeatherEmoji'
+import { getWeatherEmoji } from '~/utils/emoji.utils'
 
 export default defineComponent({
   name: 'WeatherLocation',
   props: {
+    includeTime: {
+      type: Boolean,
+      default: false,
+    },
     location: {
       type: String,
       default: 'Des Moines, Iowa',
     },
+    label: {
+      type: [String, null],
+      default: null,
+    },
+    timezone: {
+      type: String,
+      default: 'America/Chicago',
+    },
   },
   setup (props) {
     const { getEmoji } = useEmoji()
+    const queryClient = useQueryClient()
+
+    const now = useNow({ interval: 1000 })
+
+    const timezoneNow = computed(() => {
+      const date = now.value
+
+      return date.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZone: props.timezone,
+      })
+    })
 
     const {
       data: weather,
@@ -31,6 +57,7 @@ export default defineComponent({
     })
 
     const isLoading = computed(() => isLoadingWeather.value)
+    const labelValue = computed(() => isLoading.value ? '' : (props.label ?? props.location))
 
     const emojiUrl = computed(() => {
       if (!weather.value) return
@@ -48,6 +75,12 @@ export default defineComponent({
 
     onMounted(async () => {
       await refetchWeather()
+
+      // 3600000 ms = 1 hour
+      setInterval(async () => {
+        queryClient.resetQueries({ queryKey: [props.location] })
+        await refetchWeather()
+      }, 3600000)
     })
 
     return () => (
@@ -63,12 +96,18 @@ export default defineComponent({
         )}
         <div class='grid text-xs'>
           {weather.value && (
-            <div>{weather.value.temp}°F {weather.value.condition}</div>
+            <div>
+              <span>{weather.value.temp}°F {weather.value.condition}</span>
+              {props.includeTime && (
+                // <span> ({timezoneNow.value})</span>
+                <span> / {timezoneNow.value}</span>
+              )}
+            </div>
           )}
           {weatherError.value && (
             <div>{weatherError.value.message}</div>
           )}
-          <div>{props.location}</div>
+          <div>{labelValue.value}</div>
         </div>
       </div>
     )

client/src/io/queries/emojiQueries.ts → client/src/io/queries/emoji.queries.ts

@@ -1,6 +1,5 @@
 import { z } from 'zod'
-// import { withGet } from '~/io/chains/fetchPipeline'
-import { makeRequest } from '~/io/streams/ajaxStreams'
+import { makeRequest } from '~/io/streams/fetch.streams'
 
 type GetWeatherEmojiParams = {
   weatherCondition: string
@@ -14,8 +13,6 @@ const WeatherEmojiResponseSchema = z.object({
 
 type WeatherEmojiResponse = z.infer<typeof WeatherEmojiResponseSchema>
 
-// Todo: add middleware to swap out the URL based on the environment
-
 // Type casting with 'as Promise<WeatherEmojiResponse>' is safe here because:
 // 1. The Zod schema (WeatherEmojiResponseSchema) validates the data at runtime
 // 2. If the API returns invalid data, Zod's parse() will throw regardless of the type cast

client/src/io/queries/index.ts

@@ -1,4 +1,2 @@
-export { emojiQueries } from './emojiQueries'
-export { weatherQueries } from './weatherQueries'
-export * as logStreamQueries from './logStreamQueries'
-export * from './weatherQueries'
+export * as logStreamQueries from './logStream.queries'
+export * as weatherQueries from './weather.queries'

client/src/io/queries/logStream.queries.ts

@@ -0,0 +1,51 @@
+import { type LogRequestSchema, logResponseSchema, messageSchema } from '$models/logStream.model'
+import { makeRequest } from '~/io/streams/fetch.streams'
+import { connect, disconnect } from '~/io/streams/sse.streams'
+
+export type LogResponseSchema = z.infer<typeof logResponseSchema>
+export type MessageSchema = z.infer<typeof messageSchema>
+
+type NextFn = (data: unknown) => void
+
+let lastNext: NextFn | undefined
+
+export const connectLogs = async (next: NextFn) => {
+  lastNext = next
+
+  const data = await connect({
+    url: '/stream/logs',
+    messageSchema,
+    next,
+    error: (err) => { throw err },
+  })
+
+  return [data] as Promise<MessageSchema>[]
+}
+
+export const disconnectLogs = () => {
+  disconnect({ url: '/stream/logs' })
+}
+
+export const reconnectLogs = async (next?: NextFn) => {
+  disconnectLogs()
+
+  if (!next && !lastNext) {
+    throw new Error('Next function is not defined')
+  }
+
+  return connectLogs(next ?? lastNext!)
+}
+
+export const sendLog = async (params: LogRequestSchema) => {
+  const data = await makeRequest({
+    method: 'POST',
+    url: '/api/log',
+    responseSchema: logResponseSchema,
+    body: JSON.stringify(params),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+  return data as Promise<LogResponseSchema>
+}

client/src/io/queries/weather.queries.ts

@@ -0,0 +1,20 @@
+import { type WeatherRequest, type WeatherResponse, weatherResponseSchema } from '$models/weather.model'
+import { makeRequest } from '~/io/streams/fetch.streams'
+
+// Type casting with 'as Promise<WeatherResponse>' is safe here because:
+// 1. The Zod schema (WeatherResponseSchema) validates the data at runtime
+// 2. If the API returns invalid data, Zod's parse() will throw regardless of the type cast
+// 3. The cast just helps TypeScript understand the shape of the data after Zod validates it
+export const getWeather = async (params: WeatherRequest) => {
+  const data = await makeRequest({
+    method: 'GET',
+    url: '/api/weather',
+    queryString: params,
+    responseSchema: weatherResponseSchema,
+    headers: {
+      'Cache-Control': 'public, max-age=3600, immutable',
+    },
+  })
+
+  return data as Promise<WeatherResponse>
+}

client/src/io/streams/ajaxStreams.ts → client/src/io/streams/fetch.streams.ts

@@ -1,7 +1,7 @@
 import { lastValueFrom, map, of, pipe, switchMap } from 'rxjs'
 import { fromFetch } from 'rxjs/fetch'
 import { type ZodSchema } from 'zod'
-import { http, marshal, prefixUrl, unmarshal, zod } from '~/io/operators/requestOperators'
+import { http, marshal, prefixUrl, unmarshal, zod } from '~/io/operators/request.operators'
 
 type RequestConfig = RequestInit & {
   url: string

client/src/io/streams/sseStreams.ts → client/src/io/streams/sse.streams.ts

@@ -1,7 +1,7 @@
 import { fromEvent, lastValueFrom, map, of, pipe, switchMap, tap } from 'rxjs'
 import { type ZodSchema } from 'zod'
-import { prefixUrl } from '~/io/operators/requestOperators'
-import { logging, unmarshal, zod } from '~/io/operators/streamOperators'
+import { prefixUrl } from '~/io/operators/request.operators'
+import { logging, unmarshal, zod } from '~/io/operators/stream.operators'
 
 type ConnectConfig = {
   url: string

client/vite.config.ts

@@ -4,7 +4,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import { defineConfig } from 'vite'
 import { viteSingleFile } from 'vite-plugin-singlefile'
 
-const outDir = process.env.NODE_ENV === 'development'
+const outDir = process.env.BUILD_ENV === 'local'
   ? '/mnt/c/Users/dustin/.glzr/zebar/whaleybar-build'
   : undefined
 
@@ -21,6 +21,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '~': fileURLToPath(new URL('./src', import.meta.url)),
+      $: fileURLToPath(new URL('..', import.meta.url)),
+      $models: fileURLToPath(new URL('../server/models', import.meta.url)),
     },
   },
   server: {