👔 Added Formatting and Linting (#31)

Author: aromalanil

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["prettier","airbnb"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

.npmignore

@@ -1,4 +1,6 @@
 .all-contributorsrc
 .github
 CONTRIBUTING.md
-docs
+docs
+.eslintrc.json
+.prettierrc

.prettierrc

@@ -0,0 +1,14 @@
+{
+ "printWidth": 100,
+ "tabWidth": 2,
+ "singleQuote": true,
+ "trailingComma": "all",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": true,
+ "parser": "flow",
+ "semi": true,
+ "useTabs": false,
+ "quoteProps": "as-needed",
+ "jsxSingleQuote": true,
+ "arrowParens": "always"
+}

hooks/useDarkMode.js

@@ -1,40 +1,40 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react';
+
+/**
+ *
+ * Returns true if globally preferred theme is dark and false if not.
+ * @returns {boolean} Is dark mode globally preferred.
+ */
+const getGlobalPreference = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
 
 /**
  *
  * Returns true if user prefers dark mode and false if not.
  * @returns {boolean} Does user prefers dark mode.
  */
-const _getUserPreferredMode = () => {
-  //If localStorage is available user preference is stored, return the stored value.
+const getUserPreferredMode = () => {
+  // If localStorage is available user preference is stored, return the stored value.
   if (localStorage) {
-    const localPreference = localStorage.getItem("dark-mode");
+    const localPreference = localStorage.getItem('dark-mode');
     if (localPreference) {
-      return JSON.parse(localStorage.getItem("dark-mode"));
+      return JSON.parse(localStorage.getItem('dark-mode'));
     }
+    // Else return the global dark-mode preference.
+    return getGlobalPreference();
   }
-  //Else return the global dark-mode preference.
-  else {
-    return _getGlobalPreference();
-  }
+  // If localStorage does not exist, return the global dark-mode preference.
+  return getGlobalPreference();
 };
 
-/**
- *
- * Returns true if globally preferred theme is dark and false if not.
- * @returns {boolean} Is dark mode globally preferred.
- */
-const _getGlobalPreference = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
-
 /**
  *
  * Custom hook which let's you toggle dark-mode by adding a class to the body.
- * 
+ *
  * @param {string} className Class name which is to be added to body when dark mode.
  * @returns {Array} Array containing a boolean isDarkMode and a darkModeToggle function.
  */
 const useDarkMode = (className) => {
-  const [isDarkMode, setIsDarkMode] = useState(_getUserPreferredMode());
+  const [isDarkMode, setIsDarkMode] = useState(getUserPreferredMode());
 
   useEffect(() => {
     if (isDarkMode) {
@@ -45,7 +45,7 @@ const useDarkMode = (className) => {
   }, [isDarkMode]);
 
   const toggleDarkMode = () => {
-    localStorage.setItem("dark-mode", !isDarkMode);
+    localStorage.setItem('dark-mode', !isDarkMode);
     setIsDarkMode(!isDarkMode);
   };
 

hooks/useDebounce.js

@@ -1,14 +1,14 @@
-import { useCallback } from "react";
+import { useCallback } from 'react';
 
 /**
  * Debounce function generator.
  * @param {function} inputFunction Function which is to be modified.
  * @param {number} delay The time delay in milliseconds.
  * @returns {function} The modified function.
  */
-function _debounce(inputFunction, delay) {
+function debounce(inputFunction, delay) {
   let timeout;
-  return function (...args) {
+  return (...args) => {
     const context = this;
     if (timeout) clearTimeout(timeout);
     timeout = setTimeout(() => {
@@ -26,6 +26,6 @@ function _debounce(inputFunction, delay) {
  * @param {number} delay The time delay in milliseconds.
  * @returns {function} The modified function.
  */
-const useDebounce = (inputFunction, delay) =>  useCallback(_debounce(inputFunction, delay), []);
+const useDebounce = (inputFunction, delay) => useCallback(debounce(inputFunction, delay), []);
 
 export default useDebounce;

hooks/useGeoLocation.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react';
 
 /**
  * @typedef {Object} GeoLocation
@@ -13,7 +13,7 @@ import { useState, useEffect } from "react";
 const useGeoLocation = () => {
   const [geoLocation, setGeoLocation] = useState({});
 
-  //Only called on ComponentDidMount
+  // Only called on ComponentDidMount
   useEffect(() => {
     // Checking if device supports geolocation
     if (navigator.geolocation) {
@@ -28,7 +28,7 @@ const useGeoLocation = () => {
         setGeoLocation(userPosition);
       });
     } else {
-      throw new Error("The browser does not support geolocation");
+      throw new Error('The browser does not support geolocation');
     }
   }, []);
 

hooks/useLocalStorage.js

@@ -1,4 +1,22 @@
-import { useState } from "react";
+import { useState } from 'react';
+
+/**
+ * A function which fetches the value corresponding to the key from localStorage.
+ * If the item doesn't exist returns the input value.
+ *
+ * @param {*} value
+ * @param {string} key Key for the localStorage.
+ * @returns {*} The value fetched from localStorage.
+ */
+const getItem = (value, key) => {
+  try {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : value;
+  } catch (error) {
+    // If something went wrong returns the value itself.
+    return value;
+  }
+};
 
 /**
  * Custom useState hook which saves the state value in localStorage
@@ -8,41 +26,22 @@ import { useState } from "react";
  * @returns {Array} Array containing stateful value and updater function.
  */
 const useLocalStorage = (initialValue, key) => {
-  const [storedValue, setStoredValue] = useState(_getItem(initialValue, key));
+  const [storedValue, setStoredValue] = useState(getItem(initialValue, key));
 
   const setValue = (value) => {
-    if (typeof localStorage !== "undefined") {
-      //If value passed is a function, evaluating the function.
+    if (typeof localStorage !== 'undefined') {
+      // If value passed is a function, evaluating the function.
       const valueToStore = value instanceof Function ? value(storedValue) : value;
 
-      //Setting state and saving the value to localStorage.
+      // Setting state and saving the value to localStorage.
       setStoredValue(valueToStore);
       localStorage.setItem(key, JSON.stringify(valueToStore));
     } else {
-      console.error("localStorage does not exist");
+      throw new Error('localStorage does not exist');
     }
   };
 
   return [storedValue, setValue];
 };
 
-/**
- * A function which fetches the value corresponding to the key from localStorage.
- * If the item doesn't exist returns the input value.
- *
- * @param {*} value
- * @param {string} key Key for the localStorage.
- * @returns {*} The value fetched from localStorage.
- */
-const _getItem = (value, key) => {
-  try {
-    const item = localStorage.getItem(key);
-    return item ? JSON.parse(item) : value;
-  } catch (error) {
-    //If something went wrong returns the value itself.
-    console.error(error);
-    return value;
-  }
-};
-
 export default useLocalStorage;

hooks/useMousePosition.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react';
 
 /**
  * @typedef {Object} MousePosition
@@ -15,7 +15,7 @@ const useMousePosition = () => {
   const [coordinates, setCoordinates] = useState({});
 
   useEffect(() => {
-    //Event listener to track the mouse location.
+    // Event listener to track the mouse location.
     const eventHandler = (e) => {
       const mousePosition = {
         x: e.clientX,
@@ -24,10 +24,10 @@ const useMousePosition = () => {
 
       setCoordinates(mousePosition);
     };
-    window.addEventListener("mousemove", eventHandler);
+    window.addEventListener('mousemove', eventHandler);
 
     return () => {
-      window.removeEventListener("mousemove", eventHandler);
+      window.removeEventListener('mousemove', eventHandler);
     };
   }, []);
 

hooks/useStack.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from 'react';
 
 /**
  * Custom hook for creating and managing Stack.
@@ -28,11 +28,12 @@ const useStack = (initialValue) => {
    */
   const pop = () => {
     if (stack.length > 0) {
-      let newStack = [...stack];
+      const newStack = [...stack];
       const poppedValue = newStack.pop();
       setStack(newStack);
       return poppedValue;
-    } else return undefined;
+    }
+    return undefined;
   };
 
   return [stack, push, pop];

hooks/useToggle.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from 'react';
 
 /**
  *