Skip to content

Commit

Permalink
Optimized Client Side
Browse files Browse the repository at this point in the history
  • Loading branch information
@stanleyowen
stanleyowen committed May 14, 2021
1 parent b1f599c commit bddb70b
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 170 deletions.
80 changes: 40 additions & 40 deletions client/src/components/edit.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import DateFnsUtils from "@date-io/date-fns";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Select, MenuItem, IconButton } from '@material-ui/core';
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import DateFnsUtils from "@date-io/date-fns"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Select, MenuItem, IconButton } from '@material-ui/core'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import axios from 'axios'

import { labels, validateLabel, getCSRFToken } from '../libraries/validation';
import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { labels, validateLabel, getCSRFToken } from '../libraries/validation'
import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
import { faTimes } from '@fortawesome/free-solid-svg-icons'

const SERVER_URL = process.env.REACT_APP_SERVER_URL;
const SERVER_URL = process.env.REACT_APP_SERVER_URL

const Edit = ({ userData }) => {
const {authenticated, isLoading} = userData;
const {authenticated, isLoading} = userData
const [data, setData] = useState({
_id: useParams().id,
title: '',
date: new Date(null),
label: labels[0].toLowerCase(),
description: ''
});
})
const [properties, setProperties] = useState({
honeypot: '',
isLoading: true
});
})

const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
const handleData = (a, b) => setData({ ...data, [a]: b })
Expand All @@ -33,47 +33,47 @@ const Edit = ({ userData }) => {
async function getData() {
await axios.get(`${SERVER_URL}/todo/data`, { params: {id: data._id}, withCredentials: true })
.then(res => {
setData(res.data); handleChange('isLoading', false);
document.getElementById('title').focus();
setData(res.data); handleChange('isLoading', false)
document.getElementById('title').focus()
})
.catch(err => {
if(err.response.status >= 500){
if(err.response.status >= 500) {
setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message)
setTimeout(() => getData(), 5000)
}else {
localStorage.setItem('info', JSON.stringify(err.response.data));
window.location='/';
localStorage.setItem('info', JSON.stringify(err.response.data))
window.location='/'
}
})
}
document.querySelectorAll('[data-autoresize]').forEach((e) => {
e.style.boxSizing = 'border-box';
var offset = e.offsetHeight - e.clientHeight;
e.style.boxSizing = 'border-box'
var offset = e.offsetHeight - e.clientHeight
e.addEventListener('input', (a) => {
a.target.style.height = '-10px';
a.target.style.height = a.target.scrollHeight + offset + 'px';
});
e.removeAttribute('data-autoresize');
});
if(!isLoading && authenticated) getData();
a.target.style.height = '-10px'
a.target.style.height = a.target.scrollHeight + offset + 'px'
})
e.removeAttribute('data-autoresize')
})
if(!isLoading && authenticated) getData()
}, [userData, data.id])

const updateData = (e) => {
e.preventDefault();
const btn = document.getElementById('update-todo');
e.preventDefault()
const btn = document.getElementById('update-todo')
async function submitData() {
btn.innerHTML = "Updating..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled");
btn.innerHTML = "Updating..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
await axios.put(`${SERVER_URL}/todo/data`, data, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
.then(res => { localStorage.setItem('info', JSON.stringify(res.data)); window.location='/'; })
.catch(err => setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message));
btn.innerHTML = "Update"; btn.removeAttribute("disabled"); btn.classList.remove("disabled");
.then(res => { localStorage.setItem('info', JSON.stringify(res.data)); window.location='/' })
.catch(err => setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message))
btn.innerHTML = "Update"; btn.removeAttribute("disabled"); btn.classList.remove("disabled")
}
if(properties.honeypot) return;
else if(!data.title || !data.date || !data.label){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Make Sure to Fill Out All the Required Fields !"); document.getElementById(!data.title ? 'title' : !data.date ? 'date' : 'label').focus(); }
else if(data.title.length > 60){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Provide a Title less than 60 characters !"); document.getElementById('title').focus(); }
else if(validateLabel(data.label)){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Provide a Valid Label !"); document.getElementById('label').focus(); }
else if(data.description && data.description.length > 200){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Provide a Description Less than 200 characters !"); document.getElementById('description').focus(); }
else submitData();
if(properties.honeypot) return
else if(!data.title || !data.date || !data.label){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Make Sure to Fill Out All the Required Fields !"); document.getElementById(!data.title ? 'title' : !data.date ? 'date' : 'label').focus() }
else if(data.title.length > 60){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Provide a Title less than 60 characters !"); document.getElementById('title').focus() }
else if(validateLabel(data.label)){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Provide a Valid Label !"); document.getElementById('label').focus() }
else if(data.description && data.description.length > 200){ setNotification(NOTIFICATION_TYPES.DANGER, "Please Provide a Description Less than 200 characters !"); document.getElementById('description').focus() }
else submitData()
}

return (
Expand Down Expand Up @@ -143,4 +143,4 @@ const Edit = ({ userData }) => {
)
}

export default Edit;
export default Edit
34 changes: 17 additions & 17 deletions client/src/components/forgot-password.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import React, { useState } from 'react';
import axios from 'axios';
import React, { useState } from 'react'
import axios from 'axios'

import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
import { getCSRFToken } from '../libraries/validation';
import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
import { getCSRFToken } from '../libraries/validation'

const SERVER_URL = process.env.REACT_APP_SERVER_URL;
const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const SERVER_URL = process.env.REACT_APP_SERVER_URL
const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

const ResetPassword = ({ userData }) => {
const [email, setEmail] = useState(userData.email ? userData.email : '');
const [email, setEmail] = useState(userData.email ? userData.email : '')
const [properties, setProperties] = useState({
honeypot: '',
success: false
});
})

const handleChange = (a, b) => setProperties({ ...properties, [a]: b })

const Submit = (e) => {
e.preventDefault();
const btn = document.getElementById('reset-password');
e.preventDefault()
const btn = document.getElementById('reset-password')
async function submitData(){
btn.innerHTML = "Sending..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled");
btn.innerHTML = "Sending..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
await axios.post(`${SERVER_URL}/account/forgot-password`, {email}, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
.then(res => {
handleChange('success', true)
Expand All @@ -29,13 +29,13 @@ const ResetPassword = ({ userData }) => {
.catch(err => {
setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message)
document.getElementById('userEmail').focus()
});
btn.innerHTML = "Send"; btn.removeAttribute("disabled"); btn.classList.remove("disabled");
})
btn.innerHTML = "Send"; btn.removeAttribute("disabled"); btn.classList.remove("disabled")
}
if(properties.honeypot) return;
if(properties.honeypot) return
else if(!email) setNotification(NOTIFICATION_TYPES.DANGER, 'Please Make Sure to Fill Out All the Required Fields !')
else if(EMAIL_VAL.test(String(email).toLocaleLowerCase()) === false){ setNotification(NOTIFICATION_TYPES.DANGER, 'Please Provide a Valid Email Address !'); document.getElementById('userEmail').focus(); }
else submitData();
else if(EMAIL_VAL.test(String(email).toLocaleLowerCase()) === false){ setNotification(NOTIFICATION_TYPES.DANGER, 'Please Provide a Valid Email Address !'); document.getElementById('userEmail').focus() }
else submitData()
}

return(
Expand Down Expand Up @@ -70,4 +70,4 @@ const ResetPassword = ({ userData }) => {
)
}

export default ResetPassword;
export default ResetPassword
Loading

0 comments on commit bddb70b

Please sign in to comment.