Added demo for geolocation hook

codegeous · codegeous · commit f786dbb140f4 · 2020-10-21T23:13:48.000+04:00
diff --git a/src/hooks/useGeoLocation.js b/src/hooks/useGeoLocation.js
@@ -19,7 +19,10 @@ const useGeoLocation = () => {
     const onError = (error) => {
         setLocation({
             loaded: true,
-            error,
+            error: {
+                code: error.code,
+                message: error.message,
+            },
         });
     };
 
diff --git a/src/pages/HooksDemo/index.js b/src/pages/HooksDemo/index.js
@@ -6,11 +6,13 @@ import useFullscreenMode from "hooks/useFullscreenMode";
 import ExternalInfo from "components/ExternalInfo";
 import ContactCard from "components/ContactCard";
 import useVisiblityToggler from "hooks/useVisiblityToggler";
+import useGeoLocation from "hooks/useGeoLocation";
 
 const HooksDemo = () => {
     const [name, setName] = useState("");
     const [Prompt, setDirty, setPristine] = useUnsavedChangesWarning();
     const [elementRef, FullscreenIcon] = useFullscreenMode();
+    const location = useGeoLocation();
 
     const [ContactCardComponent, toggleCardVisiblity] = useVisiblityToggler(
         <ContactCard index={1} name="D'coders Tech" phone="+959595959595" />,
@@ -96,6 +98,22 @@ const HooksDemo = () => {
                     </div>
                 </div>
             </div>
+
+            <div class="separator">Hook 3: User Geo Location Hook</div>
+
+            <div className="row d-flex justify-content-center mt-3 mb-5 pb-5">
+                <div className="col-6">
+                    <div class="card">
+                        <div class="card-header text-left font-weight-bold d-flex">
+                            <div className="inline-block mr-auto pt-1">
+                                {location.loaded
+                                    ? JSON.stringify(location)
+                                    : "Location data not available yet."}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </>
     );
 };
diff --git a/src/routes.js b/src/routes.js
@@ -88,7 +88,7 @@ const routes = [
         enabled: true,
         path: "/hooks-demo",
         component: HooksDemo,
-        navbar: "Hooks demo",
+        navbar: "Custom Hooks demo",
         child: null,
     },
     {

Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@ const routes = [`
`88`	`88`	`enabled: true,`
`89`	`89`	`path: "/hooks-demo",`
`90`	`90`	`component: HooksDemo,`
`91`		`- navbar: "Hooks demo",`
	`91`	`+ navbar: "Custom Hooks demo",`
`92`	`92`	`child: null,`
`93`	`93`	`},`
`94`	`94`	`{`