Merge pull request #297 from The-Creative-Programming-Group/move-to-t…

…urso-drizzle

refactor: Rebuild Search feature

.env.example

@@ -6,7 +6,7 @@
 # secrets in it. If you are cloning this repo, create a copy of this file named
 # ".env" and populate it with your secrets.
 
-# When adding additional environment variables, the schema in "/src/env.mjs"
+# When adding additional environment variables, the schema in the env.ts file in the correct package and eventually the env config in the turbo.json file should be changed accordingly.
 # should be updated accordingly.
 
 OPEN_WEATHER_API_KEY="..."
@@ -18,4 +18,4 @@ UPSTASH_RATELIMITER_EXCLUDED_IPS="..." // List of IPs separated by comma
 RESEND_API_KEY="re_..."
 QWEATHER_API_KEY="..."
 API_NINJA_API_KEY="..."
-NEXT_PUBLIC_CONVEX_URL="https://..."
+NEXT_PUBLIC_CONVEX_URL="https://..." // The Convex Dev / Prod (if you want to test against prod) public convex URL

.github/workflows/update-convex.yml

@@ -13,16 +13,16 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
 jobs:
-    update-city-data:
-        runs-on: ubuntu-latest
-        steps:
-          - uses: actions/checkout@v4
+  update-city-data:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
 
-          - name: Setup
-            uses: ./tooling/github/setup
+      - name: Setup
+        uses: ./tooling/github/setup
 
-          - name: Deploy to convex
-            run: pnpm convex:deploy
-            env:
-              CONVEX_URL: ${{ secrets.CONVEX_URL }}
-              CONVEX_DEPLOY_KEY: ${{ secrets.CONVEX_DEPLOY_KEY }}
+      - name: Deploy to convex
+        run: pnpm convex:deploy
+        env:
+          CONVEX_URL: ${{ secrets.CONVEX_URL }}
+          CONVEX_DEPLOY_KEY: ${{ secrets.CONVEX_DEPLOY_KEY }}

README.md

@@ -18,6 +18,8 @@ Next you will have to fill the `.env` file with your own API keys, following the
 <br> <br>
 After that you have to go into the city-data dir (`cd packages/city-data`), execute this command and follow all Convex setup instructions: `pnpm dlx convex dev`
 <br> <br>
+From there on you have to run `pnpm update:city-data-dev` (for inserting the city data into the db in the dev branch).
+<br> <br>
 After that you can run the following command, to look at the current state (with your own changes) of the project by executing this command at the root directory:
 `pnpm dev`
 
