Allow user to update their timezones

Author: santiagolizardo

Diff for: .eslintignore

@@ -1 +1,3 @@
 node_modules
+build
+

Diff for: Makefile

@@ -42,3 +42,8 @@ build:
 		--name reconmap-web-frontend \
 		reconmap-web-frontend build
 
+.PHONY: shell
+shell:
+	docker exec -it reconmap-web-frontend bash
+
+

Diff for: package-lock.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "countries-and-timezones": "^2.3.1",
     "dayjs": "^1.8.34",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",

Diff for: package.json

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconX } from "../../icons";
+
+const CancelButton = ({ onClick, children }) => <button onClick={onClick} type="cancel" className="flex">
+    <IconX styling='mr-2'/>
+    {children || "Cancel"}
+</button>
+
+export default CancelButton

Diff for: src/components/ui/buttons/Cancel.js

@@ -1,9 +1,9 @@
 import React from "react";
-import {  IconPlus } from "../../icons";
+import { IconPlus } from "../../icons";
 
-const CreateButton = ({onClick, children}) => <button onClick={onClick} >
-        <IconPlus styling='mr-2'/>
-        {children || "Create"}
-    </button>
+const CreateButton = ({ onClick, children }) => <button onClick={onClick} >
+    <IconPlus styling='mr-2' />
+    {children || "Create"}
+</button>
 
 export default CreateButton

Diff for: src/components/ui/buttons/Create.js

@@ -2,8 +2,8 @@ import React from "react";
 import { IconX } from "../../icons";
 
 const DeleteButton = (props) => <button onClick={props.onClick} type="delete">
-    <IconX styling='mr-2'/>
-{props.children || "Delete"}
+    <IconX styling='mr-2' />
+    {props.children || "Delete"}
 </button>
 
 export default DeleteButton

Diff for: src/components/ui/buttons/Delete.js

@@ -1,29 +1,49 @@
-import React from 'react'
+import React, { useState } from 'react'
 import useSetTitle from '../../hooks/useSetTitle'
-import { IconSave, IconX } from './../icons'
+import { IconSave } from './../icons'
 import Breadcrumb from '../ui/Breadcrumb'
+import CancelButton from '../ui/buttons/Cancel'
+import { getAllTimezones } from 'countries-and-timezones';
+import secureApiFetch from '../../services/api';
 
-const UserPreferences = ({history}) => {
+const UserPreferences = ({ history }) => {
     useSetTitle('Preferences')
+    const timezones = getAllTimezones();
+    const timezoneKeys = Object.keys(timezones).sort();
+    const [timezone, setTimezone] = useState(null);
+    const user = JSON.parse(localStorage.getItem('user'));
+
+    const handleChange = (e) => {
+        setTimezone(e.target.value);
+    }
+
+    const handleSubmit = () => {
+        secureApiFetch(`/users/${user.id}`, {
+            method: 'PATCH',
+            body: JSON.stringify({ timezone: timezone })
+        })
+            .then(() => {
+                user.timezone = timezone;
+                localStorage.setItem('user', JSON.stringify(user));
+                history.push('/');
+            })
+            .catch(e => console.log(e))
+    }
+
     return (
         <>
-            <Breadcrumb path={history.location.pathname}/>
+            <Breadcrumb path={history.location.pathname} />
             <h1>Preferences</h1>
-            <form onSubmit={e=>e.preventDefault()}>
-                    <label>Language</label>
-                    <select>
-                        <option>English</option>
-                        <option>Spanish</option>
-                    </select>
-
-                    <label>Timezone</label>
-                    <select>
-                        <option>UTC-4</option>
-                        <option>UTC</option>
-                    </select>
+            <form onSubmit={e => e.preventDefault()}>
+                <label>Timezone</label>
+                <select onChange={handleChange} defaultValue={user.timezone}>
+                    {timezoneKeys.map((key) =>
+                        <option value={timezones[key].name}>{timezones[key].name}</option>
+                    )}
+                </select>
 
-                <button className='flex '><IconSave styling='mr-2'/> Save</button>
-                <button className='flex ' type='cancel'><IconX styling='mr-2'/> Cancel</button>
+                <button className='flex ' onClick={handleSubmit}><IconSave styling='mr-2' /> Save</button>
+                <CancelButton onClick={() => { history.push("/") }} />
             </form>
         </>
     )

Diff for: src/components/user/Preferences.js

@@ -20,9 +20,13 @@ const UserProfile = ({ match, history }) => {
                 {user && <UserAvatar email={user.email} size={48}/>}
                 {user ? <div className=' flex flex-col flex-1 ml-5'>
                     <h1>{user.name}</h1>
-                    <article className='text-gray-600'>
-                        User since {user.insert_ts}
-                    </article>
+                    <dl className='text-gray-600'>
+                        <dt>User since</dt>
+                        <dd>{user.insert_ts}</dd>
+
+                        <dt>Timezone</dt>
+                        <dd>{user.timezone}</dd>
+                    </dl>
                     <div className='flex flex-row gap-4 my-2 font-semibold text-sm'>
                         <UserRoleBadge role={user.role} />
                     </div>

Diff for: src/components/user/Profile.js

@@ -35,6 +35,7 @@ class AuthProvider extends Component {
         localStorage.setItem("accessToken", data.access_token);
         localStorage.setItem('isAuth', true);
         localStorage.setItem('user.id', data.id);
+        localStorage.setItem('user', JSON.stringify(data));
         this.setState({ isAuth: true });
         onOk();
       })