Feature/solved issues (#153)

* Added function to resolve issues (in addition to delete)
* Added tabs in dashboard
* Added Popups in dashboard
* Improved styling of entry on mobile

Co-authored-by: Florian Schmidt <[email protected]>
Co-authored-by: Maurice22 <[email protected]>

cypress/util/createAskForHelpPosting.js

@@ -0,0 +1,8 @@
+export default function createAskForHelpPosting(postalCode, description) {
+  cy.visit('localhost:3000/#/ask-for-help');
+  cy.get('[data-cy=location-search-input]').type(`${postalCode}{enter}`);
+  cy.get('[data-cy=autocomplete-suggestion]').first().click();
+  cy.get('[data-cy=ask-for-help-text-input]').type(description);
+  cy.get('[data-cy=ask-for-help-submit]').click();
+  cy.get('[data-cy=success-link-to-dashboard]').click();
+}

cypress/util/createResponseForPosting.js

@@ -0,0 +1,14 @@
+export default function createResponseForPosting(responseText, email) {
+  cy.visit('localhost:3000/#/dashboard');
+  cy.wait(1000); // wait for data to load
+  cy.get('[data-cy=ask-for-help-entry]').invoke('attr', 'data-id').as('askForHelpId');
+  cy.get('@askForHelpId')
+    .then((askForHelpId) => {
+      cy.visit(`localhost:3000/#/offer-help/${askForHelpId}`);
+      cy.get('[data-cy=offer-help-text-input]').type(`${responseText}{enter}`);
+      cy.get('[data-cy=mail-input]').type(`${email}`);
+      cy.get('[data-cy=offer-help-submit]').click();
+      cy.get('[data-cy=success-offer-link]').click();
+    });
+  cy.wait(1000); // wait for data be updated
+}

cypress/util/loginVerifiedUser.js

@@ -0,0 +1,20 @@
+export default function loginVerifiedUser(email, password) {
+  cy.visit('localhost:3000');
+
+  // TODO: This yells ANTI-PATTERN. We should find a way to fix this
+  cy.wait(3000);
+  cy.get('body').then(($body) => {
+    if ($body.find('[data-cy=btn-sign-out]').length > 0) {
+      cy.get('[data-cy=btn-sign-out]').click();
+    }
+  });
+
+  cy.visit('localhost:3000/#/signin');
+  cy.get('form input[type="email"]').type(`${email}{enter}`);
+  cy.get('form input[type="password"]').type(`${password}{enter}`);
+
+  // TODO: Why do we redirect to ask-for-help here!
+  cy.hash().should('equal', '#/ask-for-help');
+
+  cy.visit('localhost:3000');
+}

cypress/util/removeExistingAskForHelpEntries.js

@@ -0,0 +1,63 @@
+export function removeAskForHelpEntryWithoutResponses() {
+  cy.get('[data-cy=ask-for-help-entry]').should('be.visible');
+  cy.get('[data-cy=btn-entry-solve]').should('not.be.visible');
+  cy.get('[data-cy=btn-entry-delete]').should('be.visible');
+  cy.get('[data-cy=btn-entry-delete]').first().click();
+
+  // engage with popup content
+  cy.get('.popup-content').should('be.visible');
+  cy.get('[data-cy=btn-popup-cancel-positive]').should('be.visible');
+  cy.get('[data-cy=btn-popup-delete-terminally]').should('be.visible');
+  cy.get('[data-cy=btn-popup-delete-terminally]').click();
+
+  // click "ZURÜCK ZUR ÜBERSICHT" in the following popup
+  cy.get('[data-cy=btn-popup-ask-for-help]').should('be.visible');
+  cy.get('[data-cy=btn-popup-back-to-overview]').should('be.visible');
+  cy.get('[data-cy=btn-popup-back-to-overview]').click();
+  cy.wait(1000); // wait for deletion
+  cy.get('.popup-content').should('not.be.visible');
+}
+
+export function removeAskForHelpEntryWithResponses() {
+  cy.get('[data-cy=ask-for-help-entry-with-responses]').should('be.visible');
+  cy.get('[data-cy=btn-entry-solve]').should('be.visible');
+  cy.get('[data-cy=btn-entry-delete]').should('be.visible');
+  cy.get('[data-cy=btn-entry-delete]').first().click();
+
+  // engage with popup content
+  cy.get('.popup-content').should('be.visible');
+  cy.get('[data-cy=btn-popup-hero-found]').should('be.visible');
+  cy.get('[data-cy=btn-popup-delete-anyway]').should('be.visible');
+  cy.get('[data-cy=btn-popup-delete-anyway]').click();
+
+  // click "ZURÜCK ZUR ÜBERSICHT" in the following popup
+  cy.get('[data-cy=btn-popup-ask-for-help]').should('be.visible');
+  cy.get('[data-cy=btn-popup-back-to-overview]').should('be.visible');
+  cy.get('[data-cy=btn-popup-back-to-overview]').click();
+  cy.wait(1000); // wait for deletion
+  cy.get('.popup-content').should('not.be.visible');
+}
+
+export function removeSolvedAskForHelpEntry() {
+  cy.get('[data-cy=tabs-solved]').click();
+  cy.get('[data-cy=tabs-solved-content]').should('be.visible');
+
+  // get entry
+  cy.get('[data-cy=ask-for-help-entry-with-responses]').should('be.visible');
+  cy.get('[data-cy=btn-entry-solve]').should('be.visible');
+  cy.get('[data-cy=btn-entry-delete]').should('be.visible');
+  cy.get('[data-cy=btn-entry-delete]').first().click();
+  // engage popup content
+  cy.get('[data-cy=btn-popup-cancel-positive]').should('be.visible');
+  cy.get('[data-cy=btn-popup-delete-terminally]').should('be.visible');
+  cy.get('[data-cy=btn-popup-delete-terminally]').click({ force: true });
+  cy.wait(500); // wait for popup
+
+  // click "ZURÜCK ZUR ÜBERSICHT" in the following popup
+  cy.get('[data-cy=btn-popup-ask-for-help]').should('be.visible');
+  cy.get('[data-cy=btn-popup-back-to-overview]').should('be.visible');
+  cy.get('[data-cy=btn-popup-back-to-overview]').click();
+  cy.wait(1000); // wait for deletion
+  cy.get('.popup-content').should('not.be.visible');
+  cy.wait(2000);
+}

package.json

@@ -28,8 +28,10 @@
     "react-scroll-up-button": "^1.6.4",
     "react-share": "^4.1.0",
     "react-slider": "^1.0.3",
-    "tailwindcss": "^1.2.0",
+    "react-web-tabs": "^1.0.1",
+    "reactjs-popup": "^1.5.0",
     "supercluster": "^7.0.0",
+    "tailwindcss": "^1.2.0",
     "use-supercluster": "^0.2.6"
   },
   "scripts": {

public/locales/de/translation.json

@@ -85,11 +85,16 @@
       "needsHelp": "Hilfe benötigt",
       "yourRequests": "Deine Hilfegesuche",
       "noRequests": "Du hast noch keine Hilfegesuche eingestellt. Du kannst ein neues Gesuch",
+      "noResolvedRequests": "Du hast noch keine Held*innen für deine Gesuche gefunden. Du kannst ein neues Gesuch",
       "create": "erstellen",
       "yourNotifications": "Deine Benachrichtigungen",
       "noNotificationsSubscribed": "Du hast noch keine Benachrichtigungen aktiviert. Du kannst neue Benachrichtigungen",
       "here": "hier",
-      "register": "registrieren"
+      "register": "registrieren",
+      "tabs": {
+        "open": "OFFEN",
+        "solved": "ABGESCHLOSSEN"
+      }
     },
     "privacy": {
       "title": "Datenschutzerklärung"
@@ -269,12 +274,36 @@
       "somebodyAt": "Jemand in",
       "needsHelp": "braucht Hilfe!",
       "before": "vor",
-      "showResponses": "Antwort ansehen",
-      "showResponses_plural": "{{count}} Antworten ansehen",
-      "hideResponses": "Antwort verbergen",
-      "hideResponses_plural": "{{count}} Antworten verbergen",
+      "message": "{{count}} Nachricht",
+      "message_plural": "{{count}} Nachrichten",
       "deleteRequestForHelp": "Löschen",
-      "registrationReason": "den Beitrag zu melden"
+      "registrationReason": "den Beitrag zu melden",
+      "heroFound": "Held*in gefunden",
+      "popup": {
+        "heroFound": "Ich habe eine Held*in gefunden",
+        "deleteAnyway": "Trotzdem löschen",
+        "backToOverview": "Zurück zur Übersicht",
+        "reassureDeletion": "Diese Anfrage wirklich löschen?",
+        "cancel": "Abbrechen",
+        "deleteTerminally": "Endgültig löschen",
+        "createNewRequest": "Neue Anfrage Erstellen",
+        "solveReassure": {
+          "heading": "War Dein Hilfegesuch erfolgreich?",
+          "firstSentence": "Lass die Community wissen ob Deine Suche erfolgreich war.",
+          "secondSentence": "Die Anfrage wird in das '$t(views.dashboard.tabs.solved)' Tab bewegt \nund Du bekommst keine weiteren Nachrichten von Helfenden mehr."
+        },
+        "wasYourRequestSuccessful": {
+          "heading": "War Dein Hilfegesuch erfolgreich?",
+          "firstSentence": "Lass die Community wissen ob Deine Suche erfolgreich war.",
+          "secondSentence": "Anstatt Dein Hilfegesuch zu löschen markieren wir es als abgeschlossen.",
+          "thirdSentence": "Du kannst es natürlich jederzeit trotzdem löschen."
+        },
+        "yourRequestWasDeleted": {
+          "heading": "Dein Hilfegesuch wurde gelöscht!",
+          "firstSentence": "Bitte beachte, dass es einen Moment dauern kann, bis der Eintrag gelöscht wird.",
+          "secondSentence": "Du kannst natürlich jederzeit eine neue Anfrage erstellen \nund eine Held*in um Hilfe bitten."
+        }
+      }
     },
     "filteredList": {
       "list": "LISTE",

src/components/EntryList.jsx

@@ -13,6 +13,7 @@ import {
   getGeodataForString,
   getLatLng,
 } from '../services/GeoService';
+import parseDoc from '../util/parseDoc';
 
 export default function EntryList({ pageSize = 0 }) {
   const { t } = useTranslation();
@@ -76,12 +77,12 @@ export default function EntryList({ pageSize = 0 }) {
     }
   };
 
+
   const appendDocuments = (documents) => {
     setLastEntry(documents[documents.length - 1]);
-    const newEntries = documents.map((doc) => {
-      const data = doc.data();
-      return { ...(data.d || data), id: doc.id };
-    });
+    const newEntries = documents
+      .map(parseDoc)
+      .filter(Boolean); // filter entries that we weren't able to parse and are therefore null
     setEntries((e) => [...e, ...newEntries]);
   };
 

src/components/EntryMap.jsx

@@ -3,12 +3,12 @@ import GoogleMapReact from 'google-map-react';
 import '../styles/Map.css';
 import useSupercluster from 'use-supercluster';
 import { useTranslation } from 'react-i18next';
-import * as Sentry from '@sentry/browser';
 import fb from '../firebase';
 import Entry from './entry/Entry';
 import NotifyMe from './NotifyMe';
 
 import userIsOnMobile from '../util/userIsOnMobile';
+import parseDoc from '../util/parseDoc';
 
 const DEFAULT_ZOOM_LEVEL = userIsOnMobile() ? 5 : 6;
 
@@ -32,15 +32,6 @@ export default function EntryMap() {
 
   const [entries, setEntries] = useState([]);
 
-  const parseDoc = (doc) => {
-    try {
-      return { ...doc.data().d, id: doc.id };
-    } catch (err) {
-      Sentry.captureException(new Error(`Error parsing ask-for-help ${doc.id}`));
-      return null;
-    }
-  };
-
   useEffect(() => {
     const fetchEntries = async () => {
       const queryResult = await fb.store.collection('ask-for-help').get();

src/components/LocationInput.jsx

@@ -186,6 +186,7 @@ function Autocomplete(props) {
       <input
         ref={inputRef}
         className="location-search-input appearance-none input-focus truncate"
+        data-cy="location-search-input"
         style={{ paddingRight: '45px' }}
         defaultValue={defaultValue}
         onChange={(e) => {
@@ -209,6 +210,7 @@ function Autocomplete(props) {
         {suggestions.map((s, i) => (
           <AutocompleteSuggestion
             key={s.description}
+            data-cy="autocomplete-suggestion"
             index={i}
             selectionIndex={selectionIndex}
             suggestion={s}

src/components/MailInput.jsx

@@ -30,6 +30,7 @@ export default function MailInput(props) {
   return (
     <input
       className={className}
+      data-cy="mail-input"
       type="email"
       placeholder={placeholder}
       onChange={(e) => {