+ {t('components.entry.popup.wasYourRequestSuccessful.firstSentence')}
+ {strongerTogetherHashtag}
+
+
+ {t('components.entry.popup.yourRequestWasDeleted.secondSentence')}
+ {strongerTogetherHashtag}
+
+
+ );
+
+ const HeroFoundButton = getButtonForPopup(
+ positiveActionButtonClasses,
+ t('components.entry.popup.heroFound'),
+ handleSolved,
+
diff --git a/src/components/entry/Entry.jsx b/src/components/entry/Entry.jsx
index 25b92da6..926b636b 100644
--- a/src/components/entry/Entry.jsx
+++ b/src/components/entry/Entry.jsx
@@ -4,16 +4,25 @@ 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 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 fb from '../../firebase';
import Responses from '../Responses';
+import PopupOnEntryAction from '../Popup';
+
+import { ReactComponent as QuestionMarkSvg } from '../../assets/questionmark.svg';
+import { ReactComponent as FlagRedSvg } from '../../assets/flag_red.svg';
+import { ReactComponent as FlagOrangeSvg } from '../../assets/flag_orange.svg';
+import { ReactComponent as XSymbolSvg } from '../../assets/x.svg';
import './Entry.css';
export default function Entry(props) {
const {
showFullText = false,
+ showAsSolved = false,
location = '',
id = '',
request = '',
@@ -32,13 +41,18 @@ 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 [solved, setSolved] = useState(false);
+ const [attemptingToDelete, setAttemptingToDelete] = useState(false);
+ const [attemptingToSolve, setAttemptingToSolve] = useState(false);
const [attemptingToReport, setAttemptingToReport] = useState(false);
+ const [popupVisible, setPopupVisible] = 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 ? 'solved-posts' : 'ask-for-help';
let textToDisplay;
if (showFullText) {
@@ -51,12 +65,52 @@ export default function Entry(props) {
const handleDelete = async (e) => {
e.preventDefault();
- const collectionName = 'ask-for-help';
const doc = await fb.store.collection(collectionName).doc(id).get();
await fb.store.collection('/deleted').doc(id).set({
collectionName, ...doc.data(),
});
setDeleted(true);
+ setAttemptingToDelete(false);
+ setPopupVisible(true); // trigger the deletion confirmation popup
+ };
+
+ const handleSolved = async (e) => {
+ e.preventDefault();
+ const askForHelpDoc = await fb.store.collection('ask-for-help').doc(id).get();
+ const data = askForHelpDoc.data();
+ await fb.store.collection('solved-posts').doc(id).set(data);
+ setSolved(true);
+ setAttemptingToDelete(false);
+ setPopupVisible(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 initializeSolve = async (e) => {
+ e.preventDefault();
+ setAttemptingToSolve(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) => {
@@ -64,8 +118,7 @@ export default function Entry(props) {
// 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) {
@@ -96,8 +149,27 @@ export default function Entry(props) {
numberOfResponsesText = `${responses} ${t('components.entry.repliesReceived')}`;
}
- if (deleted) {
- return null;
+ const popupOnEntryAction = (
+
+ );
+
+ if (deleted || solved) {
+ // make popup component available to show the success hint, if the entry was previously deleted
+ return <>{popupOnEntryAction};
}
// eslint-disable-next-line no-nested-ternary
@@ -115,40 +187,35 @@ export default function Entry(props) {
return <>;
}
- const commonButtonClasses = 'px-6 py-3 uppercase font-open-sans font-bold text-center';
- const expandIconPropsStyle = {
- fontSize: '32px',
- marginTop: '-4px',
- marginBottom: '-4px',
- verticalAlign: 'bottom',
- };
+ const heroFoundButtonClasses = showAsSolved
+ ? 'bg-secondary text-white btn-common'
+ : 'bg-tertiary text-secondary hover:bg-secondary hover:text-white btn-common';
return (
-
+
{responses === 0
- ?
{numberOfResponsesText}
- : (
-
+ ? (
+
+
{numberOfResponsesText}
+
+ ) : (
+ <>
+
+
+
)}
-
);
@@ -160,88 +227,93 @@ export default function Entry(props) {
};
const requestCard = (
-
-
-
- {t('components.entry.somebodyAt')}
- {' '}
-
- {location}
+ <>
+ 0 ? '-with-responses' : ''}`}
+ className={`bg-white px-4 py-2 rounded w-full my-3 text-xl block entry relative ${highlightLeft && 'border-l-4 border-secondary'}`}
+ key={id}
+ ref={link}
+ >
+
+
+ {t('components.entry.somebodyAt')}
+ {' '}
+
+ {location}
+
+ {' '}
+ {t('components.entry.needsHelp')}
- {' '}
- {t('components.entry.needsHelp')}
-
-
- {!entryBelongsToCurrentUser ? (
-
- ) : null}
- {attemptingToReport
- ? (
-
{
e.preventDefault();
+ const prevValue = attemptingToReport;
setAttemptingToReport((curr) => !curr);
- }}
- onKeyDown={(e) => {
- if (e.keyCode === 13) {
- setAttemptingToReport((curr) => !curr);
- }
+ if (!reported && !prevValue) document.body.addEventListener('click', clearReportAttempt);
}}
>
-
-
+ {reported ?
: null}
+ {!reported && !attemptingToReport ?
: null}
+ {!reported && attemptingToReport ?
: null}
+
) : null}
+ {attemptingToReport
+ ? (
+
{
+ e.preventDefault();
+ setAttemptingToReport((curr) => !curr);
+ }}
+ onKeyDown={(e) => {
+ if (e.keyCode === 13) {
+ setAttemptingToReport((curr) => !curr);
+ }
+ }}
+ >
+
+
+ ) : null}
-
{textToDisplay}
-
-
{mayDeleteEntryAndSeeResponses ? '' : numberOfResponsesText}
-
- {t('components.entry.before')}
- {' '}
- {date}
-
-
+
{textToDisplay}
+
+
{mayDeleteEntryAndSeeResponses ? '' : numberOfResponsesText}
+
+ {t('components.entry.before')}
+ {' '}
+ {date}
+
+
+ {buttonBar}
+
+ {popupOnEntryAction}
+
);
return (
<>
{requestCard}
- {mayDeleteEntryAndSeeResponses
- ?
+ {mayDeleteEntryAndSeeResponses && !deleted && responsesVisible
+ ?
: <>}
);
diff --git a/src/index.jsx b/src/index.jsx
index b09e7475..8be7a299 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
// we ignore this check here.
// eslint-disable-next-line import/no-unresolved
import './styles/tailwind.css';
+import 'react-web-tabs/dist/react-web-tabs.css';
import './styles/index.css';
import './styles/App.css';
diff --git a/src/services/loadResponses.js b/src/services/loadResponses.js
new file mode 100644
index 00000000..1e36403a
--- /dev/null
+++ b/src/services/loadResponses.js
@@ -0,0 +1,7 @@
+import fb from '../firebase';
+
+export default async function loadResponses(requestForHelpId, collectionName) {
+ const request = fb.store.collection(collectionName).doc(requestForHelpId).collection('offer-help').orderBy('timestamp', 'asc');
+ const querySnapshot = await request.get();
+ return querySnapshot.docs.map((docSnapshot) => ({ ...docSnapshot.data(), id: docSnapshot.id }));
+}
diff --git a/src/styles/App.css b/src/styles/App.css
index 88e92ce8..e5a7d066 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -44,11 +44,6 @@
background-color: #87a544;
}
-.font-open-sans {
- font-family: 'Open Sans', sans-serif;
- letter-spacing: 0;
-}
-
.angle-cut-background {
background: #f9f7f0;
position: relative;
diff --git a/src/styles/index.css b/src/styles/index.css
index 9c1da7e9..86c4c134 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -6,6 +6,12 @@
@tailwind utilities;
+
+.font-open-sans {
+ font-family: 'Open Sans', sans-serif;
+ letter-spacing: 0;
+}
+
.btn-primary {
@apply rounded p-4 bg-primary text-secondary w-full inline-block text-center font-bold;
}
@@ -14,6 +20,24 @@
@apply rounded p-4 bg-secondary text-secondary w-full inline-block text-center font-bold;
}
+.btn-common {
+ @apply py-2 uppercase font-open-sans font-bold text-center text-xs;
+}
+
+.btn-common-font-normal {
+ @apply py-2 uppercase font-open-sans font-normal text-center text-xs;
+}
+
+@screen md {
+ .btn-common, .btn-common-normal-font {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ padding-right: 1.5rem;
+ padding-left: 1.5rem;
+ font-size: .875rem;
+ }
+}
+
.btn-green {
background-color: #87a544;
font-family: 'Open Sans Condensed', sans-serif;
@@ -204,7 +228,7 @@
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
-
+
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
@@ -303,4 +327,34 @@
.btn-white-shadow:hover {
box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.8);
-}
\ No newline at end of file
+}
+
+/* the following classes are necessary to overwrite the default border of the tab bar */
+.btn-bottom-border-black::after {
+ border-bottom: 3px solid #222222;
+}
+
+.rwt__tablist:not([aria-orientation="vertical"]) .rwt__tab[aria-selected="true"]:after {
+ bottom: -1px;
+ left: 0;
+ width: 100%;
+ border-bottom: 3px solid #222222;
+}
+
+.rwt__tablist[aria-orientation="vertical"] .rwt__tab[aria-selected="true"]:after {
+ right: -1px;
+ top: 0;
+ height: 100%;
+ border-bottom: 3px solid #222222;
+}
+
+@media only screen and (max-width: 834px) {
+ .rwt__tab {
+ background: transparent;
+ border: 0;
+ font-family: inherit;
+ font-size: .875rem;
+ transition: background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+ padding-left: 1rem;
+ }
+}
diff --git a/src/util/parseDoc.js b/src/util/parseDoc.js
new file mode 100644
index 00000000..e4354efe
--- /dev/null
+++ b/src/util/parseDoc.js
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+export default function 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;
+ }
+}
diff --git a/src/views/AskForHelp.jsx b/src/views/AskForHelp.jsx
index 08d088cb..bd5e5a7f 100644
--- a/src/views/AskForHelp.jsx
+++ b/src/views/AskForHelp.jsx
@@ -107,6 +107,7 @@ export default function AskForHelp() {