Merge pull request #3 from SteveLabrinos/development

Development

public/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/app-favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="author" content="Steve Labrinos">
     <meta
       name="description"
       content="Weather Application by MSc Information Systems"

public/manifest.json

@@ -12,6 +12,11 @@
       "type": "image/png",
       "sizes": "192x192"
     },
+    {
+      "src": "logo152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
     {
       "src": "logo512.png",
       "type": "image/png",

src/App.js

@@ -46,6 +46,8 @@ function App() {
             <Redirect to="/" />
         </Switch> :
         <Switch>
+            <Route path="/collection/:cityName" render={props => <CityConditions {...props} />} />
+            <Route path="/collection" render={props => <Collections {...props} />} />
             <Route path="/search" render={props => <SearchCities {...props} />} />
             <Route path="/auth/sign-in" render={props => <SignIn {...props} />} />
             <Route path="/auth/sign-up" render={props => <SignUp {...props} />} />

src/axios-weather.js

@@ -5,7 +5,7 @@ import axios from 'axios';
  */
 
 const instance = axios.create({
-    baseURL: 'https://msc-ais-weather:9000/'
+    baseURL: 'https://weather.msc-ais.site/'
 });
 
 export default instance;

src/components/CityConditions/CityConditions.js

@@ -1,6 +1,7 @@
 import { Fragment, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
+import { Redirect } from "react-router-dom";
 
 import Cockpit from '../UI/Cockpit/Cockpit';
 import { fetchInputCityConditions, setCurrentToDisplay, setForecastToDisplay } from '../../store/actions';
@@ -23,6 +24,7 @@ const CityConditions = () => {
     //  selectors
     const { city, loading, forecastConditions, conditionsFetched, conditionsError,
         displayingConditions } = useSelector(state => state.search);
+    const token = useSelector(state => state.auth.token);
 
     const onInputCityConditions =useCallback(() => {
         dispatch(fetchInputCityConditions(cityName));
@@ -45,6 +47,9 @@ const CityConditions = () => {
         }
     };
 
+    const authRedirect = !token ?
+        <Redirect to="/" /> : null;
+
     const wConditions = conditionsFetched ?
         <WeatherConditions
             city={city}
@@ -63,6 +68,7 @@ const CityConditions = () => {
     return (
         <Fragment>
             <Cockpit title="Συνθήκες Πόλης" />
+            {authRedirect}
             {wConditions}
         </Fragment>
     );

src/components/Naviagation/Footer/FooterContent/FooterContent.js

@@ -22,7 +22,7 @@ const footerContent = props => {
                     Ακολουθήστε μας:
                 </Typography>
                 <Link
-                    href="https://github.com/orgs/MSc-AIS/projects/1"
+                    href="https://github.com/MSc-AIS"
                     target="_blank"
                     rel="noreferrer">
                     <GitHubIcon className={classes.Icon}/>

src/components/Naviagation/Navbar/Navbar.js

@@ -28,8 +28,12 @@ const useStyles = makeStyles((theme) => ({
     },
     img: {
         height: 80,
-        textAlign: 'center'
+        textAlign: 'center',
+        flex: 2
     },
+    logoStyle: {
+        display: 'flex'
+    }
 }));
 
 
@@ -42,8 +46,15 @@ const Navbar = props => {
                 <Toolbar className={classes.toolbar} >
                     <CssBaseline />
                      <Grid container spacing={2} justify="space-between" alignItems="center">
-                        <Hidden mdUp>
-                            <Grid item xs={1}>
+                        <Hidden smDown>
+                            <Grid item md={3} lg={4}>
+                                <Typography variant="h5" component="h2" className={classes.title}>
+                                    AIS Weather
+                                </Typography>
+                            </Grid>
+                        </Hidden>
+                        <Grid item xs={11} md={3} lg={4} className={classes.logoStyle}>
+                            <Hidden mdUp>
                                 <IconButton
                                     edge="start"
                                     className={classes.menuButton}
@@ -52,16 +63,7 @@ const Navbar = props => {
                                     onClick={props.toggleDrawer}>
                                     <MenuIcon />
                                 </IconButton>
-                            </Grid>
-                        </Hidden>
-                        <Hidden smDown>
-                            <Grid item md={3} lg={4}>
-                                <Typography variant="h5" component="h2" className={classes.title}>
-                                    AIS Weather
-                                </Typography>
-                            </Grid>
-                        </Hidden>
-                        <Grid item xs={11} md={3} lg={4}>
+                            </Hidden>
                             <Typography component="div" className={classes.img}>
                                 <Logo logoType="appLogo" />
                             </Typography>

src/components/Naviagation/SideDrawer/SideDrawer.js

@@ -10,19 +10,18 @@ import Backdrop from '../../UI/Backdrop/Backdrop';
  * @author Stavros Labrinos [stalab at linuxmail.org] on 28/01/21.
  */
 
-const sideDrawer = ( props ) => {
-    const attachedClasses = props.open ? [classes.SideDrawer, classes.Open] : [classes.SideDrawer, classes.Close];
+const sideDrawer = ({ open, closed }) => {
+    const attachedClasses = open ? [classes.SideDrawer, classes.Open] : [classes.SideDrawer, classes.Close];
 
     return (
         <Fragment>
-            <Backdrop show={props.open} clicked={props.closed}/>
-            <div className={attachedClasses.join(' ')} onClick={props.closed}>
+            <Backdrop show={open} clicked={closed}/>
+            <div className={attachedClasses.join(' ')} onClick={closed}>
                 <div className={classes.Logo}>
                     <Logo logoType="appLogo"/>
                 </div>
                 <nav>
                     <NavigationItems />
-                    {/*<NavigationItems isAuthenticated={props.isAuth} />*/}
                 </nav>
             </div>
         </Fragment>

src/components/UI/Cockpit/Cockpit.js

@@ -10,14 +10,15 @@ import classes from './Cockpit.module.css';
 const cockpit = props => {
 
     return (
+        //  temp disable cockpit title
         <Hidden mdUp>
             <Typography className={classes.Title}
                         variant="h5"
                         component="h2"
                         style={{ marginBottom: '2rem' }}
                         id="back-to-top-anchor"
                         color="textPrimary">
-                {props.title}
+                {/*{props.title}*/}
             </Typography>
         </Hidden>
     );

src/components/UI/Cockpit/Cockpit.module.css

@@ -8,13 +8,13 @@ div .Title {
     position: relative;
 }
 
-.Title::after {
-    position: absolute;
-    content: "";
-    height: 6px;
-    width: 15%;
-    max-width: 60px;
-    bottom: -16px;
-    background: #116149;
-    left: 0;
-}
+/*.Title::after {*/
+/*    position: absolute;*/
+/*    content: "";*/
+/*    height: 6px;*/
+/*    width: 15%;*/
+/*    max-width: 60px;*/
+/*    bottom: -16px;*/
+/*    background: #116149;*/
+/*    left: 0;*/
+/*}*/

src/components/WeatherConditions/WeatherConditions.js

@@ -99,15 +99,26 @@ const WeatherConditions = props => {
     const prevWeatherId = usePrevious({ weatherId });
 
     useEffect(() => {
+
         if(prevWeatherId && prevWeatherId.weatherId !== weatherId) {
             setTemperature({
-                ...temperature,
+                // ...temperature,
+                points: props.display.temperatureConditions.temperature ?
+                    props.display.temperatureConditions.temperature: 1,
+                feelsLike: feelsLike ? feelsLike: 1,
                 min: minTemperature,
                 max: maxTemperature,
                 measurement: 'celsius'
             });
         }
-    }, [weatherId, temperature, prevWeatherId, minTemperature, maxTemperature]);
+    }, [
+        weatherId,
+        props.display.temperatureConditions.temperature,
+        feelsLike,
+        // temperature,
+        prevWeatherId,
+        minTemperature,
+        maxTemperature]);
 
     return (
         <Card className={classes.card}>

src/containers/Collections/Collections.js

@@ -1,25 +1,26 @@
 import { Fragment, useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
+import { Redirect } from 'react-router-dom';
 
 import axios from '../../axios-weather';
 import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler';
 import { fetchCitiesCollection, deleteCity } from '../../store/actions';
 import Cockpit from '../../components/UI/Cockpit/Cockpit';
 import City from '../../components/City/City';
 import LoadingProgress from '../../components/UI/LoadingProgress/LoadingProgress';
-import { Grid, makeStyles} from '@material-ui/core';
+import { Grid, Typography, makeStyles} from '@material-ui/core';
 
 /**
  * @returns {JSX.Element}
  * @author Stavros Labrinos [stalab at linuxmail.org] on 1/02/21.
  */
 
 const useStyles = makeStyles(theme => ({
-   root: {
+   containerStyle: {
        marginBottom: theme.spacing(2),
        marginTop: theme.spacing(2)
-   }
+   },
 }));
 
 const Collections = () => {
@@ -51,20 +52,32 @@ const Collections = () => {
         dispatch(deleteCity(cityId, token));
     }, [dispatch, token]);
 
+    const authRedirect = !token ?
+        <Redirect to="/" /> : null;
+
     const cities = loading ?
         <LoadingProgress /> :
-        collection.map(city => (
-            <Grid item xs={12} sm={6} md={4} key={city.id}>
-                <City {...city}
-                      showDetails={handleShowDetails}
-                      deleteCity={handleDeleteCity} />
-            </Grid>
-        ));
+        collection.length > 0?
+            collection.map(city => (
+                <Grid item xs={12} sm={6} md={4} key={city.id}>
+                    <City {...city}
+                          showDetails={handleShowDetails}
+                          deleteCity={handleDeleteCity} />
+                </Grid>
+            )) :
+                <Typography
+                    variant="h5"
+                    component="p"
+                    color="textSecondary">
+                    Η συλλογή πόλεων είναι κενή. Μπορείτε να προσθέτε πόλεις στη συλλογή
+                    σας από το μενού «Αναζήτηση»
+                </Typography>;
 
     return (
         <Fragment>
             <Cockpit title="Συλλογές Πόλεων" />
-            <Grid container spacing={2} justify="center" className={classes.root} >
+            {authRedirect}
+            <Grid container spacing={2} justify="center" className={classes.containerStyle} >
                 {cities}
             </Grid>
         </Fragment>

src/containers/CurrentPosition/CurrentPosition.js

@@ -28,22 +28,28 @@ const CurrentPosition = () => {
         dispatch(actions.fetchCity());
     }, [dispatch]);
 
-    const onInitWeatherConditions  = useCallback((city) => {
-        dispatch(actions.fetchConditions(city));
+    const onInitWeatherConditions  = useCallback(() => {
+        dispatch(actions.fetchConditions());
     }, [dispatch]);
 
-
+    //  changed useEffect to handle ip location from backend Steve Labrinos 6/2/21
     useEffect(() => {
        //   get city from IP for new sessions
-       if (!city) {
+       // if (!city) {
            //   get city from public API action
-           onInitCity();
+           // onInitCity();
            //   the api may return null as success response. Checking for city again
-       } else if (!conditionsFetched && city) {
+       // } else if (!conditionsFetched && city) {
            //   get weather condition from backend action
-           onInitWeatherConditions(city.name);
-       }
-    }, [city, onInitCity, onInitWeatherConditions, conditionsFetched]);
+        if (!conditionsFetched) {
+            onInitWeatherConditions();
+        }
+       // }
+    }, [
+        // city,
+        onInitCity,
+        onInitWeatherConditions,
+        conditionsFetched]);
 
 
     const handleDisplayingConditions = day => {
@@ -65,10 +71,11 @@ const CurrentPosition = () => {
             <Typography variant="h5" color="error">
                 <ErrorOutlineIcon style={{ fontSize: 22, paddingRight: 12 }}/>
                 Δεν είναι δυνατή η λήψη της τρέχουσας τοποθεσίας. Προσπαθήστε αργότερα
-            </Typography> : <LoadingProgress /> :
-            null;
+            </Typography> :
+            null : null;
 
     const wConditions = conditionsFetched ?
+        // <p>test</p> :
         <WeatherConditions
             city={city}
             weatherId={displayingConditions.id}