Merge pull request #147 from VicVsl/support-multiple-memories

Add support for the new memory api

client/components/memoire/memoireV2.tsx

@@ -0,0 +1,36 @@
+import MemoryV2 from "@/models/memoryV2"
+import s from "./memoire.module.scss"
+import Draggable from "react-draggable"
+import { useState } from "react";
+
+
+export default function Memoire({ memory }: { memory: MemoryV2 }) {
+
+    let [swap, setSwap] = useState<boolean>(false);
+
+    let date = new Date(memory.date);
+    let formatOptions: any = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+
+    let [location] = useState<string>("");
+
+    return (
+        <div className={s.memory} key={memory.id}>
+            <div className={s.details}>
+                <div className={s.date}>
+                    {date.toLocaleDateString(undefined, formatOptions)}
+                </div>
+                <div className={s.location}>
+                    {location}
+                </div>
+            </div>
+            <div className={s.content}>
+                <img src={swap ? memory.primary : memory.secondary} className={s.primary} />
+                <div className={s.bounds} onClick={() => setSwap(!swap)}>
+                    <Draggable axis="both" bounds="parent" >
+                        <img src={swap ? memory.secondary : memory.primary} className={s.secondary} onClick={() => setSwap(!swap)} onMouseDown={(e) => { e.stopPropagation() }} />
+                    </Draggable>
+                </div>
+            </div>
+        </div>
+    )
+}

client/components/navbar/navbar.tsx

@@ -32,6 +32,8 @@ export default function Navbar() {
             return "profile";
         } else if (router.pathname == "/memories") {
             return "memories";
+        } else if (router.pathname == "/allMemories") {
+            return "allMemories";
         } else if (router.pathname == "/realmojis") {
             return "realmojis";
         } else if (router.pathname == "/") {
@@ -79,6 +81,9 @@ export default function Navbar() {
                             <Link href={"/post"} className={s.logout}>
                                 <button>post</button>
                             </Link>
+                            <Link href={"/allMemories"} className={s.logout}>
+                                <button>all memories</button>
+                            </Link>
                             <Link href={"/memories"} className={s.logout}>
                                 <button>memories</button>
                             </Link>
@@ -93,6 +98,9 @@ export default function Navbar() {
                         router.pathname == "/feed"
                             ?
                             <>
+                                <Link href={"/allMemories"} className={s.item}>
+                                    <button>all memories</button>
+                                </Link>
                                 <Link href={'/memories'} className={s.item}>
                                     <button >memories</button>
                                 </Link>

client/models/memoryV2.ts

@@ -0,0 +1,32 @@
+class MemoryV2 {
+    id: string;
+    primary: string;
+    secondary: string;
+    date: string;
+    time: string;
+
+    constructor(
+        id: string, primary: string, secondary: string, date: string, time: string
+    ) {
+        this.id = id;
+        this.primary = primary;
+        this.secondary = secondary;
+        this.date = date;
+        this.time = time;
+    }
+
+
+    static create(raw: any) {
+        let id = raw.id;
+        let primary = raw.primary.url;
+        let secondary = raw.secondary.url;
+
+        let takenAt = raw.takenAt.split("T");
+        let date = takenAt[0];
+        let time = takenAt[1].split(".")[0];
+
+        return new MemoryV2(id, primary, secondary, date, time);
+    }
+}
+
+export default MemoryV2;

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -45,6 +45,6 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@types/file-saver": "^2.0.5"
+    "@types/file-saver": "^2.0.7"
   }
 }

client/pages/allMemories/allMemories.module.scss

@@ -0,0 +1,41 @@
+.mem {
+    width: 100%;
+}
+
+.allMemories {
+    display: flex;
+    overflow-x: scroll !important;
+
+
+    @media screen and (max-width: 600px) {
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+
+    }
+}
+
+.download {
+    padding-top: 40px;
+    button {
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 500;
+        height: 34px;
+        width: 200px;
+        border-radius: 8px;
+        background-color: white;
+        border: none;
+        margin-top: 20px;
+    }
+
+    .canvas {
+        display: none;
+    }
+
+    .error {
+        color: red;
+    }
+}
+
+