Dark Mode implementation

2026-03-10 21:25:04 +00:00 · 2019-12-05 13:38:06 -05:00
10 changed files with 312 additions and 776 deletions
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -46,10 +46,8 @@ exports.getallPostsforUser = (req, res) => {
      myPosts.forEach(function(doc) {
        posts.push(doc.data());
      });
-      posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
      return res.status(200).json(posts);
    })
-    
    .then(function() {
      return res
        .status(200)
@@ -58,7 +56,7 @@ exports.getallPostsforUser = (req, res) => {
    .catch(function(err) {
      return res
        .status(500)
-        .json({message: "Failed to retrieve user's posts from database.", error: err});
+        .json("Failed to retrieve user's posts from database.", err);
    });
 };

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,428 +1,3 @@
 {
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
-      }
-    },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
-    },
-    "axios": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
-      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
-      "requires": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
-      }
-    },
-    "body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-      "requires": {
-        "bytes": "3.1.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
-      }
-    },
-    "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
-    },
-    "content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-    },
-    "cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
-    },
-    "cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "requires": {
-        "object-assign": "^4",
-        "vary": "^1"
-      }
-    },
-    "debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "requires": {
-        "ms": "2.0.0"
-      }
-    },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-    },
-    "eslint-plugin-promise": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz",
-      "integrity": "sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw=="
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-    },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      }
-    },
-    "finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
-      }
-    },
-    "follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-      "requires": {
-        "debug": "=3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-    },
-    "http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-      "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-    },
-    "ipaddr.js": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
-      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
-    },
-    "is-buffer": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-      "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
-    },
-    "jwt-decode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
-      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
-    },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
-    },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-    },
-    "mime-db": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
-    },
-    "mime-types": {
-      "version": "2.1.24",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
-      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
-      "requires": {
-        "mime-db": "1.40.0"
-      }
-    },
-    "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
-    "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-    },
-    "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
-    },
-    "proxy-addr": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
-      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
-      "requires": {
-        "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.0"
-      }
-    },
-    "qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-    },
-    "raw-body": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-      "requires": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
-        "mime": "1.6.0",
-        "ms": "2.1.1",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-      "requires": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.17.1"
-      }
-    },
-    "setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
-    },
-    "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
-    },
-    "toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
-    }
-  }
+  "lockfileVersion": 1
 }
--- a/twistter-frontend/package-lock.json
+++ b/twistter-frontend/package-lock.json
@@ -3092,6 +3092,11 @@
        "merge": "^1.2.0"
      }
    },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
    "exit-hook": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
@@ -3957,6 +3962,11 @@
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
    },
