Merge pull request #19 from codecentric/migrate-to-background

replace legacy logic with background script

dev/index.tsx

@@ -61,7 +61,7 @@ function renderApp(session: Session) {
   ReactDOM.render(
     <PageContent
       close={() => alert('cannot close in dev mode')}
-      legacySession={session}
+      sessionInfo={session.info}
     />,
     container
   );

jest.setup.js

@@ -19,4 +19,7 @@ global.chrome = {
   runtime: {
     sendMessage: jest.fn(),
   },
+  identity: {
+    getRedirectURL: () => 'https://redirect-url.test',
+  },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webclip-chrome-ext",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
   "main": "src/content.tsx",
   "scripts": {

src/background.ts

@@ -1,25 +1,15 @@
-import { SolidApi } from './api/SolidApi';
 import { activateWebClipForTab } from './background/activate';
-import { MessageHandler } from './background/MessageHandler';
+import { createMessageHandler } from './background/createMessageHandler';
 import { sendMessageToActiveTab } from './background/sendMessageToActiveTab';
 import { MessageType } from './messages';
 import { Session } from './solid-client-authn-chrome-ext/Session';
-import { Store } from './store/Store';
 
 const session = new Session();
 
-function createMessageHandler() {
-  const store = new Store();
-  return new MessageHandler(
-    new SolidApi(session, store, chrome.identity.getRedirectURL()),
-    store
-  );
-}
-
-let messageHandler = createMessageHandler();
+let messageHandler = createMessageHandler(session);
 
 chrome.browserAction.onClicked.addListener(function (tab) {
-  activateWebClipForTab(tab);
+  activateWebClipForTab(tab, session.info);
 });
 
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
@@ -28,7 +18,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 });
 
 session.onLogin(() => {
-  messageHandler = createMessageHandler();
+  messageHandler = createMessageHandler(session);
 
   sendMessageToActiveTab({
     type: MessageType.LOGGED_IN,
@@ -37,5 +27,5 @@ session.onLogin(() => {
 });
 
 session.onLogout(() => {
-  messageHandler = createMessageHandler();
+  messageHandler = createMessageHandler(session);
 });

src/background/activate.ts

@@ -1,8 +1,13 @@
+import { ISessionInfo } from '@inrupt/solid-client-authn-browser';
 import { MessageType } from '../messages';
 import Tab = chrome.tabs.Tab;
 
-export function activateWebClipForTab(tab: Tab) {
-  chrome.tabs.sendMessage(tab.id, { type: MessageType.ACTIVATE }, function () {
-    return null;
-  });
+export function activateWebClipForTab(tab: Tab, sessionInfo: ISessionInfo) {
+  chrome.tabs.sendMessage(
+    tab.id,
+    { type: MessageType.ACTIVATE, payload: sessionInfo },
+    function () {
+      return null;
+    }
+  );
 }

src/background/createMessageHandler.ts

@@ -0,0 +1,12 @@
+import { SolidApi } from '../api/SolidApi';
+import { Session } from '../solid-client-authn-chrome-ext/Session';
+import { Store } from '../store/Store';
+import { MessageHandler } from './MessageHandler';
+
+export function createMessageHandler(session: Session) {
+  const store = new Store();
+  return new MessageHandler(
+    new SolidApi(session, store, chrome.identity.getRedirectURL()),
+    store
+  );
+}

src/content.tsx

@@ -1,17 +1,12 @@
-import {
-  getDefaultSession,
-  handleIncomingRedirect,
-  Session,
-} from '@inrupt/solid-client-authn-browser';
+import { ISessionInfo } from '@inrupt/solid-client-authn-browser';
 import React from 'react';
 import ReactDOM from 'react-dom';
+
+import contentCss from './assets/content.css';
 import { ChromeMessageListener } from './content/ChromeMessageListener';
-import { PageContent } from './content/PageContent';
 import { WebClip } from './content/WebClip';
 import { MessageType } from './messages';
 
-import contentCss from './assets/content.css';
-
 const root = document.createElement('div');
 root.id = 'webclip';
 document.body.appendChild(root);
@@ -24,32 +19,21 @@ shadowRoot.appendChild(container);
 
 const chromeMessageListener = new ChromeMessageListener();
 
-async function handleRedirectAfterLogin() {
-  await handleIncomingRedirect();
-  return getDefaultSession();
-}
-
-handleRedirectAfterLogin().then((session: Session) => {
-  if (session.info.isLoggedIn) {
-    renderApp(session);
-  }
-});
-
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
   switch (request.type) {
     case MessageType.ACTIVATE:
-      renderApp(getDefaultSession());
+      renderApp(request.payload);
       break;
   }
   sendResponse();
 });
 
-function renderApp(session: Session) {
+function renderApp(sessionInfo: ISessionInfo) {
   ReactDOM.render(
     <WebClip
       chromeMessageListener={chromeMessageListener}
       close={unmountApp}
-      legacySession={session}
+      sessionInfo={sessionInfo}
     />,
     container
   );

src/content/LoginButton.spec.tsx

@@ -1,14 +1,14 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { LoginButton } from './LoginButton';
-import { useLegacyLogin } from './useLegacyLogin';
+import { useLogin } from './useLogin';
 
-jest.mock('./useLegacyLogin');
+jest.mock('./useLogin');
 
 describe('LoginButton', () => {
   it('triggers login when clicked', () => {
     const login = jest.fn();
-    (useLegacyLogin as jest.Mock).mockReturnValue({
+    (useLogin as jest.Mock).mockReturnValue({
       login,
     });
     render(<LoginButton />);
@@ -18,7 +18,7 @@ describe('LoginButton', () => {
   });
 
   it('shows error, when login failed', () => {
-    (useLegacyLogin as jest.Mock).mockReturnValue({
+    (useLogin as jest.Mock).mockReturnValue({
       error: 'something went wrong',
       login: jest.fn(),
     });

src/content/LoginButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useLegacyLogin } from './useLegacyLogin';
+import { useLogin } from './useLogin';
 
 export const LoginButton = () => {
-  const { login, error } = useLegacyLogin();
+  const { login, error } = useLogin();
   return (
     <>
       <button

src/content/PageContent.spec.tsx

@@ -1,4 +1,4 @@
-import { Session } from '@inrupt/solid-client-authn-browser';
+import { ISessionInfo } from '@inrupt/solid-client-authn-browser';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { PageContent } from './PageContent';
@@ -22,7 +22,7 @@ describe('PageContent', () => {
     it('is present', () => {
       render(
         <PageContent
-          legacySession={{ info: { isLoggedIn: false } } as Session}
+          sessionInfo={{ isLoggedIn: false } as ISessionInfo}
           close={() => null}
         />
       );
@@ -34,7 +34,7 @@ describe('PageContent', () => {
       const close = jest.fn();
       render(
         <PageContent
-          legacySession={{ info: { isLoggedIn: false } } as Session}
+          sessionInfo={{ isLoggedIn: false } as ISessionInfo}
           close={close}
         />
       );

src/content/PageContent.tsx

@@ -1,20 +1,16 @@
-import { Session } from '@inrupt/solid-client-authn-browser';
+import { ISessionInfo } from '@inrupt/solid-client-authn-browser';
 import React from 'react';
-import { SolidApiContext } from '../api/apiContext';
-import { StoreContext } from '../store/context';
 import { LoginButton } from './LoginButton';
 import { ToolbarContainer } from './ToolbarContainer';
 import { useSessionInfo } from './useSessionInfo';
-import { useSolid } from './useSolid';
 
 interface PageContentProps {
-  legacySession: Session;
+  sessionInfo: ISessionInfo;
   close: () => void;
 }
 
-export const PageContent = ({ legacySession, close }: PageContentProps) => {
-  const { store, solidApi } = useSolid(legacySession);
-  const sessionInfo = useSessionInfo(legacySession);
+export const PageContent = ({ sessionInfo, close }: PageContentProps) => {
+  const currentSessionInfo = useSessionInfo(sessionInfo);
   return (
     <div className="font-sans text-base text-gray-700 z-max fixed top-0 right-0 m-8 shadow rounded w-auto h-auto p-4 bg-white flex flex-col items-center">
       <div className="flex w-full justify-end items-center">
@@ -28,11 +24,7 @@ export const PageContent = ({ legacySession, close }: PageContentProps) => {
       </div>
       <div className="paperclip" />
       <h1 className="text-3xl mx-4 my-2">WebClip</h1>
-      <StoreContext.Provider value={store}>
-        <SolidApiContext.Provider value={solidApi}>
-          {sessionInfo.isLoggedIn ? <ToolbarContainer /> : <LoginButton />}
-        </SolidApiContext.Provider>
-      </StoreContext.Provider>
+      {currentSessionInfo.isLoggedIn ? <ToolbarContainer /> : <LoginButton />}
     </div>
   );
 };

src/content/Toolbar.spec.tsx

@@ -1,16 +1,16 @@
 import { usePage } from './usePage';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Toolbar } from './Toolbar';
-import { useLegacyBookmark } from './useLegacyBookmark';
+import { useBookmark } from './useBookmark';
 import React from 'react';
 
-jest.mock('./useLegacyBookmark');
+jest.mock('./useBookmark');
 jest.mock('./usePage');
 
 describe('Toolbar', () => {
   describe('while loading', () => {
     beforeEach(() => {
-      (useLegacyBookmark as jest.Mock).mockReturnValue({
+      (useBookmark as jest.Mock).mockReturnValue({
         saving: false,
         loading: true,
       });
@@ -35,7 +35,7 @@ describe('Toolbar', () => {
 
     beforeEach(() => {
       addBookmark = jest.fn();
-      (useLegacyBookmark as jest.Mock).mockReturnValue({
+      (useBookmark as jest.Mock).mockReturnValue({
         saving: false,
         loading: false,
         addBookmark,
@@ -55,7 +55,7 @@ describe('Toolbar', () => {
           name: 'An interesting article',
         });
         render(<Toolbar profile={{ name: 'Jane Doe' }} />);
-        expect(useLegacyBookmark).toHaveBeenCalledWith({
+        expect(useBookmark).toHaveBeenCalledWith({
           type: 'WebPage',
           url: 'https://page.example/article',
           name: 'An interesting article',
@@ -75,7 +75,7 @@ describe('Toolbar', () => {
       });
 
       it('disables the clip it button and shows a saving message while the bookmark is being saved', () => {
-        (useLegacyBookmark as jest.Mock).mockReturnValue({
+        (useBookmark as jest.Mock).mockReturnValue({
           saving: true,
           error: null,
           addBookmark,
@@ -89,7 +89,7 @@ describe('Toolbar', () => {
       });
 
       it('shows an error if the bookmark cannot be saved', () => {
-        (useLegacyBookmark as jest.Mock).mockReturnValue({
+        (useBookmark as jest.Mock).mockReturnValue({
           saving: false,
           loading: false,
           error: new Error('Pod not available'),
@@ -104,7 +104,7 @@ describe('Toolbar', () => {
       });
 
       it('shows a link to the bookmark after it has been saved', () => {
-        (useLegacyBookmark as jest.Mock).mockReturnValue({
+        (useBookmark as jest.Mock).mockReturnValue({
           saving: false,
           bookmark: { uri: 'https://storage.example/bookmark#it' },
           addBookmark,

src/content/Toolbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLegacyBookmark } from './useLegacyBookmark';
+import { useBookmark } from './useBookmark';
 import { usePage } from './usePage';
 
 interface Props {
@@ -10,8 +10,7 @@ interface Props {
 
 export const Toolbar = ({ profile }: Props) => {
   const page = usePage();
-  const { addBookmark, loading, saving, error, bookmark } =
-    useLegacyBookmark(page);
+  const { addBookmark, loading, saving, error, bookmark } = useBookmark(page);
   const waiting = loading || saving;
   return (
     <>