🚧(project) add zotero connector to call api

Author: wilbrdt

src/frontend/apps/impress/package.json

@@ -17,9 +17,7 @@
   "dependencies": {
     "@ag-media/react-pdf-table": "2.0.3",
     "@blocknote/code-block": "0.31.1",
-    "blocknote/core": "https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1732",
     "@blocknote/mantine": "0.31.1",
-    "blocknote/react": "https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1732",
     "@blocknote/xl-docx-exporter": "0.31.1",
     "@blocknote/xl-pdf-exporter": "0.31.1",
     "@emoji-mart/data": "1.2.1",
@@ -32,6 +30,8 @@
     "@react-pdf/renderer": "4.3.0",
     "@sentry/nextjs": "9.22.0",
     "@tanstack/react-query": "5.77.1",
+    "blocknote/core": "https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1732",
+    "blocknote/react": "https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1732",
     "canvg": "4.0.3",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
@@ -55,6 +55,7 @@
     "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "*",
+    "zotero-api-client": "^0.47.0",
     "zustand": "5.0.5"
   },
   "devDependencies": {

src/frontend/apps/impress/src/pages/404.tsx

@@ -1,21 +1,31 @@
 import { Button } from '@openfun/cunningham-react';
 import Image from 'next/image';
-import { ReactElement } from 'react';
+import { ReactElement, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
+import api from 'zotero-api-client';
 import img403 from '@/assets/icons/icon-403.png';
-import { Box, Icon, StyledLink, Text } from '@/components';
+import { Box, Icon, Text } from '@/components';
 import { PageLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
+
 const StyledButton = styled(Button)`
   width: fit-content;
 `;
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
+  const fetchFromZotero = useCallback(async () => {
+    const apiKey = '';
+    const myapi = api(apiKey).library('user', 475425); //
+    const itemsResponse = await myapi.items().get();
+
+    console.log(itemsResponse);
+  }, []);
+
   return (
     <Box
       $align="center"
@@ -40,11 +50,12 @@ const Page: NextPageWithLayout = () => {
           )}
         </Text>
 
-        <StyledLink href="/">
-          <StyledButton icon={<Icon iconName="house" $color="white" />}>
-            {t('Home')}
-          </StyledButton>
-        </StyledLink>
+        <StyledButton
+          onClick={() => fetchFromZotero()}
+
+          icon={<Icon iconName="house" $color="white" />}>
+          {t('Home')}
+        </StyledButton>
       </Box>
     </Box>
   );