From 9244add80ef54ef7f3f8af22d863ead5298e8862 Mon Sep 17 00:00:00 2001
From: Marlon <marlonbaeten@users.noreply.github.com>
Date: Mon, 7 Nov 2022 21:03:42 +0100
Subject: [PATCH] Added add repository form (#14)

* Added add repository form
---
 src/components/Cas.tsx               |  1 -
 src/components/CasHeader.tsx         |  6 +++
 src/components/CasRepository.tsx     | 19 ++++++--
 src/components/NotificationPopup.tsx |  2 +-
 src/components/forms/RepoModal.tsx   | 67 ++++++++++++++++++++++++++++
 src/core/api.ts                      | 17 ++++---
 src/core/handlers/handleCaData.ts    |  7 +++
 src/core/store.ts                    | 12 +++++
 src/core/translations.ts             |  1 +
 src/css/notification.css             | 19 ++++----
 src/css/select.css                   |  1 -
 src/hooks/useChildRequest.ts         |  4 +-
 src/hooks/useParentActions.ts        | 54 +++++++---------------
 src/hooks/usePublisherRequest.ts     | 22 +++++++++
 src/hooks/useRepositoryActions.ts    | 47 +++++++++++++++++++
 src/hooks/useRequestActions.ts       | 53 ++++++++++++++++++++++
 src/locales/de.ts                    |  2 +
 src/locales/en.ts                    |  1 +
 src/locales/es.ts                    |  2 +
 src/locales/fr.ts                    |  2 +
 src/locales/gr.ts                    |  2 +
 src/locales/nl.ts                    |  2 +
 src/locales/pt.ts                    |  2 +
 tests/pw/04-change-language.spec.ts  |  9 +---
 vite.config.ts                       | 11 +++--
 25 files changed, 294 insertions(+), 71 deletions(-)
 create mode 100644 src/components/forms/RepoModal.tsx
 create mode 100644 src/hooks/usePublisherRequest.ts
 create mode 100644 src/hooks/useRepositoryActions.ts
 create mode 100644 src/hooks/useRequestActions.ts

diff --git a/src/components/Cas.tsx b/src/components/Cas.tsx
index 9d2d2c5..1ebeed0 100644
--- a/src/components/Cas.tsx
+++ b/src/components/Cas.tsx
@@ -63,4 +63,3 @@ export default function Cas() {
     </Layout>
   );
 }
