Feature/solved issues

package.json

@@ -27,7 +27,9 @@
     "react-scroll-up-button": "^1.6.4",
     "react-share": "^4.1.0",
     "react-slider": "^1.0.3",
+    "react-web-tabs": "^1.0.1",
     "react-with-firebase-auth": "^1.3.0",
+    "reactjs-popup": "^1.5.0",
     "tailwindcss": "^1.2.0"
   },
   "scripts": {

public/locales/de/translation.json

@@ -77,11 +77,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"
@@ -190,12 +195,22 @@
       "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*n Held*in gefunden",
+        "deleteAnyway": "Trotzdem löschen",
+        "wasYourRequestSuccessful": "War dein Hilfegesuch erfolgreich?",
+        "yourRequestWasDeleted": "Dein Hilfegesuch wurde gelöscht!",
+        "backToOverview": "Zurück zur Übersicht",
+        "reassureDeletion": "Diese Anfrage wirklich löschen?",
+        "cancel": "Abbrechen",
+        "deleteTerminally": "Endgültig löschen",
+        "createNewRequest": "Neue Anfrage Erstellen"
+      }
     },
     "filteredList": {
       "in": "In",

src/components/Entry.jsx

@@ -4,16 +4,21 @@ import formatDistance from 'date-fns/formatDistance';
 import { de } from 'date-fns/locale';
 import { useTranslation } from 'react-i18next';
 import { useAuthState } from 'react-firebase-hooks/auth';
+import Popup from 'reactjs-popup';
+
 import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import DoneIcon from '@material-ui/icons/Done';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+
 import fb from '../firebase';
 import Responses from './Responses';
-
+import { getPopupContentComponent, getButtonForPopup } from './Popup';
 
 export default function Entry(props) {
   const {
     showFullText = false,
+    showAsSolved = false,
     location = '',
     id = '',
     request = '',
@@ -31,13 +36,16 @@ export default function Entry(props) {
   const date = formatDistance(new Date(timestamp), Date.now(), { locale: de }); // @TODO get locale from i18n.language or use i18n for formatting
   const [responsesVisible, setResponsesVisible] = useState(false);
 
-  const [deleted, setDeleted] = useState('');
+  const [deleted, setDeleted] = useState(false);
+  const [attemptingToDelete, setAttemptingToDelete] = useState(false);
+  const [popupVisible, setPopupVisible] = useState(false);
   const [attemptingToReport, setAttemptingToReport] = useState(false);
 
   const userIsLoggedIn = !!user && !!user.uid;
   const userLoggedInAndReportedEntryBefore = userIsLoggedIn && reportedBy.includes(user.uid);
   const [reported, setReported] = useState(userLoggedInAndReportedEntryBefore);
   const entryBelongsToCurrentUser = userIsLoggedIn && user.uid === uid;
+  const collectionName = !showAsSolved ? 'ask-for-help' : 'solved-posts';
 
   let textToDisplay;
   if (showFullText) {
@@ -50,21 +58,53 @@ export default function Entry(props) {
 
   const handleDelete = async (e) => {
     e.preventDefault();
-    const doc = await fb.store.collection('/ask-for-help').doc(props.id).get();
-    await fb.store.collection('/deleted').add({
-      askForHelpId: doc.id, ...doc.data(),
+    const doc = await fb.store.collection(collectionName).doc(props.id).get();
+    await fb.store.collection('/deleted').doc(props.id).set({
+      collectionName, ...doc.data(),
     });
-    fb.store.collection('/ask-for-help').doc(props.id).delete();
     setDeleted(true);
+    setAttemptingToDelete(false);
+    setPopupVisible(true);
+  };
+
+  const handleSolved = async (e) => {
+    e.preventDefault();
+    const askForHelpDoc = await fb.store.collection('ask-for-help').doc(props.id).get();
+    const data = askForHelpDoc.data();
+    await fb.store.collection('solved-posts').doc(props.id).set(data);
+    setDeleted(true);
+    setAttemptingToDelete(false);
+  };
+
+  const handleNewAskForHelp = async (e) => {
+    e.preventDefault();
+    setPopupVisible(false);
+    return history.push('/ask-for-help');
+  };
+
+  const initializeDelete = async (e) => {
+    e.preventDefault();
+    setAttemptingToDelete(true);
+    setPopupVisible(true);
+  };
+
+  const cancelDelete = async (e) => {
+    e.preventDefault();
+    setAttemptingToDelete(false);
+    setPopupVisible(false);
+  };
+
+  const backToOverview = async (e) => {
+    e.preventDefault();
+    setPopupVisible(false);
   };
 
   const reportEntry = async (e) => {
     // prevents redirect to the parent component, as this is clicked on a button within a Link component
     // https://stackoverflow.com/a/53005834/8547462
     e.preventDefault();
 
-    const collectionName = 'reported-posts';
-    const reportedPostsCollection = fb.store.collection(collectionName);
+    const reportedPostsCollection = fb.store.collection('reported-posts');
 
     // redirect the user to the login page, as we can only store user ids for logged-in users
     if (!userIsLoggedIn) {
@@ -95,10 +135,100 @@ export default function Entry(props) {
     numberOfResponsesText = `${responses} ${t('components.entry.repliesReceived')}`;
   }
 
+  const commonButtonClasses = 'px-6 py-3 uppercase font-open-sans font-bold text-center';
+  const positiveActionButtonClasses = `bg-secondary text-white hover:opacity-75 rounded mb-2 block min-w-90 ${commonButtonClasses}`;
+  const deleteButtonClasses = `bg-red-200 text-primary ${commonButtonClasses}`;
+  const invertedDeleteButtonClasses = `text-primary font-medium min-w-90 ${commonButtonClasses.replace('font-bold', '')}`;
+
+  const InitializeDeletionButton = getButtonForPopup(
+    deleteButtonClasses,
+    responses === 0 ? t('components.entry.deleteRequestForHelp') : null,
+    initializeDelete,
+    <DeleteOutlineIcon className="mb-1" />,
+  );
+
+  const HeroFoundButtonInPopup = getButtonForPopup(
+    positiveActionButtonClasses,
+    t('components.entry.popup.heroFound'),
+    handleSolved,
+    <DoneIcon className="ml-2 mb-1" />,
+    showAsSolved,
+  );
+
+  const NewAskForHelpButtonInPopup = getButtonForPopup(
+    positiveActionButtonClasses,
+    t('components.entry.popup.createNewRequest'),
+    handleNewAskForHelp,
+    <ArrowForwardIosIcon className="ml-2 mb-1" />,
+  );
+
+  const CancelButton = getButtonForPopup(
+    positiveActionButtonClasses,
+    t('components.entry.popup.cancel'),
+    cancelDelete,
+    null,
+  );
+
+  const DeleteAnywayButtonInPopup = getButtonForPopup(
+    invertedDeleteButtonClasses,
+    t('components.entry.popup.deleteAnyway'),
+    handleDelete,
+    <ArrowForwardIosIcon className="ml-2 mb-1" />,
+  );
+
+  const DeleteTerminallyButton = getButtonForPopup(
+    invertedDeleteButtonClasses,
+    t('components.entry.popup.deleteTerminally'),
+    handleDelete,
+    <ArrowForwardIosIcon className="ml-2 mb-1" />,
+  );
+
+  const BackToOverviewButtonInPopup = getButtonForPopup(
+    invertedDeleteButtonClasses,
+    t('components.entry.popup.backToOverview'),
+    backToOverview,
+    <ArrowForwardIosIcon className="ml-2 mb-1" />,
+  );
+
+  const PopupContentSolvedHint = getPopupContentComponent(
+    t('components.entry.popup.wasYourRequestSuccessful'),
+    <HeroFoundButtonInPopup />,
+    <DeleteAnywayButtonInPopup />,
+  );
+
+  const PopupContentDeleteReassure = getPopupContentComponent(
+    t('components.entry.popup.reassureDeletion'),
+    <CancelButton />,
+    <DeleteTerminallyButton />,
+  );
+
+  const PopupContentDeleteSuccess = getPopupContentComponent(
+    t('components.entry.popup.yourRequestWasDeleted'),
+    <NewAskForHelpButtonInPopup />,
+    <BackToOverviewButtonInPopup />,
+  );
+
+  const HintsPopup = () => (
+    <Popup
+      modal
+      open={popupVisible}
+      onClose={(e) => {
+        e.preventDefault();
+        setPopupVisible(false);
+      }}
+      contentStyle={{ width: '30%', padding: '0' }}
+    >
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {attemptingToDelete
+        ? ((responses === 0 || showAsSolved) ? <PopupContentDeleteReassure /> : <PopupContentSolvedHint />)
+        : (deleted ? <PopupContentDeleteSuccess /> : <></>)}
+    </Popup>
+  );
+
   if (deleted) {
-    return null;
+    // make popup component available to show the success hint, if the entry was previously deleted
+    return <HintsPopup />;
   }
-
   // eslint-disable-next-line no-nested-ternary
   const buttonClass = reported ? 'btn-report-flagged' : (attemptingToReport ? 'btn-report-abort' : 'btn-report-unflagged');
 
@@ -114,37 +244,28 @@ export default function Entry(props) {
       return <></>;
     }
 
-    const commonButtonClasses = 'px-6 py-3 uppercase font-open-sans font-bold text-center';
-    const expandIconProps = {
-      className: 'ml-2',
-      style: {
-        fontSize: '32px', marginTop: '-4px', marginBottom: '-4px', verticalAlign: 'bottom',
-      },
-    };
+    const heroFoundButtonClasses = showAsSolved
+      ? `bg-secondary text-white hover:opacity-75 ${commonButtonClasses}`
+      : `bg-tertiary text-secondary hover:bg-secondary hover:text-white ${commonButtonClasses}`;
 
     return (
       <div className="flex flex-row mt-4 -mb-2 -mx-4 text-sm rounded-b overflow-hidden">
         {responses === 0
           ? <div className={`bg-gray-200 text-gray-700 flex-grow ${commonButtonClasses}`}>{numberOfResponsesText}</div>
           : (
-            <button type="button" className={`bg-secondary hover:opacity-75 text-white flex-grow ${commonButtonClasses}`} onClick={toggleResponsesVisible}>
-              {responsesVisible ? (
-                <>
-                  {t('components.entry.hideResponses', { count: responses })}
-                  <ExpandLessIcon {...expandIconProps} />
-                </>
-              ) : (
-                <>
-                  {t('components.entry.showResponses', { count: responses })}
-                  <ExpandMoreIcon {...expandIconProps} />
-                </>
-              )}
-            </button>
+            <>
+              <button type="button" className={`bg-secondary hover:opacity-75 text-white flex-1 ${commonButtonClasses}`} onClick={toggleResponsesVisible}>
+                {t('components.entry.message', { count: responses })}
+                <MailOutlineIcon className="ml-2 mb-1" />
+              </button>
+              <button type="button" className={`flex-1 mx-px ${heroFoundButtonClasses}`} onClick={handleSolved} disabled={showAsSolved}>
+                {t('components.entry.heroFound')}
+                <DoneIcon className="ml-2 mb-1" />
+              </button>
+            </>
           )}
-        <button type="button" className={`bg-red-200 text-primary hover:bg-primary hover:text-white ${commonButtonClasses}`} onClick={handleDelete}>
-          {t('components.entry.deleteRequestForHelp')}
-          <DeleteOutlineIcon style={{ fontSize: '20px' }} className="ml-2" />
-        </button>
+        <InitializeDeletionButton />
+        <HintsPopup />
       </div>
     );
   })();
@@ -211,7 +332,7 @@ export default function Entry(props) {
     <>
       {requestCard}
       {mayDeleteEntryAndSeeResponses
-        ? <div className={responsesVisible ? '' : 'hidden'}><Responses id={id} /></div>
+        ? <div className={responsesVisible ? '' : 'hidden'}><Responses id={id} collectionName={collectionName} /></div>
         : <></>}
     </>
   );

src/components/Popup.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import i18n from 'i18next';
+
+export function getPopupContentComponent(heading, firstButtonComponent, secondButtonComponent) {
+  const popupContentClasses = 'p-4 bg-kaki font-open-sans flex flex-col justify-center items-center';
+
+  const textBodyWasYourRequestSuccessful = (
+    <>
+      <p className="mt-2">
+        Lass die Community wissen ob deine Suche erfolgreich war.
+        <i>#strongertogether</i>
+      </p>
+      <p>Anstatt dein Hilfegesuch zu löschen markieren wir es als abgeschlossen.</p>
+      <p>Du kannst es natürlich jederzeit trotzdem löschen.</p>
+    </>
+  );
+
+  const textBodyYourRequestWasDeleted = (
+    <>
+      <p>Bitte beachte, dass es einen Moment dauern kann, bis der Eintrag gelöscht wird.</p>
+      <p>
+        Du kannst natürlich jederzeit eine neue Anfrage erstellen und eine*n Held*in um Hilfe bitten.
+        <i>#strongertogether</i>
+      </p>
+    </>
+  );
+
+  /* eslint-disable-next-line no-nested-ternary */
+  const textBody = heading === i18n.t('components.entry.popup.wasYourRequestSuccessful')
+    ? textBodyWasYourRequestSuccessful
+    : (heading === i18n.t('components.entry.popup.yourRequestWasDeleted') ? textBodyYourRequestWasDeleted : null);
+
+  return () => (
+    <div className={popupContentClasses}>
+      <div className="mb-3 pl-8 pt-2 pb-5 min-w-full">
+        <div className="font-bold">{heading}</div>
+        {textBody}
+      </div>
+      {firstButtonComponent}
+      {secondButtonComponent}
+    </div>
+  );
+}
+
+export function getButtonForPopup(commonButtonClasses, text, onClickFunction, icon, disabled = false) {
+  return () => (
+    <button type="button" className={commonButtonClasses} onClick={onClickFunction} disabled={disabled}>
+      {text}
+      {icon}
+    </button>
+  );
+}