fix: updated immich endpoint usage to runtime env

Signed-off-by: Varun Raj <mailme@varunraj.in>

.env.sample

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_IMMICH_URL=""
+IMMICH_URL=""
 IMMICH_API_KEY=""
 DATABASE_URL=""

.github/workflows/docker-release.yml

@@ -42,7 +42,4 @@ jobs:
           docker build --build-arg VERSION=${{ env.VERSION }} \
           --push -t varunraj/immich-power-tools:${{ env.VERSION }} \
           -t varunraj/immich-power-tools:latest .
-        env:
-          NEXT_PUBLIC_IMMICH_URL: http://192.168.0.200:3001
-          IMMICH_API_KEY: "immich-api-key"
-          DATABASE_URL: "dabaase-url"
+        

README.md

@@ -32,7 +32,7 @@ docker compose up -d
 Copy paste the `.env.example` to `.env` and fill in the values.
 
 ```bash
-NEXT_PUBLIC_IMMICH_URL="" # Immich API URL
+IMMICH_URL="" # Immich API URL
 IMMICH_API_KEY="" # Immich API Key 
 DATABASE_URL="" # Postgress Database URL
 ```

src/components/people/PeopleList.tsx

@@ -12,41 +12,6 @@ import PersonHideCell from "./PersonHideCell";
 import { PeoplePagination } from "./PeoplePagination";
 import { useRouter } from "next/router";
 
-const columns: ColumnDef<IPerson>[] = [
-  {
-    header: "Name",
-    accessorKey: "name",
-    cell: ({ row }) => <PersonItem person={row.original} />,
-  },
-  {
-    header: "Birth Date",
-    accessorKey: "birthDate",
-    cell: ({ row }) => <PersonBirthdayCell person={row.original} />,
-  },
-  {
-    header: "Hidden",
-    accessorKey: "isHidden",
-    cell: ({ row }) => (
-      <PersonHideCell person={row.original} />
-    ),
-  },
-  {
-    header: "Link",
-    accessorKey: "id",
-    cell: ({ row }) => (
-      <Link href={`${ENV.IMMICH_URL}/people/${row.original.id}`} target="_blank">
-        View
-      </Link>
-    )
-  },
-  {
-    header: "Updated At",
-    accessorKey: "updatedAt",
-    cell: ({ row }) => <span>{new Date(
-      row.original.updatedAt
-    ).toDateString()}</span>,
-  },
-];
 
 export default function PeopleList() {
   const router = useRouter()

src/components/people/PersonItem.tsx

@@ -9,11 +9,13 @@ import clsx from "clsx";
 import Link from "next/link";
 import { ENV } from "@/config/environment";
 import { ArrowUpRight } from "lucide-react";
+import { useConfig } from "@/contexts/ConfigContext";
 
 interface IProps {
   person: IPerson;
 }
 export default function PersonItem({ person }: IProps) {
+  const { immichURL } = useConfig();
   const [editMode, setEditMode] = useState(false);
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState(person);
@@ -75,7 +77,7 @@ export default function PersonItem({ person }: IProps) {
         <div className="absolute top-2 left-2 group-hover:block hidden">
           <Link
             className="bg-green-300 block rounded-lg px-2 py-1 text-sm"
-            href={`${ENV.IMMICH_URL}/people/${person.id}`}
+            href={`${immichURL}/people/${person.id}`}
             target="_blank"
           >
             <ArrowUpRight size={16} />

src/components/shared/Sidebar.tsx

@@ -11,12 +11,14 @@ import { useTheme } from "next-themes";
 
 import dynamic from "next/dynamic";
 import Image from "next/image";
+import { useConfig } from "@/contexts/ConfigContext";
 
 const ThemeSwitcher = dynamic(() => import("@/components/shared/ThemeSwitcher"), {
   ssr: false,
 });
 
 export default function Sidebar() {
+  const { immichURL } = useConfig();
   const router = useRouter();
   const { pathname } = router;
 
@@ -58,8 +60,8 @@ export default function Sidebar() {
         <div>
           <div className="flex flex-col gap-1 text-xs text-center py-2">
             <p className="text-muted-foreground font-mono">Connected to</p>
-            <Link href={ENV.IMMICH_URL} target="_blank" className="font-mono">
-              {ENV.IMMICH_URL}
+            <Link href={immichURL} target="_blank" className="font-mono">
+              {immichURL}
             </Link>
           </div>
           <div className="border text-muted-foreground text-xs text-center py-2">

src/config/environment.ts

@@ -1,5 +1,5 @@
 export const ENV = {
-  IMMICH_URL: process.env.NEXT_PUBLIC_IMMICH_URL as string,
+  IMMICH_URL: process.env.IMMICH_URL as string,
   IMMICH_API_KEY: process.env.IMMICH_API_KEY as string,
   DATABASE_URL: process.env.DATABASE_URL as string,
 }

src/contexts/ConfigContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+
+interface ConfigContextType {
+  immichURL: string;
+}
+
+const ConfigContext = createContext<ConfigContextType>({
+  immichURL: "",
+});
+
+export default ConfigContext;
+
+export const useConfig = () => {
+  const context = useContext(ConfigContext) as ConfigContextType;
+  return context;
+}

src/pages/_app.tsx

@@ -1,9 +1,34 @@
 import RootLayout from "@/components/layouts/RootLayout";
 import "@/styles/globals.scss";
 import type { AppProps } from "next/app";
-import { ThemeProvider } from 'next-themes'
+import { ThemeProvider } from "next-themes";
+import { ENV } from "@/config/environment";
+import ConfigContext from "@/contexts/ConfigContext";
 
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <ThemeProvider attribute="class" storageKey = 'theme'><RootLayout><Component {...pageProps} /></RootLayout></ThemeProvider>
+interface AppPropsWithProps extends AppProps {
+  props: {
+    immichURL: string;
+  };
 }
+const App = ({ Component, pageProps, ...props }: AppPropsWithProps) => {
+  console.log("App -> pageProps", props);
+  return (
+    <ConfigContext.Provider value={props.props}>
+      <ThemeProvider attribute="class" storageKey="theme">
+        <RootLayout>
+          <Component {...pageProps} />
+        </RootLayout>
+      </ThemeProvider>
+    </ConfigContext.Provider>
+  );
+};
+
+App.getInitialProps = async () => {
+  return {
+    props: {
+      immichURL: ENV.IMMICH_URL,
+    },
+  };
+};
+
+export default App;