Add created at (Admin)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "food-waste-quotes",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Quotes that will encourage you to not make food waste | Part of Prototype of Food Busters",
   "private": true,
   "scripts": {
@@ -43,6 +43,7 @@
     "@vitejs/plugin-react": "^1.2.0",
     "eslint": "^8.9.0",
     "eslint-plugin-react": "^7.28.0",
+    "prettier": "^2.5.1",
     "sass": "^1.49.7",
     "typescript": "^4.5.5",
     "vite": "^2.8.1"

src/utils/time.ts

@@ -0,0 +1,19 @@
+// Copied from https://github.com/Leomotors/anime-captcha
+export function howFar(date: string) {
+  const BuildDate = Date.parse(date);
+  // Calculate how far it is from BuildDate
+
+  const now = Date.now();
+  const diff = now - BuildDate;
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+  return days > 0
+    ? `${days} days ago`
+    : hours > 0
+    ? `${hours} hours ago`
+    : minutes > 0
+    ? `${minutes} minutes ago`
+    : `${seconds} seconds ago`;
+}

src/views/Admin.tsx

@@ -8,6 +8,7 @@ import AdminModal from "../components/AdminModal";
 import FormModal from "../components/FormModal";
 import DeleteModal from "../components/DeleteModal";
 import Alert from "../components/Alert";
+import { howFar } from "../utils/time";
 
 export default function Admin() {
   const [quotes, setQuotes] = useState<Quote[]>([]);
@@ -127,6 +128,7 @@ export default function Admin() {
             <th>Quotes</th>
             <th>Image</th>
             <th>Count</th>
+            <th>Created At</th>
             <th>Actions</th>
           </tr>
         </thead>
@@ -137,6 +139,7 @@ export default function Admin() {
               <td>{quote.quote}</td>
               <td>{quote.image}</td>
               <td>{quote.count}</td>
+              <td title={quote.created_at}>{howFar(quote.created_at)}</td>
               <td className="d-flex flex-row justify-content-around">
                 <button
                   className="btn btn-danger"

yarn.lock

@@ -2468,6 +2468,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"