@@ -46,6 +48,7 @@ If you are not familiar with the different technologies used in this project, pl
 - [Turborepo](https://turbo.build/repo)
 - [Playwright](https://playwright.dev)
 - [Convex](https://convex.dev)
+
 #### APIs
 - [OpenWeatherMap API](https://openweathermap.org/api)
 - [Open Meteo API](https://open-meteo.com)
@@ -57,7 +60,8 @@ If you are not familiar with the different technologies used in this project, pl
 .github
   └─ workflows
         ├─ Playwright tests
-        ├─ Update Convex Deployment
+        ├─ Lighthouse score in Pull Requests
+        ├─ Update Convex Deployment 
         └─ CI with pnpm cache setup
 apps
   └─ next.js
@@ -74,7 +78,7 @@ packages
   ├─ e2e-web-tests
   |    └─ Playwright tests for the Next.js app
   ├─ types 
-  |    └─ Types that are used across the whole project  
+  |    └─ Types that are used across the whole project
   └─ ui
       └─ Start of a UI package for the webapp using shadcn-ui and custom components
 tooling

apps/web/next.config.mjs

@@ -1,6 +1,5 @@
-// Importing env files here to validate on build
-import './src/env.mjs'
-import '@weatherio/api/env'
+import createJiti from 'jiti'
+import { fileURLToPath } from 'node:url'
 import withBundleAnalyzer from '@next/bundle-analyzer'
 import withPWAInit from '@ducanh2912/next-pwa'
 import { withAxiom } from 'next-axiom'
@@ -17,11 +16,15 @@ const withMyBundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true'
 })
 
+const jiti = createJiti(fileURLToPath(import.meta.url))
+
 /**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
- * This is especially useful for Docker builds.
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ * Importing env files here to validate on build
  */
-!process.env.SKIP_ENV_VALIDATION && (await import('./src/env.mjs'))
+jiti('./src/env.ts')
+jiti('@weatherio/api/env')
 
 /** @type {import("next").NextConfig} */
 const config = withMyBundleAnalyzer(withPWA(

apps/web/package.json

@@ -31,8 +31,9 @@
     "@weatherio/types": "workspace:^0.1.0",
     "@weatherio/ui": "workspace:^0.1.0",
     "clsx": "^2.1.0",
-    "convex": "^1.10.0",
+    "convex": "^1.11.0",
     "dayjs": "^1.11.10",
+    "jiti": "^1.21.0",
     "next": "^14.1.3",
     "next-axiom": "^1.1.1",
     "next-international": "^1.2.4",

apps/web/src/components/ConvexClientProvider.tsx → apps/web/src/components/convex-client-provider.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL);
 

apps/web/src/env.mjs → apps/web/src/env.ts

@@ -1,33 +1,35 @@
-import { createEnv } from '@t3-oss/env-nextjs'
-import { z } from 'zod'
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
 
 export const env = createEnv({
   shared: {
     NODE_ENV: z
-      .enum(['development', 'production', 'test'])
-      .default('development'),
-    VERCEL_ENV: z.enum(['development', 'preview', 'production']).optional(),
+      .enum(["development", "production", "test"])
+      .default("development"),
+    VERCEL_ENV: z.enum(["development", "preview", "production"]).optional(),
     VERCEL_URL: z
       .string()
       .optional()
       .transform((v) => (v ? `https://${v}` : undefined)),
-    PORT: z.coerce.number().default(3000)
+    PORT: z.coerce.number().default(3000),
   },
   client: {
-    NEXT_PUBLIC_CONVEX_URL: z.string().min(1)
+    NEXT_PUBLIC_CONVEX_URL: z.string().min(1),
   },
   /**
    * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
    */
   runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
     PORT: process.env.PORT,
+    VERCEL_ENV: process.env.VERCEL_ENV,
     VERCEL_URL: process.env.VERCEL_URL,
-    NEXT_PUBLIC_CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL
+    NEXT_PUBLIC_CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL,
 
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   skipValidation:
     !!process.env.CI ||
     !!process.env.SKIP_ENV_VALIDATION ||
-    process.env.npm_lifecycle_event === 'lint'
-})
+    process.env.npm_lifecycle_event === "lint",
+});

apps/web/src/pages/_app.tsx

@@ -12,7 +12,7 @@ import { AxiomWebVitals } from "next-axiom";
 
 import { Toaster } from "@weatherio/ui/sonner";
 
-import ConvexClientProvider from "~/components/ConvexClientProvider";
+import ConvexClientProvider from "~/components/convex-client-provider";
 import { PWALifeCycle } from "~/components/PWALifecycle";
 import { api } from "~/lib/utils/api";
 import en from "~/locales/en";

apps/web/src/pages/api/trpc/[trpc].ts

@@ -3,7 +3,7 @@ import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
 import { appRouter, createTRPCContext } from "@weatherio/api";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 export const config = { runtime: "edge" };
 

apps/web/src/pages/home/index.tsx

@@ -46,8 +46,13 @@ import type { WindSpeedUnitType } from "~/states";
 import Layout from "~/components/Layout";
 import { MoonPhaseInfo } from "~/components/moon-phase-info";
 import { api } from "~/lib/utils/api";
-import { getLocaleProps, useScopedI18n } from "~/locales";
-import { activeCity$, temperatureUnit$, windSpeedUnit$ } from "~/states";
+import { getLocaleProps, useCurrentLocale, useScopedI18n } from "~/locales";
+import {
+  activeCity$,
+  addedCities$,
+  temperatureUnit$,
+  windSpeedUnit$,
+} from "~/states";
 
 const Map = dynamic(() => import("@weatherio/ui/map"), { ssr: false });
 
@@ -124,22 +129,34 @@ function convertWindSpeed(
 }
 
 const InternalHome = observer(() => {
+  const locale = useCurrentLocale();
   const [isMoreInfoCollapsibleOpen, setIsMoreInfoCollapsibleOpen] =
     useState(false);
   const [isMoreWarningsCollapsibleOpen, setIsMoreWarningsCollapsibleOpen] =
     useState(false);
-  const { locale, query, replace, isReady } = useRouter();
+  const { query, replace, isReady } = useRouter();
 
   const cityById = useQuery(
     convexApi.getCity.findCityById,
-    typeof query.cityId === "string" ? { id: parseInt(query.cityId) } : "skip",
+    typeof query.cityId === "string" ? { id: query.cityId } : "skip",
   );
 
   useEffect(() => {
+    // This is just for a migration of the types. This can be modified or removed in the future
+    if (typeof activeCity$.id.get() !== "string") {
+      activeCity$.delete();
+    }
+    addedCities$.get().map((city) => {
+      if (typeof city.id !== "string") {
+        addedCities$.delete();
+        activeCity$.delete();
+      }
+    });
+
     const cityByIdIsLoading =
       cityById === undefined && typeof query.cityId === "string";
     if (!cityByIdIsLoading && !cityById && isReady) {
-      if (activeCity$.id.get() !== 0 && activeCity$.name.get() !== "") {
+      if (activeCity$.id.get() !== "" && activeCity$.name.get() !== "") {
         void replace("/home?cityId=" + activeCity$.id.get());
         return;
       } else {
@@ -152,7 +169,7 @@ const InternalHome = observer(() => {
   const weatherData = api.weather.getWeather.useQuery(
     cityById
       ? {
-          coordinates: cityById.coord,
+          coordinates: { lat: cityById.lat, lon: cityById.lon },
           timezone: dayjs.tz.guess(),
           lang: locale,
         }
@@ -319,7 +336,7 @@ const InternalHome = observer(() => {
   };
 
   const mapPosition: [number, number] | undefined = cityById
-    ? [cityById.coord.lat, cityById.coord.lon]
+    ? [cityById.lat, cityById.lon]
     : undefined;
 
   const [isSafari, setIsSafari] = useState<boolean>(false);
@@ -346,11 +363,25 @@ const InternalHome = observer(() => {
     <Layout
       classNameShareButton="mt-44"
       page="home"
-      title={cityById ? cityById.name : undefined}
+      title={
+        cityById
+          ? locale === "de" && cityById.germanName
+            ? cityById.germanName
+            : cityById.name
+          : undefined
+      }
     >
       <div className="mt-24 flex flex-col items-center">
         <h1 className="text-center text-4xl sm:text-5xl md:text-7xl">
-          {cityById ? cityById.name : <Skeleton className="h-20 w-80" />}
+          {cityById ? (
+            locale === "de" && cityById.germanName ? (
+              cityById.germanName
+            ) : (
+              cityById.name
+            )
+          ) : (
+            <Skeleton className="h-20 w-80" />
+          )}
         </h1>
         <h1 className="mt-3 text-6xl text-gray-500 md:text-7xl">
           {temperature ? temperature : <Skeleton className="h-20 w-36" />}

apps/web/src/pages/index.tsx

@@ -7,14 +7,29 @@ import { useRouter } from "next/router";
 
 import background from "~/assets/background.png";
 import { getLocaleProps, useScopedI18n } from "~/locales";
-import { activeCity$ } from "~/states";
+import { activeCity$, addedCities$ } from "~/states";
 
 const PublicHome: NextPage = () => {
   const translation = useScopedI18n("common");
   const router = useRouter();
 
   useLayoutEffect(() => {
-    if (activeCity$.id.get() !== 0 && activeCity$.name.get() !== "") {
+    // This is just for a migration of the types. This can be modified or removed in the future
+    if (typeof activeCity$.id.get() !== "string") {
+      activeCity$.delete();
+    }
+    addedCities$.get().map((city) => {
+      if (typeof city.id !== "string") {
+        addedCities$.delete();
+        activeCity$.delete();
+      }
+    });
+
+    if (
+      activeCity$ &&
+      activeCity$.id.get() !== "" &&
+      activeCity$.name.get() !== ""
+    ) {
       void router.push("/home?cityId=" + activeCity$.id.get());
     }
   });