-
diff --git a/src/components/CasHeader.tsx b/src/components/CasHeader.tsx
index cfee2f7..515d379 100644
--- a/src/components/CasHeader.tsx
+++ b/src/components/CasHeader.tsx
@@ -9,6 +9,7 @@ export default function CasHeader() {
   const store = useStore();
   const t = useTranslations();
   const navigate = useNavigation();
+  const noParents = !store.ca || store.parents[store.ca].length === 0;
 
   return (
     <>
@@ -27,6 +28,11 @@ export default function CasHeader() {
           />
         </div>
       </div>
+      {noParents && (
+        <div className="notification error">
+          {t.caDetails.onboardingWarning}
+        </div>
+      )}
       <div>
         <ul className="tabs">
           <li>
diff --git a/src/components/CasRepository.tsx b/src/components/CasRepository.tsx
index 4f1b020..adc30ff 100644
--- a/src/components/CasRepository.tsx
+++ b/src/components/CasRepository.tsx
@@ -5,11 +5,16 @@ import useTranslations from '../hooks/useTranslations';
 import CasHeader from './CasHeader';
 import RepoTable from './tables/RepoTable';
 import Layout from './Layout';
+import useNavigation from '../hooks/useNavigation';
+import RepoModal from './forms/RepoModal';
+import { useRoute } from 'react-router5';
 
 export default function CasRepository() {
   const t = useTranslations();
   const store = useStore() as Store;
-
+  const navigate = useNavigation();
+  const { route } = useRoute();
+  
   const syncRepo = () => {
     store.loadRepoStatus(true);
   };
@@ -18,14 +23,23 @@ export default function CasRepository() {
     return null;
   }
 
+  const isset = store.repoStatus && store.ca && store.repoStatus[store.ca]?.last_exchange;
+
   return (
     <Layout>
+      {route.name === 'cas.repository.add' && (
+        <RepoModal />
+      )}
       <CasHeader />
-      {store.repoStatus && store.ca && store.repoStatus[store.ca] && (
+      {isset ? (
         <RepoTable
           repo={store.repoStatus[store.ca]}
           locale={store.locale}
         />
+      ) : (
+        <button className="button" onClick={() => navigate({}, 'cas.repository.add')}>
+          {t.caDetails.repoTab.addRepo}
+        </button>
       )}
       <button className="button inverted" onClick={syncRepo}>
         {t.caDetails.syncRepo}
@@ -33,4 +47,3 @@ export default function CasRepository() {
     </Layout>
   );
 }
-
diff --git a/src/components/NotificationPopup.tsx b/src/components/NotificationPopup.tsx
index b00c083..16570b3 100644
--- a/src/components/NotificationPopup.tsx
+++ b/src/components/NotificationPopup.tsx
@@ -8,7 +8,7 @@ interface NotificationProps {
 
 export default function NotificationPopup({ notification, onClose }: NotificationProps) {
   return (
-    <div className={`notification ${ notification.type }`}>
+    <div className={`notification popup ${ notification.type }`}>
       <button className="close" onClick={onClose}>
         &times;
       </button>
diff --git a/src/components/forms/RepoModal.tsx b/src/components/forms/RepoModal.tsx
new file mode 100644
index 0000000..85d97bf
--- /dev/null
+++ b/src/components/forms/RepoModal.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import useTranslations from '../../hooks/useTranslations';
+import Modal from './Modal';
+import clipboard from '../../img/clipboard.svg?url';
+import download from '../../img/download.svg?url';
+import upload from '../../img/upload.svg?url';
+import NotificationPopup from '../NotificationPopup';
+import useRepositoryActions from '../../hooks/useRepositoryActions';
+
+export default function RepoModal() {
+  const t = useTranslations();
+  const {
+    notification,
+    setNotification,
+    request,
+    dataUrl,
+    setRequest,
+    response,
+    setResponse,
+    onSubmit,
+    onClose,
+    onCopy,
+    handleUpload,
+  } = useRepositoryActions();
+
+  return (
+    <Modal onClose={onClose}>
+      {notification && (
+        <NotificationPopup
+          notification={notification}
+          onClose={() => setNotification(null)}
+        />
+      )}
+      <h3>{t.caDetails.repoTab.addRepo}</h3>
+      <form onSubmit={ onSubmit } method="POST">
+        <div>
+          <label>{t.caDetails.repoTab.request}</label>
+          <textarea name="request" readOnly value={request} id="request" onChange={(e) => setRequest(e.target.value)} />
+          <div>
+            <button className="button large icon" type="button" title={t.common.copy} onClick={onCopy}>
+              <img src={clipboard} alt={t.common.copy} />
+            </button>
+            <a className="button large icon" title={t.common.download} href={dataUrl} download="publisher_request.xml">
+              <img src={download} alt={t.common.download} />
+            </a>
+          </div>
+        </div>
+        <div>
+          <label>{t.caDetails.repoTab.response}</label>
+          <textarea name="response" value={response} onChange={(e) => setResponse(e.target.value)}/>
+          <input type="file" id="upload" onChange={handleUpload} />
+          <label className="button large icon" htmlFor="upload" title={t.common.dropOrClick}>
+            <img src={upload} alt={t.common.dropOrClick} />
+          </label>
+        </div>
+        <div className="actions">
+          <button className="button outline" onClick={onClose}>
+            {t.common.cancel}
+          </button>
+          <button type="submit" className="button">
+            {t.common.confirm}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
diff --git a/src/core/api.ts b/src/core/api.ts
index 8ad6b0a..f563bcf 100644
--- a/src/core/api.ts
+++ b/src/core/api.ts
@@ -45,6 +45,7 @@ export default class Api {
     if (response.headers.get('Content-Type') !== 'application/json'){
       return await response.text() as ResponseType;
     }
+
     const json = await response.json();
 
     if (response.status === 200) {
@@ -108,11 +109,11 @@ export default class Api {
   }
 
   getChildRequest(ca: string): Promise<string> {
-    return fetch(`/api/v1/cas/${ca}/id/child_request.xml`, {
-      headers: {
-        'Authorization': `Bearer ${this.token}`,
-      }})
-      .then((response) => response.text());
+    return this.get<string>(`/api/v1/cas/${ca}/id/child_request.xml`);
+  }
+
+  getPublisherRequest(ca: string): Promise<string> {
+    return this.get<string>(`/api/v1/cas/${ca}/id/publisher_request.xml`);
   }
 
   postParent(ca: string, name: string, text: string) {
@@ -121,6 +122,12 @@ export default class Api {
     });
   }
 
+  postRepository(ca: string, name: string, text: string) {
+    return this.post(`/api/v1/cas/${ca}/repo`, {
+      body: text
+    });
+  }
+
   updateRoutes(ca: string, data: { added: Route[], removed: Route[] }) {
     return this.get(`/api/v1/cas/${ca}/routes`, {
       method: 'POST',
diff --git a/src/core/handlers/handleCaData.ts b/src/core/handlers/handleCaData.ts
index efcb6db..239da9b 100644
--- a/src/core/handlers/handleCaData.ts
+++ b/src/core/handlers/handleCaData.ts
@@ -53,6 +53,13 @@ export default async function handleCaData(toState: State, store: Store) {
     }
   }
 
+  // add repo
+  if (toState.name === 'cas.repository.add' && toState.params.response) {
+    if (await store.addRepository(toState.params as ParentParams)) {
+      return Promise.reject({ redirect: {name: 'cas.repository', params: { ca: store.ca }} });
+    }
+  }
+
   // load a list of available ca's
   await store.loadCas();
 
diff --git a/src/core/store.ts b/src/core/store.ts
index c6103c8..c4f587a 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -341,6 +341,18 @@ export default class Store implements Data {
     });
   }
 
+  async addRepository(params: ParentParams) {
+    if (this.ca === null) {
+      return;
+    }
+
+    return await this.handleError(async () => {
+      await this.api.postRepository(this.ca as string, params.name, params.response || '');
+      await this.loadRepoStatus(true);
+      return true;
+    });
+  }
+
   // update notification
   setNotification(notification: Notification | null) {
     this.notification = notification;
diff --git a/src/core/translations.ts b/src/core/translations.ts
index ec73642..3adce3c 100644
--- a/src/core/translations.ts
+++ b/src/core/translations.ts
@@ -123,6 +123,7 @@ export interface Translations {
     repoTab: {
       request: string,
       response: string,
+      addRepo: string,
       addRepoSuccess: string,
     },
     analyseThis: string,
diff --git a/src/css/notification.css b/src/css/notification.css
index c47c151..3ced5c3 100644
--- a/src/css/notification.css
+++ b/src/css/notification.css
@@ -1,21 +1,24 @@
 .notification {
-  position: fixed;
-  z-index: 1000;
   background: white;
-  top: 1rem;
-  right: 1rem;
-  box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 40%);
   padding: 1.5rem 3.5rem;
   background-repeat: no-repeat;
   background-position: center left 1rem;
   background-size: 1.5rem;
-  max-width: 30rem;
-  min-width: 20rem;
   border-radius: var(--radius);
   display: flex;
   align-items: center;
 }
 
+.notification.popup {
+  position: fixed;
+  z-index: 1000;
+  top: 1rem;
+  right: 1rem;
+  max-width: 30rem;
+  min-width: 20rem;
+  box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 40%);
+}
+
 .notification.error {
   background-image: url('../img/error.svg') ;
   background-color: #fffafa;
@@ -37,4 +40,4 @@
   font-size: 1.5rem;
   opacity: 0.4;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/css/select.css b/src/css/select.css
index 7be4479..6e04625 100644
--- a/src/css/select.css
+++ b/src/css/select.css
@@ -54,7 +54,6 @@ button.expand::after {
   border: 0 solid var(--light);
   box-shadow: var(--shadaw);
   border-radius: var(--radius);
-  transition: all 300ms;
   max-height: 0;
   overflow: hidden;
   z-index: 10;
diff --git a/src/hooks/useChildRequest.ts b/src/hooks/useChildRequest.ts
index 8dca4b8..8c56b1f 100644
--- a/src/hooks/useChildRequest.ts
+++ b/src/hooks/useChildRequest.ts
@@ -9,8 +9,8 @@ export default function useChildRequest(): string {
   const store = useStore() as Store;
 
   useEffect(() => {
-    if (!childRequest) {
-      store.api.getChildRequest(store.ca as string).then((text: string) => {
+    if (!childRequest && store.ca ) {
+      store.api.getChildRequest(store.ca).then((text: string) => {
         setChildRequest(text);
         cache = text;
       });
diff --git a/src/hooks/useParentActions.ts b/src/hooks/useParentActions.ts
index 816d228..442b7ce 100644
--- a/src/hooks/useParentActions.ts
+++ b/src/hooks/useParentActions.ts
@@ -1,24 +1,27 @@
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+import { FormEvent, useState } from 'react';
 import { useRoute, useRouter } from 'react-router5';
-import { NotificationType, Notification } from '../core/types';
 import useChildRequest from '../hooks/useChildRequest';
 import useNavigation from '../hooks/useNavigation';
-import useTranslations from './useTranslations';
+import useRequestActions from './useRequestActions';
 
 export default function useParantActions() {
+  const childRequest = useChildRequest();
   const router = useRouter();
-  const t = useTranslations();
   const { route: { params } } = useRoute();
   const navigate = useNavigation();
-  const childRequest = useChildRequest();
-  const [notification, setNotification] = useState<Notification | null>(null);
   const [name, setName] = useState('');
-  const [request, setRequest] = useState('');
-  const [response, setResponse] = useState('');
-  
-  useEffect(() => {
-    setRequest(childRequest);
-  }, [childRequest]);
+
+  const {
+    notification,
+    setNotification,
+    request,
+    dataUrl,
+    setRequest,
+    response,
+    setResponse,
+    onCopy,
+    handleUpload,
+  } = useRequestActions(childRequest);
   
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -29,33 +32,6 @@ export default function useParantActions() {
     router.navigate('cas.parents', { ca: params.ca });
   };
   
-  const onCopy = () => {
-    const copyText = document.getElementById('request') as HTMLTextAreaElement | null;
-  
-    if (copyText !== null) {
-      copyText.select();
-      copyText.setSelectionRange(0, 99999);
-      navigator.clipboard.writeText(copyText.value);
-
-      setNotification({
-        type: NotificationType.success,
-        message: t.common.copySuccess
-      });
-    }
-  };
-  
-  const dataUrl = `data:application/xml;base64,${btoa(request)}`;
-  
-  const handleUpload = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.currentTarget.files) {
-      const fileReader = new FileReader();
-      fileReader.onload = () => {
-        setResponse(fileReader.result as string);
-      };
-      fileReader.readAsText(e.currentTarget.files[0]);
-    }
-  };
-
   return {
     notification,
     setNotification,
diff --git a/src/hooks/usePublisherRequest.ts b/src/hooks/usePublisherRequest.ts
new file mode 100644
index 0000000..d6075ad
--- /dev/null
+++ b/src/hooks/usePublisherRequest.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import Store from '../core/store';
+import useStore from './useStore';
+
+let cache = '';
+
+export default function usePublisherRequest(): string {
+  const [publisherRequest, setPublisherRequest] = useState<string>(cache);
+  const store = useStore() as Store;
+
+  useEffect(() => {
+    if (!publisherRequest && store.ca ) {
+      store.api.getPublisherRequest(store.ca).then((text: string) => {
+        setPublisherRequest(text);
+        cache = text;
+      });
+    }
+  }, []);
+
+  return publisherRequest;
+}
+  
diff --git a/src/hooks/useRepositoryActions.ts b/src/hooks/useRepositoryActions.ts
new file mode 100644
index 0000000..d9637fd
--- /dev/null
+++ b/src/hooks/useRepositoryActions.ts
@@ -0,0 +1,47 @@
+import { FormEvent } from 'react';
+import { useRoute, useRouter } from 'react-router5';
+import usePublisherRequest from '../hooks/usePublisherRequest';
+import useNavigation from '../hooks/useNavigation';
+import useRequestActions from './useRequestActions';
+
+export default function useParantActions() {
+  const publisherRequest = usePublisherRequest();
+  const router = useRouter();
+  const { route: { params } } = useRoute();
+  const navigate = useNavigation();
+
+  const {
+    notification,
+    setNotification,
+    request,
+    dataUrl,
+    setRequest,
+    response,
+    setResponse,
+    onCopy,
+    handleUpload,
+  } = useRequestActions(publisherRequest);
+  
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    navigate({ response });
+  };
+  
+  const onClose = () => {
+    router.navigate('cas.repository', { ca: params.ca });
+  };
+  
+  return {
+    notification,
+    setNotification,
+    request,
+    dataUrl,
+    setRequest,
+    response,
+    setResponse,
+    onSubmit,
+    onClose,
+    onCopy,
+    handleUpload,
+  };
+}
diff --git a/src/hooks/useRequestActions.ts b/src/hooks/useRequestActions.ts
new file mode 100644
index 0000000..4e7ce03
--- /dev/null
+++ b/src/hooks/useRequestActions.ts
@@ -0,0 +1,53 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import { NotificationType, Notification } from '../core/types';
+import useTranslations from './useTranslations';
+
+export default function useRequestActions(requestValue: string) {
+  const t = useTranslations();
+  const [notification, setNotification] = useState<Notification | null>(null);
+  const [request, setRequest] = useState(requestValue);
+  const [response, setResponse] = useState('');
+  
+  useEffect(() => {
+    setRequest(requestValue);
+  }, [requestValue]);
+  
+  const onCopy = () => {
+    const copyText = document.getElementById('request') as HTMLTextAreaElement | null;
+  
+    if (copyText !== null) {
+      copyText.select();
+      copyText.setSelectionRange(0, 99999);
+      navigator.clipboard.writeText(copyText.value);
+
+      setNotification({
+        type: NotificationType.success,
+        message: t.common.copySuccess
+      });
+    }
+  };
+  
+  const dataUrl = `data:application/xml;base64,${btoa(request)}`;
+  
+  const handleUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.currentTarget.files) {
+      const fileReader = new FileReader();
+      fileReader.onload = () => {
+        setResponse(fileReader.result as string);
+      };
+      fileReader.readAsText(e.currentTarget.files[0]);
+    }
+  };
+
+  return {
+    notification,
+    setNotification,
+    request,
+    dataUrl,
+    setRequest,
+    response,
+    setResponse,
+    onCopy,
+    handleUpload,
+  };
+}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index a1a8f8d..ca04672 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -112,6 +112,8 @@ export const translations: Translations = {
     'repoTab': {
       'request': 'Anfrage des Publishers',
       'response': 'Antwort der Datenbank (Repository)',
+      // TODO translate
+      'addRepo': 'Add a repository',
       'addRepoSuccess': 'Datenbank (Repository) hinzugefügt'
     },
     'analyseThis': 'Meine ROAs analysieren',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 3d235d7..9480c19 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -110,6 +110,7 @@ export const translations: Translations = {
     },
     'repoTab': {
       'request': 'Publisher Request',
+      'addRepo': 'Add a repository',
       'response': 'Repository Response',
       'addRepoSuccess': 'Repository added'
     },
diff --git a/src/locales/es.ts b/src/locales/es.ts
index a3140c4..2d5e5ef 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -112,6 +112,8 @@ export const translations: Translations = {
     'repoTab': {
       'request': 'Solicitud repositorio',
       'response': 'Respuesta repositorio',
+      // TODO translate
+      'addRepo': 'Add a repository',
       'addRepoSuccess': 'Se agregó el repositorio'
     },
     'analyseThis': 'Análisis de mis ROAs',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index f46325e..1e06b17 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -113,6 +113,8 @@ export const translations: Translations = {
     'repoTab': {
       'request': 'Requête du Publisher',
       'response': 'Réponse du dépôt',
+      // TODO translate
+      'addRepo': 'Add a repository',
       'addRepoSuccess': 'Dépôt ajouté'
     },
     'analyseThis': 'Analyser mes ROAs',
diff --git a/src/locales/gr.ts b/src/locales/gr.ts
index 821612c..e60b90a 100644
--- a/src/locales/gr.ts
+++ b/src/locales/gr.ts
@@ -112,6 +112,8 @@ export const translations: Translations = {
     'repoTab': {
       'request': 'Αίτημα Εκδότη',
       'response': 'Απάντηση Αποθετηρίου (Repository)',
+      // TODO translate
+      'addRepo': 'Add a repository',
       'addRepoSuccess': 'Το Αποθετήριο (Repository) προστέθηκε'
     },
     'analyseThis': 'Ανέλυσε τα ROA',
diff --git a/src/locales/nl.ts b/src/locales/nl.ts
index f198396..aa1cae3 100644
--- a/src/locales/nl.ts
+++ b/src/locales/nl.ts
@@ -112,6 +112,8 @@ export const translations: Translations = {
     'repoTab': {
       'request': 'Publisher Request',
       'response': 'Repository Response',
+      // TODO translate
+      'addRepo': 'Add a repository',
       'addRepoSuccess': 'Databank (repository) toegevoegd'
     },
     'analyseThis': 'Analiseer mijn ROAs',
diff --git a/src/locales/pt.ts b/src/locales/pt.ts
index 09548b2..0481b0b 100644
--- a/src/locales/pt.ts
+++ b/src/locales/pt.ts
@@ -112,6 +112,8 @@ export const translations: Translations = {
     'repoTab': {
       'request': 'Requisição do Publicador',
       'response': 'Resposta do Repositório',
+      // TODO translate
+      'addRepo': 'Add a repository',
       'addRepoSuccess': 'Repositório adicionado'
     },
     'analyseThis': 'Analisar minhas ROAs',
diff --git a/tests/pw/04-change-language.spec.ts b/tests/pw/04-change-language.spec.ts
index 40cc673..b98bc2d 100644
--- a/tests/pw/04-change-language.spec.ts
+++ b/tests/pw/04-change-language.spec.ts
@@ -65,11 +65,4 @@ test('change languages', async ({page}) => {
   await page.locator('table tbody tr td button.expand').first().click();
   await expect(page.locator('h3', {hasText: /Autorisiert \d* BGP-Ankündigungen/})).toHaveCount(1);
   await expect(page.locator('h3', {hasText: /Verweigert \d* BGP-Ankündigungen/})).toHaveCount(1);
-
-  const languageCount = await languages.count();
-  for (let i = 0; i < languageCount; i++) {
-    await dropdown.locator('button').click();
-    await languages.nth(i).click();
-    await expect(dropdown).toHaveCount(1);
-  }
-});
\ No newline at end of file
+});
diff --git a/vite.config.ts b/vite.config.ts
index 57c4c4a..ba056c4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,18 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
+const api = {
+  target: 'https://127.0.0.1:3000',
+  secure: false,
+};
+
 export default defineConfig({
   base: '/',
   server: {
     proxy: {
-      '/auth': 'http://127.0.0.1:3000',
-      '/api': 'http://127.0.0.1:3000',
-      '/stats': 'http://127.0.0.1:3000',
+      '/auth': api,
+      '/api': api,
+      '/stats': api
     },
   },
   plugins: [react()],