build(deps): bump axios and @directus/sdk (#521)

* build(deps): bump axios and @directus/sdk

Bumps [axios](https://github.com/axios/axios) to 1.8.3 and updates ancestor dependency [@directus/sdk](https://github.com/directus/directus/tree/HEAD/sdk). These dependencies need to be updated together.


Updates `axios` from 1.7.9 to 1.8.3
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md)
- [Commits](axios/axios@v1.7.9...v1.8.3)

Updates `@directus/sdk` from 10.3.5 to 18.0.3
- [Release notes](https://github.com/directus/directus/releases)
- [Commits](https://github.com/directus/directus/commits/HEAD/sdk)

---
updated-dependencies:
- dependency-name: axios
  dependency-type: indirect
- dependency-name: "@directus/sdk"
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

* feat: migrate to latest directus sdk

* fix: typescript issue with readonly string[] of languages

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Scheidt <[email protected]>

Author: dependabot[bot]

app/i18next-options.ts

@@ -1,6 +1,8 @@
+export const supportedLanguages = ["en", "de"] as const;
+
 export default {
   // This is the list of languages your application supports
-  supportedLngs: ["en", "de"],
+  supportedLngs: supportedLanguages,
   // This is the language you want to use in case
   // if the user language is not in the supportedLngs
   fallbackLng: "en",

app/i18next.server.ts

@@ -8,7 +8,7 @@ let i18next: RemixI18Next = new RemixI18Next({
   detection: {
     // persist language selection in cookie
     cookie: i18nCookie,
-    supportedLanguages: i18nextOptions.supportedLngs,
+    supportedLanguages: [...i18nextOptions.supportedLngs],
     fallbackLanguage: i18nextOptions.fallbackLng,
   },
   // This is the configuration for i18next used

app/lib/directus.ts

@@ -1,40 +1,45 @@
-import { Directus, type ID  } from '@directus/sdk';
+import {
+  createDirectus,
+  type DirectusClient,
+  rest,
+  type RestClient,
+} from "@directus/sdk";
 
-const directusUrl = process.env.DIRECTUS_URL || 'http://localhost:8055'
+const directusUrl = process.env.DIRECTUS_URL || "http://localhost:8055";
 
 export type UseCase = {
-    id: ID,
-    status: string,
-    image: string,
-    title: string,
-    description: string,
-    content: string,
-    language: "de" | "en"
-}
+  id: number | string;
+  status: string;
+  image: string;
+  title: string;
+  description: string;
+  content: string;
+  language: "de" | "en";
+};
 
 export type Feature = {
-    id: ID,
-    title: string,
-    description: string,
-    icon: string,
-    language: "de" | "en"
-}
+  id: number | string;
+  title: string;
+  description: string;
+  icon: string;
+  language: "de" | "en";
+};
 
 export type Partner = {
-    id: ID,
-    name: string,
-    logo: string,
-    link: string
-}
+  id: number | string;
+  name: string;
+  logo: string;
+  link: string;
+};
 
 type DirectusCollection = {
-    use_cases: UseCase,
-    features: Feature,
-    partners: Partner
-}
+  use_cases: UseCase[];
+  features: Feature[];
+  partners: Partner[];
+};
 
-const directus = new Directus<DirectusCollection>(directusUrl)
+const directus = createDirectus<DirectusCollection>(directusUrl).with(rest());
 
-export async function getDirectusClient () {
-    return directus
-}
+export function getDirectusClient(): DirectusClient<DirectusCollection> & RestClient<DirectusCollection> {
+  return directus;
+}

app/routes/_index.tsx

@@ -1,3 +1,4 @@
+import { readItems } from "@directus/sdk";
 import { useMediaQuery } from "@mantine/hooks";
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
@@ -11,6 +12,7 @@ import Integrations from "~/components/landing/sections/integrations";
 import Partners from "~/components/landing/sections/partners";
 import PricingPlans from "~/components/landing/sections/pricing-plans";
 import Stats from "~/components/landing/stats";
+import { type supportedLanguages } from "~/i18next-options";
 import i18next from "~/i18next.server";
 import  { type Partner, getDirectusClient  } from "~/lib/directus";
 import { getLatestDevices } from "~/models/device.server";
@@ -44,26 +46,26 @@ const sections = [
 ];
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  let locale = await i18next.getLocale(request);
-  const directus = await getDirectusClient();
+  const locale = await i18next.getLocale(request) as typeof supportedLanguages[number];
+  const directus = getDirectusClient();
 
-  const useCasesResponse = await directus.items("use_cases").readByQuery({
+  const useCasesResponse = await directus.request(readItems("use_cases", {
     fields: ["*"],
     filter: {
-      language: locale,
+      language: {_eq: locale },
     },
-  });
+  }));
 
-  const featuresResponse = await directus.items("features").readByQuery({
+  const featuresResponse = await directus.request(readItems("features", {
     fields: ["*"],
     filter: {
-      language: locale,
+      language: {_eq: locale },
     },
-  });
+  }));
 
-  const partnersResponse = await directus.items("partners").readByQuery({
+  const partnersResponse = await directus.request(readItems("partners", {
     fields: ["*"],
-  });
+  }));
 
   //* Get user Id from session
   const userId = await getUserId(request);
@@ -78,9 +80,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const latestDevices = await getLatestDevices();
 
   return data({
-    useCases: useCasesResponse.data,
-    features: featuresResponse.data,
-    partners: partnersResponse.data,
+    useCases: useCasesResponse,
+    features: featuresResponse,
+    partners: partnersResponse,
     stats: stats,
     header: { userId: userId, userName: userName },
     locale: locale,

package-lock.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@conform-to/react": "^0.9.2",
     "@conform-to/zod": "^0.9.2",
-    "@directus/sdk": "^10.3.5",
+    "@directus/sdk": "^18.0.3",
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.3.4",
     "@isaacs/express-prometheus-middleware": "^1.2.1",