Merge pull request #28 from flucivja/main

fixed detail page
psekan · Nov 1, 2020 · a7316b7 · a7316b7
2 parents 35be6b0 + d615924
commit a7316b7
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 85 deletions.
diff --git a/client/src/public/components/CollectionEntries.tsx b/client/src/public/components/CollectionEntries.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinearProgress, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -20,19 +20,12 @@ interface CollectionEntriesProps {
   className?: string;
   limitTable?: number;
   data: CollectionPointEntry[] | undefined;
-  isLoading: boolean;
 }
 
-export function CollectionEntries({
-  className,
-  limitTable,
-  data,
-  isLoading
-}: CollectionEntriesProps) {
+export function CollectionEntries({ className, limitTable, data }: CollectionEntriesProps) {
   const classes = useStyles();
   return (
     <TableContainer component={Paper} className={className}>
-      {isLoading && <LinearProgress />}
       <Table size={'small'}>
         <TableHead>
           <TableRow>
@@ -75,11 +68,11 @@ export function CollectionEntries({
 function formatTime(time: string) {
   if (time) {
     if (time.length === 8) {
-      time = time.substring(0,5);
+      time = time.substring(0, 5);
     }
     if (time.charAt(0) === '0') {
       time = time.substring(1);
     }
   }
   return time;
-}
+}
diff --git a/client/src/public/components/PlaceDetail.tsx b/client/src/public/components/PlaceDetail.tsx
@@ -10,7 +10,11 @@ import FaceOutlinedIcon from '@material-ui/icons/FavoriteBorder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import PeopleAltOutlinedIcon from '@material-ui/icons/PeopleAltOutlined';
 
-import { useCollectionPointsPublic, useCollectionPointEntries } from '../../services';
+import {
+  useCollectionPointsPublic,
+  useCollectionPointEntries,
+  CollectionPointEntity,
+} from '../../services';
 import { Places } from '../components/Places';
 import { CollectionEntries } from '../components/CollectionEntries';
 import { useSession } from '../../Session';
@@ -54,52 +58,72 @@ export function PlaceDetail({ county, id, showSearch, limitTable, className }: P
   const history = useHistory();
   const { isLoading, response, error, refresh } = useCollectionPointsPublic(county);
   const detail = response?.find(it => String(it.id) === id);
-  const data = useCollectionPointEntries(detail ? detail.id : '');
-  const [session, sessionActions] = useSession();
-
-  return isLoading ? (
-    <LinearProgress />
-  ) : (
+  return (
     <div className={className}>
-      {!detail && !error && <Alert severity={'warning'}>Odberné miesto nenájdene</Alert>}
-      {error && (
-        <Alert
-          severity={'error'}
-          action={
-            <Button color="inherit" size="small" onClick={refresh}>
-              Obnoviť
-            </Button>
-          }
-        >
-          Nastala neznáma chyba
-        </Alert>
+      {showSearch && (
+        <Places
+          className={classes.placesSelect}
+          size={'small'}
+          label={'Odberné miesto'}
+          selected={id}
+          county={county}
+          onChange={entity => history.push(`/aktualne-pocty-cakajucich/${county}/${entity.id}`)}
+        />
+      )}
+      {isLoading && <LinearProgress />}
+      {!isLoading && error && <ErrorHandler refresh={refresh} />}
+      {!detail && !error && !isLoading && (
+        <Alert severity={'warning'}>Odberné miesto nenájdene</Alert>
+      )}
+      {!isLoading && detail && (
+        <PlaceDetailTable
+          county={county}
+          id={id}
+          showSearch={showSearch}
+          limitTable={limitTable}
+          className={className}
+          detail={detail}
+        />
+      )}
+    </div>
+  );
+}
+
+function PlaceDetailTable({
+  detail,
+  county,
+  id,
+  limitTable,
+}: { detail: CollectionPointEntity } & PlaceDetailProps) {
+  const classes = useStyles();
+
+  const [session, sessionActions] = useSession();
+  const { isLoading, response, error, refresh } = useCollectionPointEntries(detail.id);
+  return (
+    <>
+      {!isLoading && error && <ErrorHandler refresh={refresh} />}
+      {isLoading && (
+        <>
+          <PlaceName county={county} id={id} detail={detail} />
+          <LinearProgress />
+        </>
       )}
-      {detail && (
+      {!isLoading && (
         <div>
-          {showSearch && (
-            <Places
-              className={classes.placesSelect}
-              size={'small'}
-              label={'Odberné miesto'}
-              selected={id}
-              county={county}
-              onChange={entity => history.push(`/aktualne-pocty-cakajucich/${county}/${entity.id}`)}
-            />
-          )}
           <div className={classes.locationContainer}>
-            <Typography variant={'subtitle1'} gutterBottom className={classes.placeTitle}>
-              <PlaceIcon fontSize={'small'} />{' '}
-              <RouterLink to={`/aktualne-pocty-cakajucich/${county}/${id}`}>
-                {detail.address}
-              </RouterLink>{' '}
-            </Typography>
-            <div style={{textAlign: 'right'}}>
-              {((data && data.response) || []).length > 0 && (
+            <PlaceName county={county} id={id} detail={detail} />
+            <div style={{ textAlign: 'right' }}>
+              {(response || []).length > 0 && (
                 <Tooltip placement="left" arrow title="Priemerne čakajúcich">
                   <Chip
                     variant="outlined"
                     icon={<PeopleAltOutlinedIcon />}
-                    label={data.response ? median(data.response.map(a => a.length).slice(0, VALUES_FOR_MEDIAN)) : ''} />
+                    label={
+                      response
+                        ? median(response.map(a => a.length).slice(0, VALUES_FOR_MEDIAN))
+                        : ''
+                    }
+                  />
                 </Tooltip>
               )}
               {session.favorites?.some(it => it.county === county && it.entryId === id) ? (
@@ -111,7 +135,11 @@ export function PlaceDetail({ county, id, showSearch, limitTable, className }: P
                 </IconButton>
               ) : (
                 <Badge
-                  badgeContent={session.favorites && session.favorites.length > 0 ? (MAX_FAVORITES-session.favorites.length) : MAX_FAVORITES}
+                  badgeContent={
+                    session.favorites && session.favorites.length > 0
+                      ? MAX_FAVORITES - session.favorites.length
+                      : MAX_FAVORITES
+                  }
                   color="primary"
                   overlap="circle"
                 >
@@ -127,12 +155,7 @@ export function PlaceDetail({ county, id, showSearch, limitTable, className }: P
               )}
             </div>
           </div>
-          <CollectionEntries
-            className={classes.table}
-            limitTable={limitTable}
-            isLoading={data ? data.isLoading : true}
-            data={data ? data.response : []}
-          />
+          <CollectionEntries className={classes.table} limitTable={limitTable} data={response} />
           {!session.isRegistered && (
             <Button
               component={RouterLink}
@@ -146,19 +169,51 @@ export function PlaceDetail({ county, id, showSearch, limitTable, className }: P
           )}
         </div>
       )}
-    </div>
+    </>
+  );
+}
+
+function PlaceName({
+  detail,
+  county,
+  id,
+}: {
+  detail: CollectionPointEntity;
+  county: string;
+  id: string;
+}) {
+  const classes = useStyles();
+  return (
+    <Typography variant={'subtitle1'} gutterBottom className={classes.placeTitle}>
+      <PlaceIcon fontSize={'small'} />{' '}
+      <RouterLink to={`/aktualne-pocty-cakajucich/${county}/${id}`}>{detail.address}</RouterLink>{' '}
+    </Typography>
+  );
+}
+
+function ErrorHandler({ refresh }: { refresh: () => void }) {
+  return (
+    <Alert
+      severity={'error'}
+      action={
+        <Button color="inherit" size="small" onClick={refresh}>
+          Obnoviť
+        </Button>
+      }
+    >
+      Nastala neznáma chyba
+    </Alert>
   );
 }
 
-function median(values: number[]){
-  if(values.length ===0) return 0;
-  values.sort(function(a,b){
-    return a-b;
+function median(values: number[]) {
+  if (values.length === 0) return 0;
+  values.sort(function (a, b) {
+    return a - b;
   });
-  console.log(values);
   var half = Math.floor(values.length / 2);
   if (values.length % 2 === 1) {
     return values[half];
   }
-  return Math.round((values[half - 1] + values[half])/2.0);
+  return Math.round((values[half - 1] + values[half]) / 2.0);
 }
diff --git a/client/src/public/favorites/Favorites.tsx b/client/src/public/favorites/Favorites.tsx
@@ -59,7 +59,12 @@ export function Favorites() {
       <Typography variant={'h6'} className={classes.title}>
         Sledované odberné miesta
       </Typography>
-      {!favorites.length && <Alert severity={'info'}>Žiadne sledované odberné miesta.</Alert>}
+      {!favorites.length && (
+        <Alert severity={'info'}>
+          Žiadne sledované odberné miesta. Začať sledovať odberné miesto môžete kliknutím na ikonu
+          srdiečka nad tabuľkou odberného miesta.
+        </Alert>
+      )}
       <div className={classes.container}>
         {favorites.map(fav => (
           <PlaceDetail

diff --git a/client/src/public/home/HomePage.tsx b/client/src/public/home/HomePage.tsx
@@ -34,8 +34,8 @@ const useStyles = makeStyles((theme: Theme) =>
       textAlign: 'center',
       margin: '1.5rem 0',
       fontWeight: 800,
-      fontSize: '1.2rem'
-    }
+      fontSize: '1.2rem',
+    },
   }),
 );
 
@@ -45,7 +45,7 @@ export function HomePage() {
 
   return (
     <div>
-      <Typography variant="subtitle2" style={{marginBottom: '1rem'}}>
+      <Typography variant="subtitle2" style={{ marginBottom: '1rem' }}>
         Prvé kolo testovania prebieha v sobotu 31. októbra a v nedeľu 1. novembra, od 7:00 do 21:30.
         Bližšie informácie nájdete na{' '}
         <Link href={'https://www.somzodpovedny.sk/'} target={'_blank'}>
@@ -74,17 +74,15 @@ export function HomePage() {
               description={'Čakám v rade'}
             />
           </Grid>
-          {session.favorites && session.favorites.length !== 0 && (
-            <Grid item md={6} xs={12}>
-              <NavLink
-                to={`/favorites/${session.favorites
-                  .map(it => it.county + ':' + it.entryId)
-                  .join(',')}`}
-                label={'Moje uložené odberné miesta'}
-                description={'Chcem poznať stav'}
-              />
-            </Grid>
-          )}
+          <Grid item md={6} xs={12}>
+            <NavLink
+              to={`/favorites/${(session.favorites || [])
+                .map(it => it.county + ':' + it.entryId)
+                .join(',')}`}
+              label={'Moje uložené odberné miesta'}
+              description={'Chcem poznať stav'}
+            />
+          </Grid>
         </Grid>
       </div>
       <Typography variant={'h6'}>Informácie o testovaní:</Typography>
@@ -104,8 +102,9 @@ export function HomePage() {
         </Link>
       </Typography>
 
-      <Typography variant={'body1'}  className={classes.contact}>
-        V prípade otázok nás kontaktujte na <Link href="mailto:[email protected]">[email protected]</Link>.
+      <Typography variant={'body1'} className={classes.contact}>
+        V prípade otázok nás kontaktujte na{' '}
+        <Link href="mailto:[email protected]">[email protected]</Link>.
       </Typography>
     </div>
   );

diff --git a/client/src/public/setwaiting/PlaceRegister.tsx b/client/src/public/setwaiting/PlaceRegister.tsx
@@ -137,7 +137,9 @@ function RegisterPlace({ id, county }: { id: string; county: string }) {
     } catch (err) {
       setIsRegistering(false);
       setRegisterError(
-        err && err.messageTranslation ? err.messageTranslation : 'Chyba pri odosielaní dát, skúste znova neskôr.',
+        err && err.messageTranslation
+          ? err.messageTranslation
+          : 'Chyba pri odosielaní dát, skúste znova neskôr.',
       );
     }
   }
@@ -221,7 +223,9 @@ function UpdateDeparture() {
     } catch (err) {
       setIsRegistering(false);
       setRegisterError(
-        err && err.messageTranslation ? err.messageTranslation : 'Chyba pri odosielaní dát, skúste znova neskôr.',
+        err && err.messageTranslation
+          ? err.messageTranslation
+          : 'Chyba pri odosielaní dát, skúste znova neskôr.',
       );
     }
   }

diff --git a/client/src/services/index.ts b/client/src/services/index.ts
@@ -95,7 +95,6 @@ export interface CollectionPointEntry {
 
 export function useCollectionPointEntries(id: string) {
   return useFetch<CollectionPointEntry[]>(`/api/collectionpoints/${id}/entries`);
-  // return useFetch<CollectionPointEntry[]>(`/mock/entries.json`);
 }
 
 export interface RegisterToCollectionPointRequest {
@@ -126,7 +125,12 @@ export async function registerToCollectionPoint(
   });
 }
 
-export async function updateDeparture(token: string, id: string, departure: string, recaptchaToken: string): Promise<any> {
+export async function updateDeparture(
+  token: string,
+  id: string,
+  departure: string,
+  recaptchaToken: string,
+): Promise<any> {
   return fetchJson(`/api/entries/${id}`, {
     method: 'PUT',
     body: JSON.stringify({ token, departure, recaptcha: recaptchaToken }),