chore(appwrite): update appwrite examples with cloud (#6168)

examples/data-provider-appwrite-tutorial-docs/src/App.tsx

@@ -13,12 +13,20 @@ import routerProvider, {
   NavigateToResource,
   UnsavedChangesNotifier,
 } from "@refinedev/react-router-v6";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
+
 import "@refinedev/antd/dist/reset.css";
 import { App as AntdApp, ConfigProvider } from "antd";
-import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 
 import { appwriteClient, authProvider } from "./utility";
+
 import { PostCreate, PostEdit, PostList, PostShow } from "./pages/posts";
+import {
+  CategoryCreate,
+  CategoryList,
+  CategoryShow,
+  CategoryEdit,
+} from "./pages/categories";
 
 const App: React.FC = () => {
   return (
@@ -28,22 +36,32 @@ const App: React.FC = () => {
         <AntdApp>
           <Refine
             dataProvider={dataProvider(appwriteClient, {
-              databaseId: "6537bfaa2f54cd235e51",
+              databaseId: "default",
             })}
             liveProvider={liveProvider(appwriteClient, {
-              databaseId: "6537bfaa2f54cd235e51",
+              databaseId: "default",
             })}
             authProvider={authProvider}
             routerProvider={routerProvider}
             resources={[
               {
-                name: "6537bff1acea7f73acbf",
+                name: "blog_posts",
                 list: "/posts",
                 create: "/posts/create",
                 edit: "/posts/edit/:id",
                 show: "/posts/show/:id",
                 meta: {
-                  label: "Posts",
+                  label: "Blog Posts",
+                },
+              },
+              {
+                name: "categories",
+                list: "/categories",
+                create: "/categories/create",
+                show: "/categories/show/:id",
+                edit: "/categories/edit/:id",
+                meta: {
+                  label: "Categories",
                 },
               },
             ]}
@@ -69,9 +87,7 @@ const App: React.FC = () => {
               >
                 <Route
                   index
-                  element={
-                    <NavigateToResource resource="6537bff1acea7f73acbf" />
-                  }
+                  element={<NavigateToResource resource="blog_posts" />}
                 />
 
                 <Route path="/posts">
@@ -80,22 +96,34 @@ const App: React.FC = () => {
                   <Route path="edit/:id" element={<PostEdit />} />
                   <Route path="show/:id" element={<PostShow />} />
                 </Route>
+                <Route path="/categories">
+                  <Route index element={<CategoryList />} />
+                  <Route path="create" element={<CategoryCreate />} />
+                  <Route path="edit/:id" element={<CategoryEdit />} />
+                  <Route path="show/:id" element={<CategoryShow />} />
+                </Route>
               </Route>
 
               <Route
                 element={
                   <Authenticated key="auth-pages" fallback={<Outlet />}>
-                    <NavigateToResource resource="6537bff1acea7f73acbf" />
+                    <NavigateToResource resource="blog_posts" />
                   </Authenticated>
                 }
               >
                 <Route
                   path="/login"
-                  element={<AuthPage forgotPasswordLink={false} />}
-                />
-                <Route
-                  path="/register"
-                  element={<AuthPage type="register" />}
+                  element={
+                    <AuthPage
+                      formProps={{
+                        initialValues: {
+                          remember: false,
+                          email: "[email protected]",
+                          password: "demodemo",
+                        },
+                      }}
+                    />
+                  }
                 />
               </Route>
 

examples/data-provider-appwrite-tutorial-docs/src/interfaces/index.d.ts

@@ -1,3 +1,10 @@
+export interface ICategory {
+  id: string;
+  title: string;
+}
+
+export const IStatus = "draft" | "published" | "rejected";
+
 export interface IFile {
   name: string;
   percent: number;
@@ -12,10 +19,18 @@ export interface IPost {
   id: string;
   title: string;
   content: string;
+  status: IStatus;
+  category: {
+    $id: string;
+    title: string;
+  };
+  images: string;
 }
 
 export interface IPostVariables {
   id: string;
   title: string;
   content: string;
+  category: string;
+  images: string;
 }

examples/data-provider-appwrite-tutorial-docs/src/pages/categories/create.tsx

@@ -0,0 +1,31 @@
+import { Create, useForm } from "@refinedev/antd";
+import { Form, Input } from "antd";
+
+import type { HttpError } from "@refinedev/core";
+import type { ICategory } from "../../interfaces";
+
+export const CategoryCreate = () => {
+  const { formProps, saveButtonProps } = useForm<
+    ICategory,
+    HttpError,
+    ICategory
+  >();
+
+  return (
+    <Create saveButtonProps={saveButtonProps}>
+      <Form {...formProps} layout="vertical">
+        <Form.Item
+          label="Title"
+          name="title"
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Create>
+  );
+};

examples/data-provider-appwrite-tutorial-docs/src/pages/categories/edit.tsx

@@ -0,0 +1,31 @@
+import { Edit, useForm } from "@refinedev/antd";
+import { Form, Input } from "antd";
+
+import type { HttpError } from "@refinedev/core";
+import type { ICategory } from "../../interfaces";
+
+export const CategoryEdit = () => {
+  const { formProps, saveButtonProps } = useForm<
+    ICategory,
+    HttpError,
+    ICategory
+  >({});
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Form {...formProps} layout="vertical">
+        <Form.Item
+          label="Title"
+          name="title"
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Edit>
+  );
+};

examples/data-provider-appwrite-tutorial-docs/src/pages/categories/index.tsx

@@ -0,0 +1,4 @@
+export * from "./list";
+export * from "./show";
+export * from "./create";
+export * from "./edit";

examples/data-provider-appwrite-tutorial-docs/src/pages/categories/list.tsx

@@ -0,0 +1,22 @@
+import { List, useTable, getDefaultSortOrder } from "@refinedev/antd";
+import { Table } from "antd";
+
+import type { ICategory } from "../../interfaces";
+
+export const CategoryList = () => {
+  const { tableProps, sorters } = useTable<ICategory>();
+
+  return (
+    <List>
+      <Table {...tableProps} rowKey="id">
+        <Table.Column<ICategory>
+          dataIndex="id"
+          title="ID"
+          sorter
+          defaultSortOrder={getDefaultSortOrder("id", sorters)}
+        />
+        <Table.Column<ICategory> dataIndex="title" title="Title" sorter />
+      </Table>
+    </List>
+  );
+};

examples/data-provider-appwrite-tutorial-docs/src/pages/categories/show.tsx

@@ -0,0 +1,26 @@
+import { useShow } from "@refinedev/core";
+
+import { Show } from "@refinedev/antd";
+
+import { Typography } from "antd";
+
+import type { ICategory } from "../../interfaces";
+
+const { Title, Text } = Typography;
+
+export const CategoryShow = () => {
+  const { queryResult } = useShow<ICategory>();
+
+  const { data, isLoading } = queryResult;
+  const record = data?.data;
+
+  return (
+    <Show isLoading={isLoading}>
+      <Title level={5}>Id</Title>
+      <Text>{record?.id}</Text>
+
+      <Title level={5}>Title</Title>
+      <Text>{record?.title}</Text>
+    </Show>
+  );
+};

examples/data-provider-appwrite-tutorial-docs/src/pages/posts/create.tsx

@@ -1,8 +1,12 @@
-import type { HttpError } from "@refinedev/core";
-import { Create, useForm } from "@refinedev/antd";
-import { Form, Input } from "antd";
+import { Create, useForm, useSelect } from "@refinedev/antd";
+import { Form, Input, Select, Upload } from "antd";
+import MDEditor from "@uiw/react-md-editor";
+
+import { normalizeFile, statuses, storage } from "../../utility";
 
-import type { IPost, IPostVariables } from "../../interfaces";
+import type { HttpError } from "@refinedev/core";
+import type { RcFile } from "antd/lib/upload/interface";
+import type { IPost, IPostVariables, ICategory } from "../../interfaces";
 
 export const PostCreate = () => {
   const { formProps, saveButtonProps } = useForm<
@@ -11,9 +15,24 @@ export const PostCreate = () => {
     IPostVariables
   >();
 
+  const { selectProps: categorySelectProps } = useSelect<ICategory>({
+    resource: "categories",
+    optionLabel: "title",
+    optionValue: "id",
+  });
+
   return (
     <Create saveButtonProps={saveButtonProps}>
-      <Form {...formProps} layout="vertical">
+      <Form
+        {...formProps}
+        layout="vertical"
+        onFinish={(values) => {
+          formProps.onFinish?.({
+            ...values,
+            images: JSON.stringify(values.images),
+          });
+        }}
+      >
         <Form.Item
           label="Title"
           name="title"
@@ -25,7 +44,28 @@ export const PostCreate = () => {
         >
           <Input />
         </Form.Item>
-
+        <Form.Item
+          label="Category"
+          name="category"
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Select {...categorySelectProps} />
+        </Form.Item>
+        <Form.Item
+          label="Status"
+          name="status"
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Select options={statuses} />
+        </Form.Item>
         <Form.Item
           label="Content"
           name="content"
@@ -35,7 +75,42 @@ export const PostCreate = () => {
             },
           ]}
         >
-          <Input.TextArea rows={5} />
+          <MDEditor data-color-mode="light" />
+        </Form.Item>
+        <Form.Item label="Images">
+          <Form.Item
+            name="images"
+            valuePropName="fileList"
+            normalize={normalizeFile}
+            noStyle
+          >
+            <Upload.Dragger
+              name="file"
+              listType="picture"
+              multiple
+              customRequest={async ({ file, onError, onSuccess }) => {
+                try {
+                  const rcFile = file as RcFile;
+
+                  const { $id } = await storage.createFile(
+                    "default",
+                    rcFile.name,
+                    rcFile,
+                  );
+
+                  const url = storage.getFileView("default", $id);
+
+                  onSuccess?.({ url }, new XMLHttpRequest());
+                } catch (error) {
+                  onError?.(new Error("Upload Error"));
+                }
+              }}
+            >
+              <p className="ant-upload-text">
+                Drag &amp; drop a file in this area
+              </p>
+            </Upload.Dragger>
+          </Form.Item>
         </Form.Item>
       </Form>
     </Create>