From 37a428e8f4e3355bc565379296b43aef68c454bb Mon Sep 17 00:00:00 2001 From: Oliver Kopp Date: Sun, 9 Apr 2023 00:37:25 +0200 Subject: [PATCH] Enable connecting to JabRef Desktop's https server - Remove unused react components - Add button to synchronize - Add howto to add SSL certificate - Remove GraphQL code --- .gitignore | 2 + README.md | 15 +- codegen.yml | 9 - manifest.xml | 8 +- package.json | 102 +- src/graphql/mutation/login.graphql | 6 - src/graphql/mutation/logout.graphql | 3 - src/graphql/query/me.graphql | 5 - src/plugins/apollo/apolloClient.ts | 7 - src/taskpane/components/App.tsx | 25 +- src/taskpane/components/ContentWrapper.tsx | 25 - src/taskpane/components/Footer.style.tsx | 6 +- src/taskpane/components/Footer.tsx | 58 +- src/taskpane/components/Progress.tsx | 19 +- src/taskpane/components/ReferenceView.tsx | 2 +- src/taskpane/components/Wrapper.tsx | 21 - src/taskpane/index.tsx | 22 +- src/taskpane/layout/Layout.tsx | 40 +- src/taskpane/pages/CitationStyle.tsx | 1 + src/taskpane/pages/Dashboard.tsx | 17 +- src/taskpane/pages/Login.style.tsx | 22 - src/taskpane/pages/Login.tsx | 99 - src/taskpane/taskpane.html | 2 +- src/utils/ProtectedRoutes.tsx | 36 - src/utils/citesupport.ts | 1 + src/utils/data.ts | 191 +- webpack.config.js | 86 +- yarn.lock | 9366 ++++++-------------- 28 files changed, 3135 insertions(+), 7061 deletions(-) delete mode 100644 codegen.yml delete mode 100644 src/graphql/mutation/login.graphql delete mode 100644 src/graphql/mutation/logout.graphql delete mode 100644 src/graphql/query/me.graphql delete mode 100644 src/plugins/apollo/apolloClient.ts delete mode 100644 src/taskpane/components/ContentWrapper.tsx delete mode 100644 src/taskpane/components/Wrapper.tsx delete mode 100644 src/taskpane/pages/Login.style.tsx delete mode 100644 src/taskpane/pages/Login.tsx delete mode 100644 src/utils/ProtectedRoutes.tsx diff --git a/.gitignore b/.gitignore index 6e0300e3..2722f1bc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.idea/ + # Logs logs *.log diff --git a/README.md b/README.md index 0397392d..a11ef1e2 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,8 @@ ## Getting started - Install [Node.js](https://nodejs.org/). -- Create .env file in the root directory containing the `HOST_API_URL` key +- Get the JabRef Desktop http server running +- If you want to connect to another service, adapt the `.env` file in the root directory containing the desired `HOST_API_URL` key e.g., `API_HOST = "https://mango-pebble-0224c3803.1.azurestaticapps.net/"` @@ -52,3 +53,15 @@ Note: If you're testing add-in on Mac, run `yarn dev-server` to start the local - [React.js](https://reactjs.org): UI framework [Documentation](https://reactjs.org/docs/getting-started.html) - [Microsoft Office Add-in](https://docs.microsoft.com/en-us/office/dev/add-ins/) + +## Get SSL Working + +(Based on ) + +Howto vor Windows - other operating systems work similar: + +1. As admin `choco install mkcert` +2. As admin: `mkcert -install` +3. `cd %APPDATA%\..\local\org.jabref\jabref\ssl` +4. `mkcert -pkcs12 jabref.desktop jabref localhost 127.0.0.1 ::1` +5. Rename the file to `server.p12` diff --git a/codegen.yml b/codegen.yml deleted file mode 100644 index 06f57b08..00000000 --- a/codegen.yml +++ /dev/null @@ -1,9 +0,0 @@ -overwrite: true -schema: "https://jabref-online.herokuapp.com/api" -documents: "src/graphql/**/*.graphql" -generates: - src/generated/graphql.ts: - plugins: - - "typescript" - - "typescript-operations" - - "typescript-react-apollo" diff --git a/manifest.xml b/manifest.xml index 38fe2766..68419569 100644 --- a/manifest.xml +++ b/manifest.xml @@ -72,13 +72,13 @@ - - + + - - + + diff --git a/package.json b/package.json index 86d8786f..edf0416c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jabref-office-addin", - "version": "0.0.1", + "version": "0.1.0", "repository": { "type": "git", "url": "https//github.com/JabRef/JabRef-Word-Addin.git" @@ -24,81 +24,71 @@ "stop": "office-addin-debugging stop manifest.xml", "validate": "office-addin-manifest validate manifest.xml", "watch": "webpack --mode development --watch", - "generate": "graphql-codegen --config codegen.yml", - "postinstall": "yarn generate && crlf --set=LF node_modules/.bin/office-addin-*" + "postinstall": "crlf --set=LF node_modules/.bin/office-addin-*" }, "dependencies": { - "@fluentui/react": "^8.97.0", - "@apollo/client": "^3.7.0", + "@fluentui/react": "^8.107.3", "citeproc": "^2.4.62", - "core-js": "^3.25.3", + "core-js": "^3.30.0", "cross-var": "^1.1.0", "dotenv": "^16.0.3", - "dotenv-cli": "^6.0.0", + "dotenv-cli": "^7.2.1", "es6-promise": "^4.2.8", "formik": "^2.2.9", - "graphql": "^16.6.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-router-dom": "^5.3.0", - "regenerator-runtime": "^0.13.9" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.10.0", + "regenerator-runtime": "^0.13.11" }, "devDependencies": { - "@babel/core": "^7.19.6", - "@babel/preset-typescript": "^7.18.6", - "@graphql-codegen/cli": "2.13.1", - "@graphql-codegen/typescript": "2.8.1", - "@graphql-codegen/typescript-operations": "2.5.3", - "@graphql-codegen/typescript-react-apollo": "3.3.3", + "@babel/core": "^7.21.4", + "@babel/preset-typescript": "^7.21.4", "@types/find-process": "1.2.0", - "@types/office-js": "^1.0.287", - "@types/office-runtime": "^1.0.29", - "@types/react": "^17.0.39", - "@types/react-dom": "^17.0.11", - "@types/react-hot-loader": "^4.1.0", + "@types/office-js": "^1.0.318", + "@types/office-runtime": "^1.0.30", + "@types/react": "^18.0.33", + "@types/react-dom": "^18.0.11", "@types/react-router-dom": "^5.3.3", - "@types/webpack": "^5.28.0", + "@types/webpack": "^5.28.1", "@types/webpack-dev-server": "^4.7.2", - "@typescript-eslint/eslint-plugin": "^4.33.0", - "@typescript-eslint/parser": "^4.33.0", - "babel-loader": "^8.2.5", + "@typescript-eslint/eslint-plugin": "^5.57.1", + "@typescript-eslint/parser": "^5.57.1", + "babel-loader": "^9.1.2", "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^6.4.1", + "copy-webpack-plugin": "^11.0.0", "crlf": "^1.1.1", - "css-loader": "^5.2.7", - "eslint": "^7.32.0", - "eslint-config-airbnb": "18.2.1", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-import": "^2.26.0", - "eslint-plugin-jsx-a11y": "^6.6.1", - "eslint-plugin-office-addins": "^2.0.0", + "css-loader": "^6.7.3", + "eslint": "^8.38.0", + "eslint-config-airbnb": "19.0.4", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-office-addins": "^2.1.5", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.31.10", + "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-unused-imports": "^1.1.5", - "extract-text-webpack-plugin": "4.0.0-beta.0", + "eslint-plugin-unused-imports": "^2.0.0", "file-loader": "^6.2.0", "find-process": "^1.4.7", - "html-loader": "^1.3.2", - "html-webpack-plugin": "^4.5.1", + "html-loader": "^4.2.0", + "html-webpack-plugin": "^5.5.0", "less": "^4.1.3", - "less-loader": "^7.3.0", - "office-addin-cli": "^1.5.3", - "office-addin-debugging": "^4.6.2", - "office-addin-dev-certs": "^1.9.2", - "office-addin-lint": "^2.0.1", - "office-addin-manifest": "^1.10.3", + "less-loader": "^11.1.0", + "office-addin-cli": "^1.5.5", + "office-addin-debugging": "^5.0.5", + "office-addin-dev-certs": "^1.11.3", + "office-addin-lint": "^2.2.5", + "office-addin-manifest": "^1.12.3", "office-addin-prettier-config": "^1.2.0", - "postcss-loader": "^4.0.0", - "prettier": "2.7.1", - "react-hot-loader": "^4.12.6", - "source-map-loader": "^1.1.3", - "style-loader": "^2.0.0", - "ts-loader": "8.2.0", - "typescript": "^4.5.5", - "webpack": "^4.46.0", - "webpack-cli": "^4.10.0", - "webpack-dev-server": "^4.11.1", + "postcss-loader": "^7.2.4", + "prettier": "2.8.7", + "source-map-loader": "^4.0.1", + "style-loader": "^3.3.2", + "ts-loader": "9.4.2", + "typescript": "^5.0.4", + "webpack": "^5.78.0", + "webpack-cli": "^5.0.1", + "webpack-dev-server": "^4.13.2", "worker-loader": "^3.0.8" } } diff --git a/src/graphql/mutation/login.graphql b/src/graphql/mutation/login.graphql deleted file mode 100644 index 7c0bb01e..00000000 --- a/src/graphql/mutation/login.graphql +++ /dev/null @@ -1,6 +0,0 @@ -mutation Login($email: String!, $password: String!){ - login(email:$email, password:$password){ - email - id - } -} diff --git a/src/graphql/mutation/logout.graphql b/src/graphql/mutation/logout.graphql deleted file mode 100644 index 82d7bafe..00000000 --- a/src/graphql/mutation/logout.graphql +++ /dev/null @@ -1,3 +0,0 @@ -mutation Logout { - logout -} diff --git a/src/graphql/query/me.graphql b/src/graphql/query/me.graphql deleted file mode 100644 index 3e3a78ce..00000000 --- a/src/graphql/query/me.graphql +++ /dev/null @@ -1,5 +0,0 @@ -query ME{ - me{ - email - } -} diff --git a/src/plugins/apollo/apolloClient.ts b/src/plugins/apollo/apolloClient.ts deleted file mode 100644 index 4d9658e3..00000000 --- a/src/plugins/apollo/apolloClient.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ApolloClient, InMemoryCache } from '@apollo/client'; - -const client = new ApolloClient({ - uri: process.env?.API_HOST_URL || 'https://jabref-online.herokuapp.com', - cache: new InMemoryCache(), -}); -export default client; diff --git a/src/taskpane/components/App.tsx b/src/taskpane/components/App.tsx index 6887a506..9f89adaf 100644 --- a/src/taskpane/components/App.tsx +++ b/src/taskpane/components/App.tsx @@ -1,12 +1,8 @@ import React, { ReactElement } from 'react'; -import { Switch, Route } from 'react-router-dom'; import Progress from './Progress'; -import Login from '../pages/Login'; import Layout from '../layout/Layout'; -import ProtectedRoutes from '../../utils/ProtectedRoutes'; import { CitationStoreProvider } from '../contexts/CitationStoreContext'; import { CiteSupportProvider } from '../contexts/CiteSupportContext'; -import Wrapper from './Wrapper'; export interface AppProps { title: string; @@ -18,25 +14,16 @@ function App(props: AppProps): ReactElement { if (!isOfficeInitialized) { return ( - + ); } return ( - - - - - - - - - - - - - - + + + + + ); } export default App; diff --git a/src/taskpane/components/ContentWrapper.tsx b/src/taskpane/components/ContentWrapper.tsx deleted file mode 100644 index 014a28f5..00000000 --- a/src/taskpane/components/ContentWrapper.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { ReactElement, ReactNode } from 'react'; - -interface ContentWrapperProps { - children: ReactNode; -} - -function ContentWrapper({ children }: ContentWrapperProps): ReactElement { - return ( -
- {children} -
- ); -} - -export default ContentWrapper; diff --git a/src/taskpane/components/Footer.style.tsx b/src/taskpane/components/Footer.style.tsx index abe4d8ab..5130fec4 100644 --- a/src/taskpane/components/Footer.style.tsx +++ b/src/taskpane/components/Footer.style.tsx @@ -38,14 +38,14 @@ export const contentWrapper: IStackStyles = { }, }; -export const Signout: IIconProps = { iconName: 'SignOut' }; export const SyncBib: IIconProps = { iconName: 'InsertSignatureLine' }; export const light: IIconProps = { iconName: 'Brightness' }; export const dark: IIconProps = { iconName: 'LowerBrightness' }; export const imageProps: IImageProps = { imageFit: ImageFit.center, + alt: 'JabRef logo', src: '../../../assets/logo.svg', - width: '110rem', - height: '40rem', + width: '35%', + height: '35%', }; diff --git a/src/taskpane/components/Footer.tsx b/src/taskpane/components/Footer.tsx index bc10bb4e..cea61975 100644 --- a/src/taskpane/components/Footer.tsx +++ b/src/taskpane/components/Footer.tsx @@ -1,45 +1,43 @@ -import { Stack, ActionButton } from '@fluentui/react'; +import { ActionButton, Image, Stack } from '@fluentui/react'; import React, { ReactElement } from 'react'; import { - Signout, - SyncBib, - imageProps, - footerStackStyle, contentWrapper, footerIconOnlyButton, + footerStackStyle, + imageProps, + light, + SyncBib, } from './Footer.style'; interface FooterProps { onSyncBibliography: () => void; - onLogout: () => void; + onFetchJabRefData: () => void; } -function Footer({ onSyncBibliography, onLogout }: FooterProps): ReactElement { +function Footer({ onSyncBibliography, onFetchJabRefData }: FooterProps): ReactElement { return ( - - - jabref logo - - - - - + + + + + + ); } diff --git a/src/taskpane/components/Progress.tsx b/src/taskpane/components/Progress.tsx index 0f985e40..50bd36f7 100644 --- a/src/taskpane/components/Progress.tsx +++ b/src/taskpane/components/Progress.tsx @@ -1,7 +1,6 @@ import { Spinner, SpinnerSize, Stack } from '@fluentui/react'; import React from 'react'; import { spinnerStyle, stackToken } from './Progress.style'; -import Wrapper from './Wrapper'; export interface ProgressProps { logo: string; @@ -11,16 +10,14 @@ export interface ProgressProps { function Progress({ message, title, logo }: ProgressProps): React.ReactElement { return ( - - - - {title} - - - - - - + + + {title} + + + + + ); } export default Progress; diff --git a/src/taskpane/components/ReferenceView.tsx b/src/taskpane/components/ReferenceView.tsx index d6ab9d27..881054d8 100644 --- a/src/taskpane/components/ReferenceView.tsx +++ b/src/taskpane/components/ReferenceView.tsx @@ -16,7 +16,7 @@ interface ReferenceViewProps { } const renderAuther = (author: Array): string => { - return author.map((_author) => `${_author.given} ${_author.family}`).join(', '); + return author?.map((_author) => `${_author.given} ${_author.family}`).join(', ') ?? '(no author)'; }; function ReferenceView({ document }: ReferenceViewProps): React.ReactElement { diff --git a/src/taskpane/components/Wrapper.tsx b/src/taskpane/components/Wrapper.tsx deleted file mode 100644 index 947dc0d5..00000000 --- a/src/taskpane/components/Wrapper.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { IStackStyles, Stack } from '@fluentui/react'; -import React, { ReactElement, ReactNode } from 'react'; - -interface WrapperProps { - children: ReactNode; -} -const wrapperStackStyles: IStackStyles = { - root: { - height: '100vh', - }, -}; - -function Wrapper({ children }: WrapperProps): ReactElement { - return ( - - {children} - - ); -} - -export default Wrapper; diff --git a/src/taskpane/index.tsx b/src/taskpane/index.tsx index a1fcc2e9..13024e49 100644 --- a/src/taskpane/index.tsx +++ b/src/taskpane/index.tsx @@ -7,13 +7,9 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ /* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react'; -import ReactDOM from 'react-dom'; -import { ApolloProvider } from '@apollo/client'; -import { AppContainer } from 'react-hot-loader'; +import { createRoot } from 'react-dom/client'; import { initializeIcons, ThemeProvider } from '@fluentui/react'; -import { HashRouter as Router } from 'react-router-dom'; import App from './components/App'; -import client from '../plugins/apollo/apolloClient'; initializeIcons(); @@ -22,17 +18,11 @@ let isOfficeInitialized = false; const title = 'JabRef Task Pane Add-in'; const render = (Component) => { - ReactDOM.render( - - - - - - - - - , - document.getElementById('container') + const root = createRoot(document.getElementById('container')); + root.render( + + + ); }; diff --git a/src/taskpane/layout/Layout.tsx b/src/taskpane/layout/Layout.tsx index 190ac154..f64c40ae 100644 --- a/src/taskpane/layout/Layout.tsx +++ b/src/taskpane/layout/Layout.tsx @@ -1,12 +1,12 @@ -import { Pivot, PivotItem, Stack, StackItem } from '@fluentui/react'; +import { Pivot, PivotItem, Stack } from '@fluentui/react'; import React, { useState } from 'react'; +import { MetaData } from 'citeproc'; import CitationStyle from '../pages/CitationStyle'; import Dashboard from '../pages/Dashboard'; import Footer from '../components/Footer'; import { pivotStyle, scrollableStack } from './Layout.style'; import { useCiteSupport } from '../contexts/CiteSupportContext'; -import { useLogoutMutation } from '../../generated/graphql'; -import client from '../../plugins/apollo/apolloClient'; +import data from '../../utils/data'; type pivotItem = 'citationStyle' | 'dashboard'; @@ -22,17 +22,31 @@ function Layout(): JSX.Element { }; const citeSupport = useCiteSupport(); - const [logoutMutation] = useLogoutMutation(); - - const onLogout = async () => { - await client.resetStore(); - await logoutMutation(); - }; const onSyncBibliography = async () => { await citeSupport.getBibliography(); }; + const [jabRefItems, setJabRefItems] = useState>(data); + + const fetchJabRefData = async () => { + try { + const librariesListResponse = await fetch('https://localhost:6051/libraries'); + const librariesList = (await librariesListResponse.json()) as string[]; + const libraryId = librariesList[0]; + const libraryContentResponse = await fetch(`https://localhost:6051/libraries/${libraryId}`, { + headers: { + Accept: 'application/x-bibtex-library-csl+json', + }, + }); + const libraryContent = (await libraryContentResponse.json()) as Array; + console.debug('Fetched content', libraryContent); + setJabRefItems(libraryContent); + } catch (error) { + console.error('Error fetching data', error); + } + }; + return ( @@ -47,11 +61,11 @@ function Layout(): JSX.Element { - - {selectedKey === 'dashboard' ? : } - + + {selectedKey === 'dashboard' ? : } + -