Update "idea" page with new information

* add graceful handling of "other user should be adding place suggestion"; * add map test to admin view.
skivol · Sep 25, 2021 · 36c2f5f · 36c2f5f
1 parent f6037ab
commit 36c2f5f
Show file tree

Hide file tree

Showing 14 changed files with 223 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@
 
 ### Активировать второй этап
 
-Меню профиля -> Перейти к следующему этапу (становится доступным при заполнении всей информации запрашиваемой на первом этапе).
+Меню профиля -> _Перейти к следующему этапу_ (становится доступным при заполнении всей информации запрашиваемой на первом этапе).
 ![Меню Профиля](/docs/images/profile-menu.png)
 
 #### Диалог активации второго этапа:

diff --git a/better-dating-frontend/src/Messages.ts b/better-dating-frontend/src/Messages.ts
@@ -50,3 +50,6 @@ export const didBeforeButDoNotKnowIfGoingToDoInFuture =
 export const didBeforeNotGoingInFuture =
   "Делал(а) раньше, не собираюсь в будущем";
 export const coupleTimesInYearOrMoreSeldom = "Несколько раз в год или реже";
+
+export const otherUserShouldBeAddingPlaceSuggestion =
+  "Другой пользователь должен добавлять место встречи";
diff --git a/better-dating-frontend/src/components/AddLocation.tsx b/better-dating-frontend/src/components/AddLocation.tsx
@@ -17,14 +17,14 @@ import "leaflet/dist/leaflet.css";
 import * as L from "leaflet";
 import {
   MapContainer,
-  TileLayer,
   Marker,
   Circle,
   Popup,
   useMapEvents,
 } from "react-leaflet";
 
 import { AddLocationButton } from "./location";
+import { MyTileLayer } from "./location/MyTileLayer";
 import { dating } from "./navigation/NavigationUrls";
 import { useDateId, ReactMarkdownMaterialUi, required } from "../utils";
 import { addPlace } from "../actions";
@@ -218,15 +218,7 @@ export const LocationForm = ({
                       map = createdMap;
                     }}
                   >
-                    <TileLayer
-                      attribution='Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
-                      url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
-                      accessToken={mapboxToken}
-                      tileSize={512}
-                      zoomOffset={-1}
-                      maxZoom={18}
-                      id="skivol/ckpimp0lc0bme18pbwegnv6ih"
-                    />
+                    <MyTileLayer mapboxToken={mapboxToken} />
                     <DraggableMarker
                       disabled={!adding}
                       reactsToUserLocation={adding}
@@ -362,10 +354,21 @@ type Props = {
   coordinates: { lat: number; lng: number; specific: boolean };
   mapboxToken: string;
 };