+    "fuse.js": {
+      "version": "3.4.6",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.4.6.tgz",
+      "integrity": "sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg=="
+    },
    "gauge": {
      "version": "2.7.4",
      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -7167,6 +7177,22 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
      "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.1.tgz",
+      "integrity": "sha512-8uN744Yq0X2lbfSLxsEEc2UV3RjSRb4yDVxRQ1aGzPo86QjNOwhQSukDb8U8kR+636TRTvfMren10fgOjAy9eA==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "react-redux": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.1.tgz",
@@ -9991,6 +10017,14 @@
        "makeerror": "1.0.x"
      }
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "watch": {
      "version": "0.10.0",
      "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
--- a/twistter-frontend/public/global.js
+++ b/twistter-frontend/public/global.js
@@ -0,0 +1,20 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyles = createGlobalStyle`
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    align-items: center;
+    background: ${({ theme }) => theme.body};
+    color: ${({ theme }) => theme.text};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+  }
--- a/twistter-frontend/public/theme.js
+++ b/twistter-frontend/public/theme.js
@@ -0,0 +1,14 @@
+export const lightTheme = {
+    body: '#E2E2E2',
+    text: '#363537',
+    toggleBorder: '#FFF',
+    gradient: 'linear-gradient(#39598A, #79D7ED)',
+  }
+  
+  export const darkTheme = {
+    body: '#363537',
+    text: '#FAFAFA',
+    toggleBorder: '#6B8096',
+    gradient: 'linear-gradient(#091236, #1E215D)',
+  }
+  
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -8,7 +8,6 @@ import TextField from '@material-ui/core/TextField';
 // import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import withStyles from "@material-ui/styles/withStyles";
-import CircularProgress from "@material-ui/core/CircularProgress";

 const styles = {
  container: {
@@ -22,13 +21,6 @@ const styles = {
  },
  textField: {
    marginBottom: 15
-  },
-  progress: {
-    position: "absolute"
-  },
-  button: {
-    positon: "relative",
-    marginBottom: 30
  }
 }

@@ -39,8 +31,7 @@ class Writing_Microblogs extends Component {
      value: "",
      title: "",
      topics: "",
-      characterCount: 250,
-      loading: false
+      characterCount: 250
    };

    this.handleChange = this.handleChange.bind(this);
@@ -65,15 +56,11 @@ class Writing_Microblogs extends Component {
      microBlogTitle: this.state.title,
      microBlogTopics: this.state.topics.split(", ")
    };
-
-    this.setState({
-      loading: true
-    })
    const headers = {
      headers: { "Content-Type": "application/json" }
    };

-    let postPromise = axios
+    axios
      .post("/putPost", postData, headers) // TODO: add topics
      .then(res => {
        // alert("Post was shared successfully!");
@@ -84,9 +71,8 @@ class Writing_Microblogs extends Component {
        console.error(err);
      });
    console.log(postData.microBlogTopics);
-    let topicPromises = [];
    postData.microBlogTopics.forEach(topic => {
-      topicPromises.push(axios
+      axios
        .post("/putTopic", {
          following: topic
        })
@@ -95,24 +81,10 @@ class Writing_Microblogs extends Component {
        })
        .catch(err => {
          console.error(err);
-        })
-      )
+        });
    });
    event.preventDefault();
-    topicPromises.push(postPromise);
-    Promise.all(topicPromises)
-      .then(() => {
-        this.setState({ 
-          value: "", 
-          title: "", 
-          characterCount: 250, 
-          topics: "",
-          loading: false
-        });
-      })
-      .catch((error) => {
-        console.log(error);
-      })
+    this.setState({ value: "", title: "", characterCount: 250, topics: "" });
  }

  handleChangeforPost(event) {
@@ -177,14 +149,12 @@ class Writing_Microblogs extends Component {
            autoComplete='off'
          />
          <Button
-            className={classes.button}
            onClick={this.handleSubmit}
-            disabled={this.state.loading}
+            // disabled={loading}
            variant="outlined"
            color="primary"
            >
              Share Post
-            {this.state.loading && <CircularProgress size={30} className={classes.progress} />}
          </Button>
        </form>
      </div>
--- a/twistter-frontend/src/components/toggle/toggle.js
+++ b/twistter-frontend/src/components/toggle/toggle.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { func, string } from 'prop-types';
+import styled from 'styled-components';
+// Import a couple of SVG files we'll use in the design: https://www.flaticon.com
+import { ReactComponent as MoonIcon } from 'icons/moon.svg';
+import { ReactComponent as SunIcon } from 'icons/sun.svg';
+
+const Toggle = ({ theme, toggleTheme }) => {
+  const isLight = theme === 'light';
+  return (
+    <button onClick={toggleTheme} >
+      <SunIcon />
+      <MoonIcon />
+    </button>
+  );
+};
+
+Toggle.propTypes = {
+  theme: string.isRequired,
+  toggleTheme: func.isRequired,
+}
+
+export default Toggle;
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -6,53 +6,41 @@ import axios from "axios";

 // Material UI and React Router

-import CircularProgress from "@material-ui/core/CircularProgress";
-import Button from "@material-ui/core/Button";
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
 import Grid from "@material-ui/core/Grid";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import TextField from "@material-ui/core/TextField";
+import TextField from '@material-ui/core/TextField';

 import Typography from "@material-ui/core/Typography";
-import withStyles from "@material-ui/styles/withStyles";
+import withStyles from '@material-ui/styles/withStyles';

 // component
-import "../App.css";
-import logo from "../images/twistter-logo.png";
-import noImage from "../images/no-img.png";
-import Writing_Microblogs from "../Writing_Microblogs";
-import ReactModal from "react-modal";
+import '../App.css';
+import logo from '../images/twistter-logo.png';
+import noImage from '../images/no-img.png';
+import Writing_Microblogs from '../Writing_Microblogs';
+import ReactModal from 'react-modal';

 // Redux
-import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
+import { likePost, unlikePost, getLikes } from '../redux/actions/userActions';
+

 const styles = {
  card: {
    marginBottom: 5
  }
-};
+}

 class Home extends Component {
  state = {
-    likes: [],
-    loading: false,
-    following: null,
-    topics: null
+    likes: []
  };

-  componentDidMount() {
-    this.setState({loading: true});
-    let userPromise = axios
-      .get("/user")
-      .then(res => {
-        this.setState({
-          following: res.data.credentials.following,
-          topics: res.data.credentials.followedTopics
-        });
-      })
-      .catch(err => console.log(err));

-    let postPromise = axios
+  componentDidMount() {
+    axios
      .get("/getallPosts")
      .then(res => {
        // console.log(res.data);
@@ -62,45 +50,34 @@ class Home extends Component {
      })
      .catch(err => console.log(err));

-      Promise.all([userPromise, postPromise])
-        .then(() => {
-          this.setState({
-            loading: false
-          })
-        })
-        .catch((error) => {
-          console.log(error);
-        })
-
    this.props.getLikes();
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      likes: nextProps.user.likes
-    });
+    })
  }

-  handleClickLikeButton = event => {
-    // Need the ternary if statement because the user can click on the text or body of the
+  handleClickLikeButton = (event) => {
+    // Need the ternary if statement because the user can click on the text or body of the 
    // Button and they are two different html elements
-    let postId = event.target.dataset.key
-      ? event.target.dataset.key
-      : event.target.parentNode.dataset.key;
-    console.log(postId);
+    let postId = event.target.dataset.key ? event.target.dataset.key : event.target.parentNode.dataset.key;
+    console.log(postId)

    let doc = document.getElementById(postId);
    // console.log(postId);
    if (this.state.likes.includes(postId)) {
-      this.props.unlikePost(postId, this.state.likes);
+      this.props.unlikePost(postId, this.state.likes)
      doc.dataset.likes--;
-    } else {
-      this.props.likePost(postId, this.state.likes);
+    } else { 
+      this.props.likePost(postId, this.state.likes)
      doc.dataset.likes++;
    }

    doc.innerHTML = "Likes " + doc.dataset.likes;
-  };
+
+  }

  formatDate(dateString) {
    let newDate = new Date(Date.parse(dateString));
@@ -108,80 +85,53 @@ class Home extends Component {
  }

  render() {
-    const {
-      UI: { loading }
-    } = this.props;
+
+    const { UI:{ loading } } = this.props;
    let authenticated = this.props.user.authenticated;
-    let { classes } = this.props;
+    let {classes} = this.props;
    let username = this.props.user.credentials.handle;
-    console.log(this.state.following);

    let postMarkup = this.state.posts ? (
-      this.state.posts.map(post =>
-        this.state.following ? (
-          this.state.following.includes(post.userHandle) ? (
-            <Card className={classes.card} key={post.postId}>
-              <CardContent>
-                <Typography>
-                  {/* {
+      this.state.posts.map(post => 
+        <Card className={classes.card} key={post.postId}>
+          <CardContent>
+            <Typography>
+              {/* {
                this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                      (<img src={noImage} height="50" width="50"/>)
              } */}
-                  {post.profileImage ? (
-                    <img src={post.profileImage} height="50" width="50" />
-                  ) : (
-                    <img src={noImage} height="50" width="50" />
-                  )}
-                </Typography>
-                <Typography variant="h5">
-                  <b>{post.userHandle}</b>
-                </Typography>
-                <Typography variant="body2" color={"textSecondary"}>
-                  {this.formatDate(post.createdAt)}
-                </Typography>
-                <br />
-                <Typography variant="body1">
-                  <b>{post.microBlogTitle}</b>
-                </Typography>
-                <Typography variant="body2">{post.quoteBody}</Typography>
-                <br />
-                <Typography variant="body2">{post.body}</Typography>
-                <br />
-                <Typography variant="body2">
-                  <b>Topics:</b> {post.microBlogTopics}
-                </Typography>
-                <br />
-                <Typography
-                  id={post.postId}
-                  data-likes={post.likeCount}
-                  variant="body2"
-                  color={"textSecondary"}
-                >
-                  Likes {post.likeCount}
-                </Typography>
-                {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
-                <Button
-                  onClick={this.handleClickLikeButton}
-                  data-key={post.postId}
-                  disabled={loading}
-                  variant="outlined"
-                  color="primary"
-                >
-                  {this.state.likes && this.state.likes.includes(post.postId)
-                    ? "Unlike"
-                    : "Like"}
-                </Button>
-                <Quote microblog={post.postId}></Quote>
+              {
+                post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
+                                    (<img src={noImage} height="50" width="50"/>)
+              }
+            </Typography>
+            <Typography variant="h5"><b>{post.userHandle}</b></Typography>
+            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
+            <br />
+            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
+            <Typography variant="body2">{post.quoteBody}</Typography>
+            <br />
+            <Typography variant="body2">{post.body}</Typography>
+            <br />
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
+            <br />
+            <Typography id={post.postId} data-likes={post.likeCount} variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+            {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
+            <Button
+              onClick={this.handleClickLikeButton}
+              data-key={post.postId}
+              disabled={loading}
+              variant="outlined"
+              color="primary"
+            >{
+              this.state.likes && this.state.likes.includes(post.postId) ? 'Unlike' : 'Like'
+              }</Button>
+            <Quote microblog = {post.postId}></Quote> 

-                {/* <button>Quote</button> */}
-              </CardContent>
-            </Card>
-          ) : (
-            <p></p>
-          )
-        ) : (
-          <p>Loading</p>
-        )
+            {/* <button>Quote</button> */}
+
+          </CardContent>
+        </Card>
      )
    ) : (
      <p>Loading post...</p>
@@ -189,7 +139,6 @@ class Home extends Component {

    return (
      authenticated ? (
-        this.state.loading ? (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>) :
      <Grid container>
        <Grid item sm={4} xs={8}>
          <Writing_Microblogs />
@@ -198,7 +147,7 @@ class Home extends Component {
          {postMarkup}
        </Grid>
      </Grid> 
-     ) : loading ?
+     ) : loading ? 
          (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
        :
          (
@@ -211,26 +160,21 @@ class Home extends Component {
                <b>See the most interesting topics people are following right now.</b> 
              </div>

-              <br />
-              <br />
-              <br />
-              <br />
+              <br/><br/><br/><br/>

-              <div>
-                <b>Join today or sign in if you already have an account.</b>
-                <br />
-                <br />
+              <div>                    
+                <b>Join today or sign in if you already have an account.</b> 
+                <br/><br/>
                <form action="./signup">
-                  <button className="authButtons signup">Sign up</button>
+                  <button className="authButtons signup">Sign up</button> 
                </form>
-                <br />
+                <br/>
                <form action="./login">
                  <button className="authButtons login">Sign in</button>
                </form>
              </div>
            </div>
-          )
-    );
+    ));
  }
 }

@@ -241,36 +185,38 @@ class Quote extends Component {
      characterCount: 250,
      showModal: false,
      value: ""
-    };
+    }

-    this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
-    this.handleOpenModal = this.handleOpenModal.bind(this);
-    this.handleCloseModal = this.handleCloseModal.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
+  this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
+  this.handleOpenModal = this.handleOpenModal.bind(this);
+  this.handleCloseModal = this.handleCloseModal.bind(this);
+  this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmitWithoutPost(event) {
    const post = {
-      userImage: "bing-url"
-    };
+      
+      userImage: "bing-url",
+    }
    const headers = {
      headers: { "Content-Type": "application/json" }
    };
-    axios
-      .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
-      .then(res => {
-        console.log(res.data);
-      })
-      .catch(err => {
-        console.error(err);
-      });
+    axios.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
+    .then((res) => {
+      
+      console.log(res.data);
+    })
+    .catch(err => {
+    
+      console.error(err);
+    });
    event.preventDefault();
  }

  handleOpenModal() {
    this.setState({ showModal: true });
  }
-
+  
  handleCloseModal() {
    this.setState({ showModal: false, characterCount: 250, value: "" });
  }
@@ -288,19 +234,20 @@ class Quote extends Component {
  handleSubmit(event) {
    const quotedPost = {
      quoteBody: this.state.value,
-      userImage: "bing-url"
+      userImage: "bing-url",
    };
    const headers = {
      headers: { "Content-Type": "application/json" }
    };
-    axios
-      .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
-      .then(res => {
-        console.log(res.data);
-      })
-      .catch(err => {
-        console.error(err);
-      });
+    axios.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
+    .then((res) => {
+      
+      console.log(res.data);
+    })
+    .catch(err => {
+    
+      console.error(err);
+    });
    event.preventDefault();
    this.setState({ showModal: false, characterCount: 250, value: "" });
  }
@@ -308,29 +255,14 @@ class Quote extends Component {
  render() {
    return (
      <div>
-        <Button
-          variant="outlined"
-          color="primary"
-          onClick={this.handleOpenModal}
-        >
-          Quote with Post
-        </Button>
-        <ReactModal
-          isOpen={this.state.showModal}
-          style={{
-            content: {
-              height: "50%",
-              width: "25%",
-              marginTop: "auto",
-              marginLeft: "auto",
-              marginRight: "auto",
-              marginBottom: "auto"
-            }
-          }}
+        <Button variant="outlined" color="primary" onClick={this.handleOpenModal}>Quote with Post</Button>
+        <ReactModal 
+           isOpen={this.state.showModal}
+           style={{content: {height: "50%", width: "25%", marginTop: "auto", marginLeft: "auto", marginRight: "auto", marginBottom : "auto"}}}
        >
          <div style={{ width: "200px", marginLeft: "50px" }}>
-            <form style={{ width: "350px" }}>
-              {/* <textarea
+          <form style={{ width: "350px"}}>
+            {/* <textarea
              value={this.state.value}
              required
              maxLength="250"
@@ -343,109 +275,101 @@ class Quote extends Component {
              cols={40}
              rows={20}
            /> */}
-              <TextField
-                style={{ width: 300 }}
-                value={this.state.value}
-                label="Write Quoted Post here..."
-                required
-                multiline
-                color="primary"
-                rows="14"
-                variant="outlined"
-                inputProps={{
-                  maxLength: 250
-                }}
-                onChange={e => {
-                  this.handleChangeforPost(e);
-                  this.handleChangeforCharacterCount(e);
-                }}
-                autoComplete="off"
-              ></TextField>
+            <TextField
+              style={{width: 300}}
+              value={this.state.value}
+              label="Write Quoted Post here..."
+              required
+              multiline
+              color="primary"
+              rows="14"
+              variant="outlined"
+              inputProps={{
+                maxLength: 250
+              }}
+              onChange={e => {
+                this.handleChangeforPost(e);
+                this.handleChangeforCharacterCount(e);
+              }}
+              autoComplete='off'
+            ></TextField>
+            
+            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+              <p2>Characters Left: {this.state.characterCount}</p2>
+            </div>
+              <Button variant="outlined" color="primary" onClick={this.handleSubmit}>Share Quoted Post</Button>
+        
+          <Button variant="outlined" color="primary" onClick={this.handleCloseModal}>Cancel</Button>

-              <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-                <p2>Characters Left: {this.state.characterCount}</p2>
-              </div>
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={this.handleSubmit}
-              >
-                Share Quoted Post
-              </Button>
-
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={this.handleCloseModal}
-              >
-                Cancel
-              </Button>
-            </form>
-          </div>
+          </form>
+        </div>
+          
+          
        </ReactModal>
-        <Button
-          variant="outlined"
-          color="primary"
-          onClick={this.handleSubmitWithoutPost}
-        >
-          Quote without Post
-        </Button>
+        <Button variant="outlined" color="primary" onClick={this.handleSubmitWithoutPost}>Quote without Post</Button>
+
      </div>
-    );
+    )
  }
 }

 class Like extends Component {
+
  constructor(props) {
-    super(props);
+    super(props)
    this.state = {
-      num: this.props.count
-    };
+         num : this.props.count,
+
+    }

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    this.setState({
-      like:
-        localStorage.getItem(this.props.microBlog + this.props.name) === "false"
-    });
+      like: localStorage.getItem(this.props.microBlog + this.props.name) === "false"
+
+    })
+
  }

-  handleClick() {
+
+  
+  handleClick(){
+
    this.setState({
      like: !this.state.like
-    });
-    localStorage.setItem(
-      this.props.microBlog + this.props.name,
-      this.state.like.toString()
-    );
+    }); 
+    localStorage.setItem(this.props.microBlog + this.props.name, this.state.like.toString())

-    if (this.state.like == false) {
-      this.setState(() => {
-        return { num: this.state.num + 1 };
-      });
-      axios
-        .get(`/like/${this.props.microBlog}`)
-        .then(res => {
-          console.log(res.data);
-        })
-        .catch(err => {
-          console.log(err);
-        });
-    } else {
-      this.setState(() => {
-        return { num: this.state.num - 1 };
-      });
-      axios
-        .get(`/unlike/${this.props.microBlog}`)
-        .then(res => {
-          console.log(res.data);
-        })
-        .catch(err => {
-          console.log(err);
-        });
-    }
+    if(this.state.like == false)
+          {
+            this.setState(() => {
+              return {num: this.state.num + 1}
+           });
+            axios.get(`/like/${this.props.microBlog}`)
+            .then((res) => {
+                console.log(res.data);
+            })
+            .catch((err) => {
+              console.log(err);
+            })
+          }
+          else
+          {
+            this.setState(() => {
+              return {num: this.state.num - 1}
+           });
+          axios.get(`/unlike/${this.props.microBlog}`)
+                .then((res) => {
+                    console.log(res.data);
+                })
+                .catch((err) => {
+                  console.log(err);
+                })
+            }
+            
+            
  }

  /* componentDidMount() {
@@ -466,30 +390,33 @@ class Like extends Component {
      })
    }
  }  */
+  
+    render() {
+      
+      const label = this.state.like ? 'Unlike' : 'Like'
+      return(
+        
+
+        <div>
+          <Typography variant="body2" color={"textSecondary"}>Likes {this.state.num}</Typography>
+          <button onClick={this.handleClick}>{label}</button>
+        </div>
+      )
+    }

-  render() {
-    const label = this.state.like ? "Unlike" : "Like";
-    return (
-      <div>
-        <Typography variant="body2" color={"textSecondary"}>
-          Likes {this.state.num}
-        </Typography>
-        <button onClick={this.handleClick}>{label}</button>
-      </div>
-    );
-  }
 }

-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
  user: state.user,
  UI: state.UI
-});
+})
+

 const mapActionsToProps = {
  likePost,
  unlikePost,
  getLikes
-};
+}

 Home.propTypes = {
  user: PropTypes.object.isRequired,
@@ -498,17 +425,16 @@ Home.propTypes = {
  getLikes: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired,
  UI: PropTypes.object.isRequired
-};
+}

 Like.propTypes = {
  user: PropTypes.object.isRequired
-};
+}

 Quote.propTypes = {
  user: PropTypes.object.isRequired
-};
+}
+
+
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Home, Like, Quote));

-export default connect(
-  mapStateToProps,
-  mapActionsToProps
-)(withStyles(styles)(Home, Like, Quote));
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -22,7 +22,6 @@ import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 import VerifiedIcon from "@material-ui/icons/CheckSharp";
 import DoneIcon from "@material-ui/icons/Done";
-import CircularProgress from "@material-ui/core/CircularProgress";

 // component
 import "../App.css";
@@ -78,8 +77,7 @@ class user extends Component {
      user: null,
      following: null,
      posts: null,
-      myTopics: null,
-      loading: false
+      myTopics: null
    };
  }

@@ -116,8 +114,7 @@ class user extends Component {
  };

  componentDidMount() {
-    this.setState({loading: true});
-    let otherUserPromise = axios
+    axios
      .post("/getUserDetails", {
        handle: this.state.profile
      })
@@ -129,7 +126,7 @@ class user extends Component {
      })
      .catch(err => console.log(err));

-    let userPromise = axios
+    axios
      .get("/user")
      .then(res => {
        this.setState({
@@ -141,7 +138,7 @@ class user extends Component {
      })
      .catch(err => console.log(err));

-    let posts = axios
+    axios
      .post("/getOtherUsersPosts", {
        handle: this.state.profile
      })
@@ -152,14 +149,6 @@ class user extends Component {
        });
      })
      .catch(err => console.log(err));
-
-      Promise.all([otherUserPromise, userPromise, posts])
-        .then(() => {
-          this.setState({loading: false});
-        })
-        .catch((error) => {
-          console.log(error);
-        })
  }

  render() {
@@ -265,7 +254,6 @@ class user extends Component {
    );

    return (
-      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
      <Grid container spacing={24}>
        <Grid item sm={4} xs={8}>
          {imageMarkup}
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -13,7 +13,6 @@ import CardMedia from "@material-ui/core/CardMedia";
 import CardContent from "@material-ui/core/CardContent";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
-import CircularProgress from "@material-ui/core/CircularProgress";

 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
@@ -77,8 +76,7 @@ class user extends Component {
      profile: null,
      imageUrl: null,
      topics: null,
-      newTopic: "",
-      loading: false
+      newTopic: ""
    };
  }

@@ -129,8 +127,7 @@ class user extends Component {
  }

  componentDidMount() {
-    this.setState({loading: true})
-    let userPromise = axios
+    axios
      .get("/user")
      .then(res => {
        this.setState({
@@ -144,7 +141,7 @@ class user extends Component {
      })
      .catch(err => console.log(err));

-    let postsPromise = axios
+    axios
      .get("/getallPostsforUser")
      .then(res => {
        // console.log(res.data);
@@ -153,14 +150,6 @@ class user extends Component {
        });
      })
      .catch(err => console.log(err));
-
-      Promise.all([userPromise, postsPromise])
-        .then(() => {
-          this.setState({loading: false});
-        })
-        .catch((error) => {
-          console.log(error)
-        })
  }

  formatDate(dateString) {
@@ -230,7 +219,7 @@ class user extends Component {
              <b>{post.userHandle}</b>
            </Typography>
            <Typography variant="body2" color={"textSecondary"}>
-              {this.formatDate(post.createdAt) }
+              {post.createdAt}
            </Typography>

            <br />
@@ -243,7 +232,7 @@ class user extends Component {
            <Typography variant="body2">{post.body}</Typography>
            <br />
            <Typography variant="body2">
-              <b>Topics:</b> {post.microBlogTopics.join(", ")}
+              <b>Topics:</b> {post.microBlogTopics}
            </Typography>
            <br />
            <Typography variant="body2" color={"textSecondary"}>
@@ -270,7 +259,6 @@ class user extends Component {
    ) : null;

    return (
-      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
      <div>
        {/* <Paper className={classes.paper}> */}
        <Grid container direction="column">