├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
└── vercel.svg
├── src
├── AppProvider.js
├── components
│ ├── Header.js
│ └── LocationCoords.js
├── pages
│ ├── _app.js
│ ├── _document.js
│ ├── index.js
│ └── location.js
└── theme.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "@chakra-ui/react": "^1.6.3",
12 | "@emotion/react": "^11",
13 | "@emotion/styled": "^11",
14 | "framer-motion": "^4",
15 | "next": "10.2.3",
16 | "react": "^17.0.2",
17 | "react-dom": "^17.0.2",
18 | "socket.io-client": "^4.1.2"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harshmangalam/live-location-tracker-nextjs-client/a58d0eacf9c41615b930dcc142c20740177042e6/public/favicon.ico
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/AppProvider.js:
--------------------------------------------------------------------------------
1 | import { useToast } from "@chakra-ui/toast";
2 | import React, {
3 | createContext,
4 | useContext,
5 | useEffect,
6 | useRef,
7 | useState,
8 | } from "react";
9 | import io from "socket.io-client";
10 | import { useRouter } from "next/router";
11 | const ENDPOINT = "https://locatepeer.herokuapp.com/";
12 | const Context = createContext();
13 |
14 | function AppProvider({ children }) {
15 | const socketRef = useRef();
16 | const watchLocation = useRef();
17 |
18 | const [users, setUsers] = useState([]);
19 | const [currentUser, setCurrentUser] = useState();
20 | const [hasAccessLocation, setHasAccessLocation] = useState(false);
21 |
22 | const router = useRouter();
23 |
24 | const toast = useToast();
25 |
26 | const connectSocket = () => {
27 | socketRef.current = io(ENDPOINT);
28 | };
29 |
30 | const disconnectSocket = () => {
31 | if (socketRef.current) {
32 | socketRef.current.emit("disconnect");
33 | }
34 | };
35 |
36 | useEffect(() => {
37 | connectSocket();
38 |
39 | if (socketRef.current) {
40 | socketRef.current.on("new-user", (data) => {
41 | setUsers((users) => [...users, data]);
42 | });
43 |
44 | socketRef.current.on("users", (data) => {
45 | setUsers(data);
46 | });
47 |
48 | socketRef.current.on("current-user", (data) => {
49 | setCurrentUser(data);
50 | });
51 |
52 | socketRef.current.on("position-change", (data) => {
53 | let users = users.map((user) => {
54 | if (user.socketId === data.soketId) {
55 | return data;
56 | }
57 | return user;
58 | });
59 | });
60 | }
61 |
62 | if (hasAccessLocation) {
63 | watchLocation.current = navigator.geolocation.watchPosition(
64 | positionChange,
65 | locationResolveError
66 | );
67 | }
68 |
69 | return () => {
70 | navigator.geolocation.clearWatch(watchLocation.current);
71 | disconnectSocket();
72 | };
73 | }, []);
74 |
75 | function positionChange(data) {
76 | const latitude = data.coords.latitude;
77 | const longitude = data.coords.longitude;
78 | socketRef.current.emit("position-change", {
79 | socketId: currentUser.socketId,
80 | coords: {
81 | latitude,
82 | longitude,
83 | },
84 | });
85 | }
86 |
87 | function initUserLocation() {
88 | if (!navigator.geolocation) {
89 | toast({
90 | title: "Geolocation Unsupported",
91 | description: "Your system does not support Geolocation",
92 | status: "error",
93 | duration: 4000,
94 | isClosable: true,
95 | });
96 |
97 | return;
98 | }
99 | navigator.geolocation.getCurrentPosition(
100 | locationResolveSuccessfully,
101 | locationResolveError
102 | );
103 | }
104 |
105 | function locationResolveSuccessfully(data) {
106 | setHasAccessLocation(true);
107 | const latitude = data.coords.latitude;
108 | const longitude = data.coords.longitude;
109 | socketRef.current.emit("join", {
110 | latitude,
111 | longitude,
112 | });
113 | toast({
114 | title: "Location",
115 | description: "Location fetched successfully",
116 | status: "success",
117 | duration: 4000,
118 | isClosable: true,
119 | });
120 | router.push("/location");
121 | }
122 |
123 | function locationResolveError(error) {
124 | let errorType = "";
125 | if (error.code === 1) {
126 | errorType = "Permission Denied";
127 | } else if (error.code === 2) {
128 | errorType = "Position Unavailable";
129 | } else if (error.cde === 3) {
130 | errorType = "Timeout";
131 | }
132 |
133 | toast({
134 | title: errorType,
135 | description: error.message,
136 | status: "error",
137 | duration: 4000,
138 | isClosable: true,
139 | });
140 | }
141 |
142 | return (
143 |
150 | {children}
151 |
152 | );
153 | }
154 |
155 | export const useApp = () => useContext(Context);
156 |
157 | export default AppProvider;
158 |
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Button,
4 | Heading,
5 | HStack,
6 | Switch,
7 | useColorMode,
8 | } from "@chakra-ui/react";
9 |
10 | function Header() {
11 | const { colorMode, toggleColorMode } = useColorMode();
12 | return (
13 |
14 | Locate Peers
15 |
16 |
21 |
31 |
32 |
33 | );
34 | }
35 |
36 | export default Header;
37 |
--------------------------------------------------------------------------------
/src/components/LocationCoords.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Avatar,
4 | Heading,
5 | HStack,
6 | Stat,
7 | StatArrow,
8 | StatGroup,
9 | StatHelpText,
10 | StatLabel,
11 | StatNumber,
12 | VStack,
13 | } from "@chakra-ui/react";
14 | function LocationCoords({ coords, text, isCurrentUser }) {
15 | return (
16 |
17 |
18 |
19 |
20 | {isCurrentUser ? "You" : text}
21 |
22 |
23 |
24 | Latitude
25 | {coords?.latitude}
26 |
27 |
28 |
29 |
30 |
31 |
32 | Longitude
33 | {coords?.longitude}
34 |
35 |
36 |
37 |
38 |
39 |
40 | );
41 | }
42 |
43 | export default LocationCoords;
44 |
--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
1 | import { Box, ChakraProvider, Container, VStack } from "@chakra-ui/react";
2 | import AppProvider from "../AppProvider";
3 | import Header from "../components/Header"
4 | import theme from "../theme"
5 | function MyApp({ Component, pageProps }) {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | export default MyApp;
20 |
--------------------------------------------------------------------------------
/src/pages/_document.js:
--------------------------------------------------------------------------------
1 | // pages/_document.js
2 | import { ColorModeScript } from "@chakra-ui/react"
3 | import NextDocument, { Html, Head, Main, NextScript } from "next/document"
4 | import theme from "../theme"
5 | export default class Document extends NextDocument {
6 | render() {
7 | return (
8 |
9 |
10 |