Merge branch 'master' of github.com:deendevelopers/team-4-jan-2020

package.json

@@ -9,9 +9,11 @@
     "cash-dom": "6.0.1",
     "fastclick": "^1.0.6",
     "feather-icons": "^4.4.0",
+    "google-maps-react": "2.0.2",
     "linkstate": "^1.1.0",
     "normalize.css": "^7.0.0",
-    "preact": "^8.2.4"
+    "preact": "^8.2.4",
+    "preact-compat": "3.19.0"
   },
   "devDependencies": {
     "@epegzz/sass-vars-loader": "^2.0.2",
@@ -42,7 +44,7 @@
     "image-webpack-loader": "^3.1.0",
     "json-loader": "^0.5.4",
     "mocha": "^3.2.0",
-    "node-sass": "4.11.0",
+    "node-sass": "4.12.0",
     "postcss-loader": "^2.0.6",
     "run-sequence": "^2.2.1",
     "sass-loader": "^6.0.6",

src/app/index.js

@@ -7,6 +7,7 @@ import '../assets/scss/main.scss';
 
 // Initialize the app and fire cordova deviceready event
 
+
 const onDeviceReady = (devicePlatform) => {
     preact.render(<App />, document.getElementById('app'));
 

src/components/Views/Home/index.js

@@ -21,6 +21,10 @@ export default class Home extends BaseViewComponent {
                 id: 'Settings',
                 icon: 'settings'
             },
+            leftBtn: {
+                id: 'Map',
+                icon: 'map'
+            },
             events: [
                 {
                     thumb: 'https://picsum.photos/200?random=1',
@@ -49,16 +53,15 @@ export default class Home extends BaseViewComponent {
 
         Useful.loading('hide');
     }
-
-
     navigateToEventPage() {
         ViewService.open('Event');
     }
 
-    render(props, { id, title, rightBtn, events }) {
+
+    render(props, { id, title, rightBtn, leftBtn, events }) {
         return (
             <div id={id} className="home view view--bars">
-                <Toolbar title={title} rightBtn={rightBtn} />
+                <Toolbar title={title} rightBtn={rightBtn} leftBtn={leftBtn} />
                 <div className="view__container">
                     <div className="home__wrapper px-4">
                         <h1 className="home__title text-center m-0">

src/components/Views/Map/index.js

@@ -0,0 +1,102 @@
+import preact from 'preact';
+import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+import BaseViewComponent from '../../BaseViewComponent';
+import Toolbar from '../../Toolbar';
+import './style.scss';
+
+
+export class MapView extends BaseViewComponent {
+    constructor() {
+        super();
+
+        this.state = {
+            id: 'map',
+            title: 'Map',
+            view: 'Map',
+            backable: true,
+            slidable: false,
+            leftBtn: {
+                id: 'map',
+                icon: 'chevron-left',
+                back: true
+            },
+            longi: -0.074480,
+            lati: 51.518890,
+        };
+    }
+
+
+    // showPosition(position) {
+    //     console.log(position.coords.latitude);
+    //     console.log(position.coords.longitude);
+    //     return { lat: position.coords.latitude, lng: position.coords.longitude };
+    // }
+
+    render(props, { id, title, leftBtn, longi, lati }) {
+
+        return (
+            <div id={id} className="settings back view view--toolbar">
+                <Toolbar title={title} leftBtn={leftBtn} />
+                <div className="view__container">
+                    <Map
+                        google={this.props.google}
+                        zoom={14}
+                        initialCenter={{ lat: lati, lng: longi }}
+                    >
+                        <Marker />
+                        <Marker
+                            onClick={this.onMarkerClick}
+                            title={'Understanding Hadith and Fiqh'}
+                            name={'Event1'}
+                            position={{ lat: 51.515881, lng: -0.070210 }} 
+                            icon={{
+                                url: 'https://mosques.muslimsinbritain.org/js/marker-gen.php?T=&C=Pkstn&W=W&J=',
+                                anchor: new google.maps.Point(32, 32),
+                                scaledSize: new google.maps.Size(32, 32)
+                            }}
+                        />
+                        <Marker
+                            onClick={this.onMarkerClick}
+                            title={'The Fiqh of Salaah and Ibaadah'}
+                            name={'Event2'}
+                            position={{ lat: 51.521091, lng: -0.078460 }} 
+                            icon={{
+                                url: 'https://mosques.muslimsinbritain.org/js/marker-gen.php?T=Arab&C=Arab&W=W&J=',
+                                anchor: new google.maps.Point(32, 32),
+                                scaledSize: new google.maps.Size(32, 32)
+                            }}
+                        />
+                        <Marker
+                            onClick={this.onMarkerClick}
+                            title={'A Deep Dive into Business in Islam'}
+                            name={'Event3'}
+                            position={{ lat: 51.52430, lng: -0.05889 }}
+                            icon={{
+                                url: 'https://mosques.muslimsinbritain.org/js/marker-gen.php?T=Brel&C=Pkstn&W=W&J=',
+                                anchor: new google.maps.Point(32, 32),
+                                scaledSize: new google.maps.Size(32, 32)
+                            }}
+                        />
+                        <Marker
+                            onClick={this.onMarkerClick}
+                            title={'An Islamic event: The event of events'}
+                            name={'Event4'}
+                            position={{lat: 51.50827, lng: -0.07627 }}
+                            icon={{
+                                url: 'https://mosques.muslimsinbritain.org/js/marker-gen.php?T=Salf&C=&W=W&J=',
+                                anchor: new google.maps.Point(32,32),
+                                scaledSize: new google.maps.Size(32,32)
+                            }}
+                        />
+
+                    </Map>
+                    <div className="settings__version">Version 1.0.0 (2020-01-26)</div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default GoogleApiWrapper({
+    apiKey: 'AIzaSyCZmnbzEOrllwXtpPCFWKBIHjBXptSXyZo',
+})(MapView);

src/components/Views/Map/style.scss

@@ -0,0 +1,74 @@
+@import '../../../assets/scss/functions';
+@import '../../../assets/scss/variables';
+
+.settings {
+
+    $parent: &;
+
+    &__list {
+        margin: 0;
+        padding: pxrem(25px);
+        list-style-type: none;
+    }
+
+    &__item {
+        border-bottom: 1px solid $color-gray-300;
+    }
+
+    &__link {
+
+        display: block;
+        padding: pxrem(10px) 0;
+
+        #{$parent}__title,
+        #{$parent}__arrow {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+    }
+
+    &__arrow {
+
+        float: right;
+        margin-right: pxrem(-8px);
+        margin-top: pxrem(3px);
+
+        svg {
+            height: pxrem(26px);
+            width: pxrem(26px);
+        }
+
+    }
+
+    &__title {
+
+        font-size: pxrem(16px);
+
+        span {
+
+            display: inline-block;
+            vertical-align: middle;
+
+            &:first-child {
+
+                margin-right: pxrem(12px);
+
+                svg {
+                    height: pxrem(22px);
+                    width: pxrem(22px);
+                }
+
+            }
+
+        }
+
+    }
+
+    &__version {
+        text-align: center;
+        padding: 0 0 pxrem(50px) 0;
+        color: $color-gray-600;
+    }
+
+}

src/components/Views/index.js

@@ -2,6 +2,7 @@ import Home from './Home';
 import Profile from './Profile';
 import Interests from './Interests';
 import Settings from './Settings';
+import Map from './Map';
 import NoInternet from './NoInternet';
 import Search from './Search';
 import Event from './Event';
@@ -14,6 +15,7 @@ export default {
     Profile,
     Interests,
     Settings,
+    Map,
     Search,
     NoInternet,
     Notifications,

webpack.config.babel.js

@@ -111,5 +111,15 @@ module.exports = {
         new WebPack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
         })
-    ]
+    ],
+    resolve: {
+        alias: {
+            'react': 'preact-compat',
+            'react-dom': 'preact-compat',
+            // Not necessary unless you consume a module using `createClass`
+            'create-react-class': 'preact-compat/lib/create-react-class',
+            // Not necessary unless you consume a module requiring `react-dom-factories`
+            'react-dom-factories': 'preact-compat/lib/react-dom-factories'
+        }
+    }
 };