feat: multiproject & storage

.env.development

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_ARKE_SERVER_URL=http://0.0.0.0:4000
+NEXT_MULTIPROJECT=false
 NEXTAUTH_URL=http://localhost:3100/api/auth
 NEXTAUTH_SECRET=your_secret
 NEXT_PUBLIC_ARKE_PROJECT=""

arke/getClient.ts

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { Client, HTTPStatusCode, TToken } from "@arkejs/client";
+import { Client, TToken } from "@arkejs/client";
 import { GetServerSidePropsContext } from "next";
 import { getSession } from "next-auth/react";
 import { getToken } from "next-auth/jwt";
 import { getCookie } from "cookies-next";
-import { getCookieName } from "../utils/auth";
-import toast from "react-hot-toast";
+import { getCookieName } from "@/utils/auth";
+import { NextParsedUrlQuery } from "next/dist/server/request-meta";
 
 const getServerUrl = () => {
   if (
@@ -36,17 +36,23 @@ const getServerUrl = () => {
 const getProjectId = (context?: {
   req: GetServerSidePropsContext["req"];
   res: GetServerSidePropsContext["res"];
-}) =>
-  (process.env.NEXT_PUBLIC_ARKE_PROJECT ||
-    getCookie("arke_project", {
-      req: context?.req,
-      res: context?.res,
-    })?.toString()) ??
-  "";
+  query?: any;
+}) => {
+  const project = context?.query?.project ?? "arke_system";
+  return (
+    (project ||
+      getCookie("arke_project", {
+        req: context?.req,
+        res: context?.res,
+      })?.toString()) ??
+    ""
+  );
+};
 
 export const getClient = (context?: {
   req: GetServerSidePropsContext["req"];
   res: GetServerSidePropsContext["res"];
+  query?: NextParsedUrlQuery;
 }): Client => {
   const serverUrl = getServerUrl();
   return new Client({
@@ -68,16 +74,13 @@ export const getClient = (context?: {
           return config;
         },
         (err) => {
-          if (err.response) {
-            if (err.response.status === HTTPStatusCode.InternalServerError) {
-              toast.error(
-                `${err.message}: ${err.response.data?.errors?.detail}`
-              );
-            }
-            return Promise.reject(err);
-          } else {
-            toast.error(`Something went wrong. The Server is unreachable.`);
+          if (typeof window !== "undefined") {
+            const event = new CustomEvent("arke_client_reject", {
+              detail: err,
+            });
+            window.dispatchEvent(event);
           }
+          return Promise.reject(err);
         }
       );
       return api;

arke/useClient.ts

@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 
-import { getClient } from '@/arke/getClient';
+import { getClient } from "@/arke/getClient";
+import { useRouter } from "next/router";
 
 export default function useClient() {
-  return getClient();
+  const { query } = useRouter();
+  // TODO: fix query type
+  // @ts-ignore
+  return getClient({ query });
 }

components/ApiDocs/ApiDocsDrawer.tsx

@@ -48,7 +48,7 @@ function DocsTabContent({ doc }: { doc: Doc }) {
   return (
     <div className="api__docs__content">
       <h3 className="text-xl">{doc.title}</h3>
-      <p className="pt-2 pb-4">{doc.description}</p>
+      <p className="pb-4 pt-2">{doc.description}</p>
       <Tabs>
         {doc.code.map(({ language }, index) => (
           <Tabs.Tab key={index}>

components/ApiToast/ApiToast.tsx

@@ -0,0 +1,36 @@
+import { ReactNode, useEffect } from "react";
+import { HTTPStatusCode } from "@arkejs/client";
+import toast from "react-hot-toast";
+
+export default function ApiToast({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    window.addEventListener("arke_client_reject", onReject, false);
+  }, []);
+
+  function onReject(event: any) {
+    const err = event.detail;
+    try {
+      if (err.response) {
+        if (err.response.status === HTTPStatusCode.Forbidden) {
+          toast.error(
+            `You have not access on resource. Check your permissions`,
+            {
+              id: "permission_error",
+            }
+          );
+        }
+        if (err.response.status === HTTPStatusCode.InternalServerError) {
+          toast.error(`${err.message}: ${err.response.data?.errors?.detail}`);
+        }
+        return Promise.reject(err);
+      } else {
+        toast.error(`Something went wrong. The Server is unreachable.`);
+        return Promise.reject(err);
+      }
+    } catch (e) {
+      return Promise.reject(err);
+    }
+  }
+
+  return <div>{children}</div>;
+}

components/AppFormConfigProvider/AppFormConfigProvider.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { FormConfigProvider as FCProvider } from "@arkejs/form";
 import { Autocomplete, Checkbox, Input, Json } from "@arkejs/ui";
 import AutocompleteLink from "@/components/AppFormConfigProvider/components/AutocompleteLink";
-import Dropzone from "@/components/Dropzone/Dropzone";
+import FileDropzone from "@/components/AppFormConfigProvider/components/FileDropzone";
 
 export default function AppFormConfigProvider(props: { children: ReactNode }) {
   return (
@@ -96,12 +96,14 @@ export default function AppFormConfigProvider(props: { children: ReactNode }) {
         link: ({ field }: any) =>
           field?.link_ref?.id === "arke_file" ? (
             <>
-              <Dropzone
-                {...field}
-                onChange={(files) => {
-                  field?.onChange(files?.[0] ?? null);
-                }}
-              />
+              <FileDropzone {...field} />
+              {!field.value?.path && (
+                <Input
+                  {...field}
+                  label=""
+                  helperText="If you already known the file ID use this input"
+                />
+              )}
             </>
           ) : (
             <AutocompleteLink {...field} onChange={field.onChange} />

components/AppFormConfigProvider/components/FileDropzone.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2023 Arkemis S.r.l.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState } from "react";
+import useClient from "@/arke/useClient";
+import Dropzone from "@/components/Dropzone/Dropzone";
+import { LinkRef } from "@/types/link";
+import { TFile } from "@/types/file";
+
+type FileDropzoneProps = {
+  link_ref: LinkRef;
+  onChange: (value: any) => void;
+  value: TFile;
+};
+
+const FileDropzone = (props: FileDropzoneProps) => {
+  const { onChange } = props;
+  const client = useClient();
+  const [value, setValue] = useState<TFile | null>(props.value);
+
+  useEffect(() => {
+    if (value) {
+      client.unit
+        // @ts-ignore
+        // TODO: check value that change
+        .get("arke_file", value)
+        .then((res) => {
+          setValue(res.data.content as TFile);
+          onChange(res.data.content.id);
+        });
+    }
+  }, []);
+
+  return (
+    <Dropzone
+      {...props}
+      value={value as TFile}
+      onChange={(files) => {
+        if (files?.length > 0) {
+          onChange(files?.[0]);
+        } else {
+          setValue(null);
+          onChange(null);
+        }
+      }}
+    />
+  );
+};
+
+export default FileDropzone;