Qa02

nextjs-with-roq-auth/package.json

@@ -13,7 +13,7 @@
     "@faker-js/faker": "^7.6.0",
     "@next/font": "13.1.1",
     "@prisma/client": "^4.10.1",
-    "@roq/nextjs": "^0.1.68",
+    "@roq/nextjs": "^1.0.17",
     "bcrypt": "^5.1.0",
     "eslint": "8.31.0",
     "eslint-config-next": "13.1.1",
@@ -23,9 +23,12 @@
     "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-select": "^5.7.2",
     "swr": "^2.0.3",
     "typescript": "4.9.4",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.0",

nextjs-with-roq-auth/prisma/migrations/20230307161543_init/migration.sql

@@ -0,0 +1,32 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "roqUserId" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "type" TEXT NOT NULL DEFAULT 'user',
+    "password" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "File" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "roqFileId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "File_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_roqUserId_key" ON "User"("roqUserId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "File_userId_roqFileId_key" ON "File"("userId", "roqFileId");

nextjs-with-roq-auth/src/components/file/file-card.tsx

@@ -1,6 +1,6 @@
-import styles from "components/file/file-card.module.css";
-import Card from "components/card";
-import { UserFile } from "components/file/types";
+import styles from 'components/file/file-card.module.css';
+import Card from 'components/card';
+import { UserFile } from 'components/file/types';
 
 export default function FileCard({ file }: { file: UserFile }) {
   const { name, url, createdAt, createdByUser } = file;

nextjs-with-roq-auth/src/components/file/files.tsx

@@ -1,46 +1,222 @@
-import useSWR, { Fetcher } from "swr";
-import { routes } from "routes";
-import styles from "components/file/files.module.css";
-import FileCard from "components/file/file-card";
-import Loader from "components/loader";
-import { FilesFetchResponse } from "components/file/types";
-import Card from "components/card";
-import UploadFile from "components/file/upload-file";
+import styles from 'components/file/files.module.css';
+import Loader from 'components/loader';
+import Card from 'components/card';
+import UploadFile from 'components/file/upload-file';
+import { useSession } from '@roq/nextjs';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import useSWRMutation from 'swr/mutation';
+import useSWR from 'swr'
+import FileCard from './file-card';
+import { fileCategoriesQuery, filesQuery } from '../../graphql/queries';
+import { graphqlRequest } from '../../utils/graphql-request.util';
+import { UserFile } from './types';
+import { SelectFilter } from './select.filter';
+import { routes } from '../../routes';
+import { FileInterface } from '@roq/ui-react/dist/features';
 
+type OptionType = { label: string, value: string };
+const fetcher = (url: string, options: RequestInit) => fetch(url, options).then((res) => res?.json())
 export default function Files() {
-  const fetcher: Fetcher<FilesFetchResponse> = (apiURL: string) =>
-    fetch(apiURL).then((res) => res.json());
-
-  const { data, error, isLoading, mutate } = useSWR(
-    routes.server.files,
-    fetcher
-  );
-
-  const handleCreateSuccess = () => {
-    mutate();
-  };
-
-  const handleDelete = () => {
-    mutate();
-  };
-
-  return (
-    <div className={styles.feed}>
-      <div className={styles.uploadContainer}>
-        <Card>
-          <UploadFile onSuccess={handleCreateSuccess} onDelete={handleDelete} />
-        </Card>
-      </div>
-
-      <div className={styles.listContainer}>
-        {isLoading ? <Loader /> : <></>}
-
-        {data?.files?.map((f) => (
-          <FileCard file={f} key={f.id} />
-        ))}
-
-        {error ? <>{JSON.stringify(error)}</> : <></>}
-      </div>
-    </div>
-  );
+    const { session } = useSession();
+    const [fileCategory, setFileCategory] = useState<OptionType>();
+    const [selectedAssociationFilter, setSelectedAssociationFilter] = useState<OptionType>();
+    const [selectedAssociation, setSelectedAssociation] = useState<OptionType>();
+    const { data: fileAssociationsData } = useSWR(routes.server.fileAssociations, fetcher);
+    const { trigger: createFileAssociation } = useSWRMutation(routes.server.createFileAssociation,
+        function <T>(url: string, { arg }: { arg: T }) {
+            return fetcher(url, {
+                method: 'POST',
+                body: JSON.stringify(arg)
+            })
+        });
+    const [filesVars, setFilesVars] = useState<{ limit?: number, offset?: number, filter?: Record<string, unknown> }>({
+        filter: {},
+    });
+    const {
+        data: files,
+        error,
+        isMutating: isLoading,
+        trigger: fetchFiles,
+        reset,
+    } = useSWRMutation('file', graphqlRequest);
+
+    const { data: fileCategories, trigger: fetchFileCategories } = useSWRMutation('fileCategories', graphqlRequest)
+
+
+    const triggerFetchFiles = useCallback(
+        () => {
+            return fetchFiles({
+                query: filesQuery,
+                responseKey: 'files',
+                variables: filesVars,
+                accessToken: session?.roqAccessToken,
+            })
+        },
+        [filesVars, session],
+    );
+
+    useEffect(() => {
+        if (!session?.roqAccessToken) {
+            return;
+        }
+        fetchFileCategories({
+            query: fileCategoriesQuery,
+            accessToken: session.roqAccessToken,
+            responseKey: 'fileCategories'
+        });
+        setFilesVars((vars) => ({
+            ...vars,
+            limit: 10,
+            offset: 0,
+        }))
+    }, [session])
+
+    useEffect(() => {
+        if (!session?.roqAccessToken) {
+            return;
+        }
+        void triggerFetchFiles();
+    }, [filesVars])
+
+
+    const onOptionChange = useCallback(
+        (newVal: unknown) => {
+            const option = newVal as OptionType;
+            const { value } = option;
+            setFileCategory(option);
+            setSelectedAssociationFilter(null);
+            setFilesVars((vars) => ({
+                ...vars,
+                filter: value !== 'ALL' ? {
+                    fileCategory: { equalTo: value as string }
+                } : {}
+            }));
+        }, []);
+
+    const onAssociationChange = useCallback(
+        (newVal: unknown) => {
+            const option = newVal as OptionType;
+            setSelectedAssociationFilter(option);
+            if (option) {
+                setFileCategory(null);
+            }
+            setFilesVars((vars) => ({
+                ...vars,
+                filter: option ? {
+                    entityName: { equalTo: option.label },
+                    entityReferences: { equalTo: option.value },
+                } : {}
+            }));
+        }, []);
+
+    const onLoadMore = useCallback(
+        () => {
+            setFilesVars((vars) => ({
+                ...vars,
+                limit: vars.limit + 10,
+            }));
+        }, [],
+    );
+
+    const options = useMemo(() => {
+        const optionsList = fileCategories?.data
+            .map(({ name, key }: { name: string, key: string, }) => ({
+                value: key,
+                label: name,
+            }))
+        if (optionsList?.length) {
+            return [
+                {
+                    label: 'All',
+                    value: 'ALL'
+                },
+                ...optionsList,
+            ]
+        }
+        return optionsList;
+    }, [fileCategories]);
+
+    const fileAssociationOptions: OptionType[] = useMemo(() => {
+        return fileAssociationsData?.data
+            ?.map((
+                { entityName: label, entityReference: value }:
+                    { entityName: string, entityReference: string }
+            ) => ({
+                label,
+                value
+            }));
+    }, [fileAssociationsData]);
+
+    const onSuccess = useCallback(
+        async (file: FileInterface) => {
+            await createFileAssociation({
+                fileId: file.id,
+                entityName: selectedAssociation.label,
+                entityReference: selectedAssociation.value,
+            })
+            reset();
+            return triggerFetchFiles();
+        }, [createFileAssociation, selectedAssociation, reset, triggerFetchFiles],
+    );
+
+
+    return (
+        <div className={styles.feed}>
+            <div className={styles.uploadContainer}>
+                <Card>
+                    <div className="flex w-50 flex-center m5">
+                        <SelectFilter
+                            value={selectedAssociation}
+                            onChange={(v) => setSelectedAssociation(v as OptionType)}
+                            options={fileAssociationOptions}
+                            placeholder="Upload with Associations"
+                            isClearable={true}
+                            prefix="Upload with"
+                        />
+                    </div>
+                    <UploadFile
+                        onSuccess={onSuccess}
+                        onDelete={reset}
+                    />
+                </Card>
+            </div>
+            <div className="flex w-100 space-between m5">
+                <div className="flex">
+                    <SelectFilter
+                        value={selectedAssociationFilter}
+                        onChange={onAssociationChange}
+                        options={fileAssociationOptions}
+                        placeholder="Filter by Associations"
+                        isClearable={true}
+                        prefix="Filter by"
+                    />
+                </div>
+                <div className="flex">
+                    <SelectFilter
+                        value={fileCategory}
+                        onChange={onOptionChange}
+                        options={options}
+                        placeholder="Filter by File Category"
+                        prefix="Filter by"
+                    />
+                </div>
+            </div>
+            <div className={styles.listContainer}>
+                {files?.data?.map((file: UserFile) => (
+                    <FileCard file={file} key={file.id}/>
+                ))}
+
+                {error ? <>{JSON.stringify(error)}</> : <></>}
+                {isLoading ? <Loader/> : <></>}
+            </div>
+            {
+                files?.totalCount > files?.data?.length && (
+                    <div className="flex flex-center mt-20">
+                        <button disabled={isLoading} className="btn btn-sm btn-default" onClick={onLoadMore}>Load more
+                        </button>
+                    </div>
+                )
+            }
+        </div>
+    );
 }

nextjs-with-roq-auth/src/components/file/select.filter.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Select from 'react-select';
+import { StateManagerProps } from 'react-select/dist/declarations/src/stateManager';
+
+export const SelectFilter = (
+    { value, onChange, options, prefix, ...rest }: StateManagerProps & { prefix?: string }
+) => {
+    return (
+        <Select
+            value={value}
+            onChange={onChange}
+            isClearable={false}
+            isSearchable={false}
+            isLoading={false}
+            options={options}
+            styles={{
+                container: (curr) => ({
+                    ...curr,
+                    minWidth: '200px',
+                }),
+                singleValue: (curr) => ({
+                    ...curr,
+                    '::before': {
+                        content: `"${prefix} "`,
+                    }
+                }),
+                control: (cur, state) => ({
+                    ...cur,
+                    cursor: 'pointer',
+                    border: 'none',
+                    borderColor: state.menuIsOpen ? 'var(--roq-user-invite-role-dropdown-boxShadow)' : '',
+                    boxShadow: state.menuIsOpen ? '0 0 0 1px var(--roq-user-invite-role-dropdown-boxShadow)' : 'none',
+                }),
+            }}
+            components={{ IndicatorSeparator: () => null }}
+            {...rest}
+        />
+    )
+
+}