-const AddLocation = ({ coordinates, mapboxToken }: Props) => {
+type ErrorProps = {
+  error: string;
+};
+
+function isError(props: Props | ErrorProps): props is ErrorProps {
+  return (props as ErrorProps).error !== undefined;
+}
+const AddLocation = (props: Props | ErrorProps) => {
   const router = useRouter();
   const dispatch = useDispatch();
   const dateId = useDateId();
+  if (isError(props)) {
+    return <Alert severity="error">{props.error}</Alert>;
+  }
+  const { coordinates, mapboxToken } = props;
 
   const { lat, lng, specific } = coordinates;
   const zoom = specific ? 13 : 5; // zoom closer if could find specific place coordinates

diff --git a/better-dating-frontend/src/components/Administration.tsx b/better-dating-frontend/src/components/Administration.tsx
@@ -1,44 +1,22 @@
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
+import { useState } from "react";
 import { useDispatch } from "react-redux";
-import { Button, Typography } from "@material-ui/core";
+import { Button, Typography, Grid } from "@material-ui/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faTools,
   faMailBulk,
   faMapMarkedAlt,
 } from "@fortawesome/free-solid-svg-icons";
-import {
-  getData,
-  unauthorized,
-  showError,
-  showSuccess,
-  postData,
-  useDialog,
-} from "../utils";
+import { showError, showSuccess, postData, useDialog } from "../utils";
 import * as ActionMessages from "../actions/Messages";
 import * as Messages from "./Messages";
-import { CenteredSpinner, SpinnerAdornment } from "./common";
-import { GeolocationDialog } from "./administration/GeolocationDialog";
+import { SpinnerAdornment } from "./common";
+import { GeolocationDialog, MapTest } from "./administration";
+import "leaflet/dist/leaflet.css";
 
-const Administration = () => {
-  const [usageStats, setUsageStats] = useState<any>(null);
+const Administration = ({ mapboxToken, usageStats }: any) => {
   const [sending, setSending] = useState(false);
-
   const dispatch = useDispatch();
-  const router = useRouter();
-  useEffect(() => {
-    getData("/api/admin/usage-stats")
-      .then(setUsageStats)
-      .catch((e) => {
-        const isUnauthorized = unauthorized(e);
-        const message = isUnauthorized
-          ? Messages.unauthorized
-          : ActionMessages.oopsSomethingWentWrong;
-        showError(dispatch, message);
-        isUnauthorized && router.push("/");
-      });
-  }, []);
 
   const onSendTestMail = async () => {
     setSending(true);
@@ -50,50 +28,59 @@ const Administration = () => {
 
   const { dialogIsOpen, openDialog, closeDialog } = useDialog();
 
-  if (!usageStats) {
-    return <CenteredSpinner />;
-  }
   return (
     <>
-      <div className="u-center-horizontally u-margin-bottom-10px">
-        <Typography variant="h3" className="u-bold u-text-align-center">
-          <FontAwesomeIcon icon={faTools} /> {Messages.Administration}
-        </Typography>
-      </div>
-      <div className="u-padding-16px"></div>
-      <div className="u-max-content u-center-horizontally">
-        {Messages.registeredNumber(usageStats.registered)}
-      </div>
-      <div className="u-max-content u-center-horizontally u-margin-bottom-10px">
-        {Messages.removedNumber(usageStats.removed)}
-      </div>
-      <div className="u-max-content u-center-horizontally u-margin-bottom-10px">
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={onSendTestMail}
-          disabled={sending}
-          startIcon={
-            sending ? (
-              <SpinnerAdornment />
-            ) : (
-              <FontAwesomeIcon icon={faMailBulk} />
-            )
-          }
-        >
-          {Messages.testEmail}
-        </Button>
-      </div>
-      <div className="u-max-content u-center-horizontally">
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={() => openDialog()}
-          startIcon={<FontAwesomeIcon icon={faMapMarkedAlt} />}
-        >
-          {Messages.testGeolocation}
-        </Button>
-      </div>
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justify="center"
+        spacing={2}
+        className="u-margin-bottom-10px"
+      >
+        <Grid item>
+          <Typography variant="h3" className="u-bold">
+            <FontAwesomeIcon icon={faTools} /> {Messages.Administration}
+          </Typography>
+        </Grid>
+        <Grid style={{ height: "16px" }}></Grid>
+        <Grid item>
+          <div className="u-text-align-center">
+            {Messages.registeredNumber(usageStats.registered)}
+          </div>
+          <div className="u-text-align-center">
+            {Messages.removedNumber(usageStats.removed)}
+          </div>
+        </Grid>
+        <Grid item>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={onSendTestMail}
+            disabled={sending}
+            startIcon={
+              sending ? (
+                <SpinnerAdornment />
+              ) : (
+                <FontAwesomeIcon icon={faMailBulk} />
+              )
+            }
+          >
+            {Messages.testEmail}
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => openDialog()}
+            startIcon={<FontAwesomeIcon icon={faMapMarkedAlt} />}
+          >
+            {Messages.testGeolocation}
+          </Button>
+        </Grid>
+      </Grid>
+      <MapTest mapboxToken={mapboxToken} />
       {dialogIsOpen && <GeolocationDialog closeDialog={closeDialog} />}
     </>
   );

diff --git a/better-dating-frontend/src/components/Messages.ts b/better-dating-frontend/src/components/Messages.ts
@@ -5,14 +5,16 @@ export const selfDevelopment = "саморазвитие";
 export const dating = "свидания";
 export const family = "семья";
 export const flowDescription = `
-1. Саморазвитие
-2. Саморазвитие + свидания (взаимоотношения)
-3. Саморазвитие + свидания (взаимоотношения) + создание Семьи
+1. **Саморазвитие**
+2. **Саморазвитие + свидания (взаимоотношения)**
+3. Саморазвитие + свидания (взаимоотношения) + _создание Семьи_
 
 * Логотип взаимосвязан с этим циклом, но является более обширным символом. Как считаете, что он означает ?
 * _Обратите также внимание_: иконка семьи символизирует взаимоотношения между родителями и ребенком, но не определяет количество детей,
 т.к. в полноценной семье их должно быть более одного.
 `;
+export const developmentStatus =
+  "Первый и начальная версия второго этапа доступны сейчас на сайте, а третий будет разрабатываться далее.";
 export const metaDescription = `${description}. Альтернатива сервисам love.ua, tinder.com, loveeto.com, badoo.com, mamba.ru и т.д. Необычный, ведический, славянский сайт знакомств для саморазвития, свиданий, встреч, смотрин, серьезных отношений, создания семьи в Украине, России.`;
 export const proposal = "предложение";
 export const Proposal = "Предложение";
@@ -25,6 +27,8 @@ export const Technologies = "Технологии";
 export const logoTooltip = "Смотрины.укр & Смотрины.рус логотип";
 export const email = "Почта";
 export const updated = "Обновлено";
+export const pageInFacebook = "Мы в Facebook";
+export const pageInVk = "Мы в Vk";
 export const footer = "смотрины.укр & смотрины.рус";
 export const license = "Лицензия";
 export const acknowledgements = "Благодарности";
@@ -41,6 +45,10 @@ export const FirstStageThirdStep =
 export const FirstStageFourthStep =
   '4. В случае совпадения желания обоих участников продолжать отношения они внимательно познают друг друга в реальной жизни и меняют цель использования системы с "хочу найти вторую половинку" на "хотим завести детей" (детали взаимодействия с системой на данном этапе будут оглашены позже). Иначе - происходит возврат ко второму шагу.';
 
+export const CurrentImplementation = "Текущая Реализация";
+export const currentImplementationDetails =
+  "Описание текущих функций вместе с изображениями системы можно посмотреть [здесь](https://github.com/skivol/better-dating/blob/master/README.md), а также [зарегистрировавшись](/регистрация) и начав ей пользоваться ;).";
+
 export const AreDatingSitesNeeded = "Нужны ли вообще сайты знакомств?";
 export const MotivationOfNeedTitle =
   "С точки зрения создателя данного ресурса в них есть польза для современного общества, заключающаяся в следующем:";
@@ -164,11 +172,13 @@ export const removedNumber = (number: any) =>
 export const unauthorized = "Не достаточно прав для просмотра этой страницы";
 export const testEmail = "Тестовое письмо";
 export const testEmailWasSent = "Тестовое письмо было отправлено";
-export const testGeolocation = "Проверить геолокацию";
+export const testGeolocation = "Геолокация";
 export const refresh = "Обновить";
 export const timeout = "Время на локацию";
 export const timeoutHelperText = "миллисекунды, 10 000 по умолчанию";
 
+export const testMap = "Карта";
+
 export const profileTabsAria = "Табы профиля";
 export const selfDevelopmentTab = "Саморазвитие";
 export const datingProfileTab = "Свидания (Второй этап)";

diff --git a/better-dating-frontend/src/components/Proposal.tsx b/better-dating-frontend/src/components/Proposal.tsx
@@ -13,10 +13,12 @@ import {
   Dialog,
   CardMedia,
 } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import { faFacebook, faVk } from "@fortawesome/free-brands-svg-icons";
 
 import { getData, ReactMarkdownMaterialUi } from "../utils";
 import { updated } from "../constants";
@@ -57,9 +59,9 @@ export const Proposal = () => {
 
   return (
     <>
-      <Grid container justify="center">
-        <Paper className="u-padding-15px">
-          <Grid item className="u-margin-bottom-10px">
+      <Paper className="u-padding-25px">
+        <Grid container justify="center" spacing={3}>
+          <Grid item>
             <Typography variant="h5" className="u-text-align-center">
               {Messages.description}
             </Typography>
@@ -105,8 +107,17 @@ export const Proposal = () => {
               </ReactMarkdownMaterialUi>
             </Grid>
           </Grid>
-        </Paper>
-      </Grid>
+          <Grid item>
+            <Alert
+              severity="success"
+              variant="filled"
+              className="u-max-width-400px"
+            >
+              {Messages.developmentStatus}
+            </Alert>
+          </Grid>
+        </Grid>
+      </Paper>
 
       <Grid
         container
@@ -146,6 +157,18 @@ export const Proposal = () => {
               </Grid>
             </AccordionDetails>
           </Accordion>
+          <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography className={clsx("c-heading", classes.heading)}>
+                {Messages.CurrentImplementation}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <ReactMarkdownMaterialUi>
+                {Messages.currentImplementationDetails}
+              </ReactMarkdownMaterialUi>
+            </AccordionDetails>
+          </Accordion>
           <Accordion>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography className={classes.heading}>
@@ -228,7 +251,7 @@ export const Proposal = () => {
             </Grid>
           </Paper>
         </Grid>
-        <Grid item>
+        <Grid item className="u-margin-bottom-10px">
           <Paper className="u-max-width-650px u-center-horizontally">
             <Grid
               container
@@ -254,6 +277,35 @@ export const Proposal = () => {
             </Grid>
           </Paper>
         </Grid>
+        <Paper className="u-max-width-650px u-center-horizontally">
+          <Grid
+            container
+            justify="center"
+            spacing={1}
+            className="u-padding-10px"
+          >
+            <Grid item>
+              <Button
+                href="https://www.facebook.com/Смотриныукр-Смотринырус-112219810635447"
+                variant="text"
+                color="primary"
+                startIcon={<FontAwesomeIcon icon={faFacebook} />}
+              >
+                <Typography>{Messages.pageInFacebook}</Typography>
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                href="https://vk.com/public198979643"
+                variant="text"
+                color="default"
+                startIcon={<FontAwesomeIcon icon={faVk} />}
+              >
+                <Typography>{Messages.pageInVk}</Typography>
+              </Button>
+            </Grid>
+          </Grid>
+        </Paper>
         {dialog}
       </Grid>
       <Paper className="c-updated-time-paper u-center-horizontally">