-
-
-
diff --git a/profile/login/index.html b/profile/login/index.html
new file mode 100644
index 000000000..b3d888fac
--- /dev/null
+++ b/profile/login/index.html
@@ -0,0 +1,97 @@
+
+
+
+
-
-
Everything begins at
Hello!
@@ -23,174 +24,33 @@
Sign in to say hello to your friends and to make new friends!
+
+
+ Sign in
+
+
-
Not a member yet?
+Not a member yet?
-
+
-
-
-
- Sign in
-
+
+
+
+
+
+
+
diff --git a/profile/register/index.html b/profile/register/index.html
new file mode 100644
index 000000000..d2ff8f6b6
--- /dev/null
+++ b/profile/register/index.html
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+ Sign in
+
+
+ Not a member yet?
+ +
+
+
+
+
+
+
+
diff --git a/profile/register/index.js b/profile/register/index.js
new file mode 100644
index 000000000..6de680dbd
--- /dev/null
+++ b/profile/register/index.js
@@ -0,0 +1,43 @@
+import { API_SOCIAL_URL } from "../../src/js/api/api.js";
+
+const registerUserForm = document.querySelector("#registerUserForm");
+const name = document.querySelector("#name");
+const email = document.querySelector("#email");
+const password = document.querySelector("#password");
+
+/**
+ * API call that registers the user
+ * @param {string} url
+ * @param {any} userData
+ * ``` js
+ * registerUser(registerUrl, userToRegister);
+ */
+
+async function registerUser(url, userData) {
+ console.log(url, userData);
+ try {
+ const postData = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(userData),
+ };
+ const response = await fetch(url, postData);
+ console.log(response);
+ const json = await response.json();
+ console.log(json);
+ } catch (error) {
+ console.log(error);
+ }
+}
+
+const userToRegister = {
+ name: "my_username",
+ email: "first.last@stud.noroff.no",
+ password: "UzI1NiIsInR5cCI",
+};
+
+const registerUrl = `${API_SOCIAL_URL}/auth/register`;
+
+registerUser(registerUrl, userToRegister);
diff --git a/src/js/api/auth/register.mjs b/src/js/api/auth/register.mjs
new file mode 100644
index 000000000..cbc3f0c6f
--- /dev/null
+++ b/src/js/api/auth/register.mjs
@@ -0,0 +1,20 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+
+const action = "/auth/register";
+const method = "post";
+
+export async function register(profile) {
+ const registerURL = API_SOCIAL_URL + action;
+ console.log(registerURL);
+
+ const response = await fetch(registerURL, {
+ headers: {
+ "Content-Type": "application/json",
+ },
+ method,
+ body: JSON.stringify(profile),
+ });
+
+ const result = await response.json();
+ console.log(result);
+}
diff --git a/src/js/api/constants.mjs b/src/js/api/constants.mjs
new file mode 100644
index 000000000..dfe3040b7
--- /dev/null
+++ b/src/js/api/constants.mjs
@@ -0,0 +1,4 @@
+export const API_HOST_URL = "https://api.noroff.dev";
+export const API_BASE = "/api/v1";
+export const API_SOCIAL_BASE = "/social";
+export const API_SOCIAL_URL = `${API_HOST_URL}${API_BASE}${API_SOCIAL_BASE}`;
diff --git a/src/js/handlers/register.mjs b/src/js/handlers/register.mjs
new file mode 100644
index 000000000..c0a386a79
--- /dev/null
+++ b/src/js/handlers/register.mjs
@@ -0,0 +1,15 @@
+import { register } from "../api/auth/register.mjs";
+
+export function setRegisterFormListener() {
+ const form = document.querySelector("#registerForm");
+
+ form.addEventListener("submit", (event) => {
+ event.preventDefault();
+ const form = event.target;
+ const formData = new FormData(form);
+ const profile = Object.fromEntries(formData.entries());
+ console.log(profile);
+
+ register(profile);
+ });
+}
diff --git a/src/js/index.mjs b/src/js/index.mjs
new file mode 100644
index 000000000..64565145d
--- /dev/null
+++ b/src/js/index.mjs
@@ -0,0 +1,3 @@
+import { setRegisterFormListener } from "./handlers/register.mjs";
+
+setRegisterFormListener();
From 06bc32bf4fa13aa8c17c360e583055b3861f119d Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Sun, 3 Dec 2023 17:13:42 +0100
Subject: [PATCH 02/29] small tweaks on html and added login functionality
---
index.html | 6 +-
profile/login/index.html | 116 ++++++++++++++++-------------------
profile/register/index.html | 8 +--
profile/register/index.js | 43 -------------
src/js/api/auth/login.mjs | 23 +++++++
src/js/api/auth/register.mjs | 1 +
src/js/handlers/login.mjs | 17 +++++
src/js/handlers/register.mjs | 18 +++---
src/js/index.mjs | 9 ++-
src/js/storage/index.mjs | 16 +++++
10 files changed, 135 insertions(+), 122 deletions(-)
delete mode 100644 profile/register/index.js
create mode 100644 src/js/api/auth/login.mjs
create mode 100644 src/js/handlers/login.mjs
create mode 100644 src/js/storage/index.mjs
diff --git a/index.html b/index.html
index 7d5852aed..f406e4597 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
>
-
+
+
+
+
+
+
+
+
+ Register user
+
+
+ Already a member?
+
+
+ Sign in
+
+
+
Not a member yet?
+
@@ -21,72 +22,61 @@
-
-
-
-
-
- Sign in
+
+
+
+
+ Sign in
+
+
+
-
diff --git a/profile/register/index.html b/profile/register/index.html
index d2ff8f6b6..a42f4d2d6 100644
--- a/profile/register/index.html
+++ b/profile/register/index.html
@@ -22,9 +22,9 @@
-
-
-
+
+
+
Register user
@@ -92,7 +92,7 @@ Register user
Already a member?
{
+ event.preventDefault();
+ const form = event.target;
+ const formData = new FormData(form);
+ const profile = Object.fromEntries(formData.entries());
+ console.log(profile);
+
+ login(profile);
+ });
+ }
+}
diff --git a/src/js/handlers/register.mjs b/src/js/handlers/register.mjs
index c0a386a79..78dabe615 100644
--- a/src/js/handlers/register.mjs
+++ b/src/js/handlers/register.mjs
@@ -3,13 +3,15 @@ import { register } from "../api/auth/register.mjs";
export function setRegisterFormListener() {
const form = document.querySelector("#registerForm");
- form.addEventListener("submit", (event) => {
- event.preventDefault();
- const form = event.target;
- const formData = new FormData(form);
- const profile = Object.fromEntries(formData.entries());
- console.log(profile);
+ if (form) {
+ form.addEventListener("submit", (event) => {
+ event.preventDefault();
+ const form = event.target;
+ const formData = new FormData(form);
+ const profile = Object.fromEntries(formData.entries());
+ console.log(profile);
- register(profile);
- });
+ register(profile);
+ });
+ }
}
diff --git a/src/js/index.mjs b/src/js/index.mjs
index 64565145d..1071e9556 100644
--- a/src/js/index.mjs
+++ b/src/js/index.mjs
@@ -1,3 +1,10 @@
import { setRegisterFormListener } from "./handlers/register.mjs";
+import { setLoginFormListener } from "./handlers/login.mjs";
-setRegisterFormListener();
+const path = location.pathname;
+
+if (path === "/profile/login/") {
+ setLoginFormListener();
+} else if (path === "/profile/register/") {
+ setRegisterFormListener();
+}
diff --git a/src/js/storage/index.mjs b/src/js/storage/index.mjs
new file mode 100644
index 000000000..e3df9819a
--- /dev/null
+++ b/src/js/storage/index.mjs
@@ -0,0 +1,16 @@
+export function save(key, value) {
+ localStorage.setItem(key, JSON.stringify(value));
+}
+
+export function load(key) {
+ try {
+ const value = localStorage.getItem(key);
+ return JSON.parse(value);
+ } catch {
+ return null;
+ }
+}
+
+export function remove(key) {
+ localStorage.removeItem(key);
+}
From 911aedfff9a7b5660ffac8bc09e874cb6b53b224 Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Mon, 4 Dec 2023 14:46:24 +0100
Subject: [PATCH 03/29] Added js funcionality for posts
- Get post
- Get posts
- Delete post
- Update post
- Also removed console.logs
---
index.html | 3 +--
src/js/api/auth/login.mjs | 1 -
src/js/api/auth/register.mjs | 2 --
src/js/api/authFetch.mjs | 17 +++++++++++++++++
src/js/api/posts/create.mjs | 16 ++++++++++++++++
src/js/api/posts/get.mjs | 24 ++++++++++++++++++++++++
src/js/api/posts/index.mjs | 4 ++++
src/js/api/posts/remove.mjs | 19 +++++++++++++++++++
src/js/api/posts/update.mjs | 20 ++++++++++++++++++++
src/js/handlers/login.mjs | 1 -
src/js/handlers/register.mjs | 1 -
src/js/index.mjs | 21 +++++++++++++++++++++
12 files changed, 122 insertions(+), 7 deletions(-)
create mode 100644 src/js/api/authFetch.mjs
create mode 100644 src/js/api/posts/create.mjs
create mode 100644 src/js/api/posts/get.mjs
create mode 100644 src/js/api/posts/index.mjs
create mode 100644 src/js/api/posts/remove.mjs
create mode 100644 src/js/api/posts/update.mjs
diff --git a/index.html b/index.html
index f406e4597..7da544d06 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,7 @@
diff --git a/src/js/api/auth/login.mjs b/src/js/api/auth/login.mjs
index e05df38d2..e6e37b8cd 100644
--- a/src/js/api/auth/login.mjs
+++ b/src/js/api/auth/login.mjs
@@ -6,7 +6,6 @@ const method = "post";
export async function login(profile) {
const loginURL = API_SOCIAL_URL + action;
- console.log(loginURL);
const response = await fetch(loginURL, {
headers: {
diff --git a/src/js/api/auth/register.mjs b/src/js/api/auth/register.mjs
index 7fb3de9d5..cc0a160b6 100644
--- a/src/js/api/auth/register.mjs
+++ b/src/js/api/auth/register.mjs
@@ -5,7 +5,6 @@ const method = "post";
export async function register(profile) {
const registerURL = API_SOCIAL_URL + action;
- console.log(registerURL);
const response = await fetch(registerURL, {
headers: {
@@ -17,5 +16,4 @@ export async function register(profile) {
const result = await response.json();
return result;
- console.log(result);
}
diff --git a/src/js/api/authFetch.mjs b/src/js/api/authFetch.mjs
new file mode 100644
index 000000000..2811da85b
--- /dev/null
+++ b/src/js/api/authFetch.mjs
@@ -0,0 +1,17 @@
+import { load } from "../storage/index.mjs";
+
+export function headers() {
+ const token = load("token");
+
+ return {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ };
+}
+
+export async function authFetch(url, options = {}) {
+ return fetch(url, {
+ ...options,
+ headers: headers(),
+ });
+}
diff --git a/src/js/api/posts/create.mjs b/src/js/api/posts/create.mjs
new file mode 100644
index 000000000..8fe9446e7
--- /dev/null
+++ b/src/js/api/posts/create.mjs
@@ -0,0 +1,16 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+const method = "post";
+
+export async function createPost(postData) {
+ const createPostURL = API_SOCIAL_URL + action;
+
+ const response = await authFetch(createPostURL, {
+ method,
+ body: JSON.stringify(postData),
+ });
+
+ return await response.json();
+}
diff --git a/src/js/api/posts/get.mjs b/src/js/api/posts/get.mjs
new file mode 100644
index 000000000..fa48bd1ab
--- /dev/null
+++ b/src/js/api/posts/get.mjs
@@ -0,0 +1,24 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+
+export async function getPosts() {
+ const getPostsURL = `${API_SOCIAL_URL}${action}`;
+
+ const response = await authFetch(getPostsURL);
+
+ return await response.json();
+}
+
+export async function getPost(id) {
+ if (!id) {
+ throw new Error("Get requires a postID");
+ }
+
+ const getPostURL = `${API_SOCIAL_URL}${action}/${id}`;
+
+ const response = await authFetch(getPostURL);
+
+ return await response.json();
+}
diff --git a/src/js/api/posts/index.mjs b/src/js/api/posts/index.mjs
new file mode 100644
index 000000000..db34f8d61
--- /dev/null
+++ b/src/js/api/posts/index.mjs
@@ -0,0 +1,4 @@
+export * from "./create.mjs";
+export * from "./get.mjs";
+export * from "./update.mjs";
+export * from "./remove.mjs";
diff --git a/src/js/api/posts/remove.mjs b/src/js/api/posts/remove.mjs
new file mode 100644
index 000000000..2142e713b
--- /dev/null
+++ b/src/js/api/posts/remove.mjs
@@ -0,0 +1,19 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+const method = "delete";
+
+export async function removePost(id) {
+ if (!id) {
+ throw new Error("Delete requires a postID");
+ }
+
+ const removePostURL = `${API_SOCIAL_URL}${action}/${id}`;
+
+ const response = await authFetch(removePostURL, {
+ method,
+ });
+
+ return await response.json();
+}
diff --git a/src/js/api/posts/update.mjs b/src/js/api/posts/update.mjs
new file mode 100644
index 000000000..c9fa69c20
--- /dev/null
+++ b/src/js/api/posts/update.mjs
@@ -0,0 +1,20 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+const method = "put";
+
+export async function updatePost(postData) {
+ if (!postData.id) {
+ throw new Error("Update requires a postID");
+ }
+
+ const updatePostURL = `${API_SOCIAL_URL}${action}/${postData.id}`;
+
+ const response = await authFetch(updatePostURL, {
+ method,
+ body: JSON.stringify(postData),
+ });
+
+ return await response.json();
+}
diff --git a/src/js/handlers/login.mjs b/src/js/handlers/login.mjs
index 590600c20..29df86aa8 100644
--- a/src/js/handlers/login.mjs
+++ b/src/js/handlers/login.mjs
@@ -9,7 +9,6 @@ export function setLoginFormListener() {
const form = event.target;
const formData = new FormData(form);
const profile = Object.fromEntries(formData.entries());
- console.log(profile);
login(profile);
});
diff --git a/src/js/handlers/register.mjs b/src/js/handlers/register.mjs
index 78dabe615..9fddf7c30 100644
--- a/src/js/handlers/register.mjs
+++ b/src/js/handlers/register.mjs
@@ -9,7 +9,6 @@ export function setRegisterFormListener() {
const form = event.target;
const formData = new FormData(form);
const profile = Object.fromEntries(formData.entries());
- console.log(profile);
register(profile);
});
diff --git a/src/js/index.mjs b/src/js/index.mjs
index 1071e9556..891d90fee 100644
--- a/src/js/index.mjs
+++ b/src/js/index.mjs
@@ -1,5 +1,6 @@
import { setRegisterFormListener } from "./handlers/register.mjs";
import { setLoginFormListener } from "./handlers/login.mjs";
+import * as post from "./api/posts/index.mjs";
const path = location.pathname;
@@ -8,3 +9,23 @@ if (path === "/profile/login/") {
} else if (path === "/profile/register/") {
setRegisterFormListener();
}
+
+// post.createPost();
+// post.updatePost();
+// post.removePost();
+// post.getPost();
+// post.getPosts().then(console.log);
+
+// Examples
+// post.createPost({
+// title: "Example Post 4",
+// body: "Example text in body 4",
+// });
+
+// updatePost({
+// id: 8932,
+// title: "Example Post updated",
+// body: "Example text in body",
+// });
+
+// removePost(8932);
From eb8667d0e7cbe926f17547ed49059624c97fc879 Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Mon, 4 Dec 2023 20:44:00 +0100
Subject: [PATCH 04/29] working on ui
---
feed/index.html | 184 +-------------
post/edit/index.html | 470 ++++++++++++++++++++++++++++++++++++
post/index.html | 221 +++++++++++++++++
profile/register/index.html | 3 +-
src/js/index.mjs | 21 +-
src/js/templates/index.mjs | 1 +
src/js/templates/post.mjs | 48 ++++
7 files changed, 764 insertions(+), 184 deletions(-)
create mode 100644 post/edit/index.html
create mode 100644 post/index.html
create mode 100644 src/js/templates/index.mjs
create mode 100644 src/js/templates/post.mjs
diff --git a/feed/index.html b/feed/index.html
index 7c84aca35..c25b7da00 100644
--- a/feed/index.html
+++ b/feed/index.html
@@ -10,9 +10,9 @@
+
@@ -113,185 +113,7 @@ @tigerlily
-
- -
-
-
-
-
-
- cutedogs
-
-
- 
-
-
-
-
-
-
- Caught this corgi in action as he was out on a walk today. He
- looks so happy and so adorable!
- #happy #dogs #cuteness #corgi
-
-
- 1 hour ago
-
-
-
-
- -
-
-
-
-
-
- girlwithapencil
-
-
- 
-
-
-
-
-
-
- Just some nighttime doodles.. Summers over and I can't wait for
- spring to arrive again. What du you think?
- #art #pastels #drawing #inspiration #flowers #spring
-
-
- 2 days ago
-
-
-
- -
-
-
-
-
-
-
cutedogs
-
-
- 
-
-
-
-
-
-
- How can I resist this cuteness overload? The rain was pouring
- down today, but with those big brown eyes looking at me I was
- easily pursuaded to go for a walk.
- #happy #dogs #cuteness #cockerspaniel
-
-
- 6 days ago
-
-
-
-
- -
-
-
-
-
-
- yogaemeilia
-
-
- 
-
-
-
-
-
-
- Just came back from a wonderful place. I have shot a 10 days
- series with videos for you that will be released in a month. So
- excited to share this experience with you guys!
- #healthy #freedom #spirit #mindfullness
-
-
- 3 weeks ago
-
-
-
-
- -
-
-
-
-
-
-
yogaemeilia
-
-
- 
-
-
-
-
-
-
- I'm working on something... Will share more about this soon.
- #healthy #yoga #spirit #mindfullness
-
-
- 1 month ago
-
-
-
-
+
diff --git a/post/edit/index.html b/post/edit/index.html
new file mode 100644
index 000000000..18a21a7d9
--- /dev/null
+++ b/post/edit/index.html
@@ -0,0 +1,470 @@
+
+
+ My profile | Hello!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ @tigerlily
+ Iris Doe
+
+ Just a girl living in the city trying to catch a glimpse of magic
+ that the earth has to offer. And yeah.. I'm a morning person!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
tigerlily
+
+
+ 
+
+
+
+
+
+
+ Went to stay at my parent house for the weekend and I was
+ up early just get a glimpse of the wonderful morning out
+ on the fields.
+ #lavendel #morning #foggy #nature #peaceful #beautiful
+
+
+
+ 7 minutes ago
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
cutedogs
+
+
+
+
+ -
+
+
+
+
+
+ charlieangelo
+
+
+
+
+
+ -
+
+
+
+
+
+
+ makeupbymariam
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ angelicaskylar
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ girlwithapencil
+
+
+
+
+
+ -
+
+
+
+
+
+
yogaemilia
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
cutedogs
+
+
+
+
+ -
+
+
+
+
+
+
+
charlieangelo
+
+
+
+
+ -
+
+
+
+
+
+
+
+ makeupbymariam
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ angelicaskylar
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ girlwithapencil
+
+
+
+
+
+ -
+
+
+
+
+
+
+
yogaemilia
+
+
+
+
+ -
+
+
+
+
+
+
+ andy_91
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/post/index.html b/post/index.html
new file mode 100644
index 000000000..414c03a3b
--- /dev/null
+++ b/post/index.html
@@ -0,0 +1,221 @@
+
+
+ Feed | Hello!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @tigerlily
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/profile/register/index.html b/profile/register/index.html
index a42f4d2d6..2b001dea0 100644
--- a/profile/register/index.html
+++ b/profile/register/index.html
@@ -7,8 +7,7 @@
diff --git a/src/js/index.mjs b/src/js/index.mjs
index 891d90fee..af3dbcef8 100644
--- a/src/js/index.mjs
+++ b/src/js/index.mjs
@@ -1,6 +1,7 @@
import { setRegisterFormListener } from "./handlers/register.mjs";
import { setLoginFormListener } from "./handlers/login.mjs";
-import * as post from "./api/posts/index.mjs";
+import * as postMethods from "./api/posts/index.mjs";
+import * as templates from "./templates/index.mjs";
const path = location.pathname;
@@ -10,6 +11,24 @@ if (path === "/profile/login/") {
setRegisterFormListener();
}
+// async function testTemplates() {
+// const posts = await postMethods.getPosts();
+// const post = posts[45];
+// const container = document.querySelector("#postFeed");
+// templates.renderPostTemplates(posts, container);
+// }
+
+// testTemplates();
+
+// async function testTemplate() {
+// const posts = await postMethods.getPosts();
+// const post = posts[45];
+// const container = document.querySelector("#post");
+// templates.renderPostTemplate(post, container);
+// }
+
+// testTemplate();
+
// post.createPost();
// post.updatePost();
// post.removePost();
diff --git a/src/js/templates/index.mjs b/src/js/templates/index.mjs
new file mode 100644
index 000000000..c11a397f6
--- /dev/null
+++ b/src/js/templates/index.mjs
@@ -0,0 +1 @@
+export * from "./post.mjs";
diff --git a/src/js/templates/post.mjs b/src/js/templates/post.mjs
new file mode 100644
index 000000000..aac714afd
--- /dev/null
+++ b/src/js/templates/post.mjs
@@ -0,0 +1,48 @@
+export function postTemplate(postData) {
+ const post = document.createElement("div");
+ post.classList.add("post");
+ post.innerHTML += `
+
+ ${postData.title}
+
+
+ ${postData.body}
+ ${postData.tags}
+
+ 
+
+
+
+
+
+
+
+ Posted:${postData.created}
+
+
+
+ `;
+ return post;
+}
+
+export function renderPostTemplate(postData, parent) {
+ parent.append(postTemplate(postData));
+}
+
+export function renderPostTemplates(postDataList, parent) {
+ parent.append(...postDataList.map(postTemplate));
+ console.log(postDataList);
+}
+
+export async function testTemplates() {
+ const posts = await postMethods.getPosts();
+ const post = posts[45];
+ const container = document.querySelector("#postFeed");
+ templates.renderPostTemplates(posts, container);
+}
+
+testTemplates();
From aee404ee5876f96443c4e3eca1787378f33eb532 Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Mon, 4 Dec 2023 20:56:12 +0100
Subject: [PATCH 05/29] some html cleanup
---
feed/index.html | 6 +++---
post/edit/index.html | 8 ++++----
post/index.html | 8 ++++----
profile/index.html | 8 ++++----
profile/login/index.html | 2 +-
profile/register/index.html | 2 +-
src/js/index.mjs | 14 +++++++-------
7 files changed, 24 insertions(+), 24 deletions(-)
diff --git a/feed/index.html b/feed/index.html
index c25b7da00..f32e90f26 100644
--- a/feed/index.html
+++ b/feed/index.html
@@ -40,19 +40,19 @@
Not a member yet?
+
-
@@ -21,72 +22,61 @@
-
-
-
-
-
+
Sign in
+
+
-
+
-
+
+
+
-
diff --git a/profile/register/index.html b/profile/register/index.html
index d2ff8f6b6..a42f4d2d6 100644
--- a/profile/register/index.html
+++ b/profile/register/index.html
@@ -22,9 +22,9 @@
Sign in
+
-
+
+
+
@@ -92,7 +92,7 @@
Register user
Register user
Already a member?
{
+ event.preventDefault();
+ const form = event.target;
+ const formData = new FormData(form);
+ const profile = Object.fromEntries(formData.entries());
+ console.log(profile);
+
+ login(profile);
+ });
+ }
+}
diff --git a/src/js/handlers/register.mjs b/src/js/handlers/register.mjs
index c0a386a79..78dabe615 100644
--- a/src/js/handlers/register.mjs
+++ b/src/js/handlers/register.mjs
@@ -3,13 +3,15 @@ import { register } from "../api/auth/register.mjs";
export function setRegisterFormListener() {
const form = document.querySelector("#registerForm");
- form.addEventListener("submit", (event) => {
- event.preventDefault();
- const form = event.target;
- const formData = new FormData(form);
- const profile = Object.fromEntries(formData.entries());
- console.log(profile);
+ if (form) {
+ form.addEventListener("submit", (event) => {
+ event.preventDefault();
+ const form = event.target;
+ const formData = new FormData(form);
+ const profile = Object.fromEntries(formData.entries());
+ console.log(profile);
- register(profile);
- });
+ register(profile);
+ });
+ }
}
diff --git a/src/js/index.mjs b/src/js/index.mjs
index 64565145d..1071e9556 100644
--- a/src/js/index.mjs
+++ b/src/js/index.mjs
@@ -1,3 +1,10 @@
import { setRegisterFormListener } from "./handlers/register.mjs";
+import { setLoginFormListener } from "./handlers/login.mjs";
-setRegisterFormListener();
+const path = location.pathname;
+
+if (path === "/profile/login/") {
+ setLoginFormListener();
+} else if (path === "/profile/register/") {
+ setRegisterFormListener();
+}
diff --git a/src/js/storage/index.mjs b/src/js/storage/index.mjs
new file mode 100644
index 000000000..e3df9819a
--- /dev/null
+++ b/src/js/storage/index.mjs
@@ -0,0 +1,16 @@
+export function save(key, value) {
+ localStorage.setItem(key, JSON.stringify(value));
+}
+
+export function load(key) {
+ try {
+ const value = localStorage.getItem(key);
+ return JSON.parse(value);
+ } catch {
+ return null;
+ }
+}
+
+export function remove(key) {
+ localStorage.removeItem(key);
+}
From 911aedfff9a7b5660ffac8bc09e874cb6b53b224 Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Mon, 4 Dec 2023 14:46:24 +0100
Subject: [PATCH 03/29] Added js funcionality for posts
- Get post
- Get posts
- Delete post
- Update post
- Also removed console.logs
---
index.html | 3 +--
src/js/api/auth/login.mjs | 1 -
src/js/api/auth/register.mjs | 2 --
src/js/api/authFetch.mjs | 17 +++++++++++++++++
src/js/api/posts/create.mjs | 16 ++++++++++++++++
src/js/api/posts/get.mjs | 24 ++++++++++++++++++++++++
src/js/api/posts/index.mjs | 4 ++++
src/js/api/posts/remove.mjs | 19 +++++++++++++++++++
src/js/api/posts/update.mjs | 20 ++++++++++++++++++++
src/js/handlers/login.mjs | 1 -
src/js/handlers/register.mjs | 1 -
src/js/index.mjs | 21 +++++++++++++++++++++
12 files changed, 122 insertions(+), 7 deletions(-)
create mode 100644 src/js/api/authFetch.mjs
create mode 100644 src/js/api/posts/create.mjs
create mode 100644 src/js/api/posts/get.mjs
create mode 100644 src/js/api/posts/index.mjs
create mode 100644 src/js/api/posts/remove.mjs
create mode 100644 src/js/api/posts/update.mjs
diff --git a/index.html b/index.html
index f406e4597..7da544d06 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,7 @@
diff --git a/src/js/api/auth/login.mjs b/src/js/api/auth/login.mjs
index e05df38d2..e6e37b8cd 100644
--- a/src/js/api/auth/login.mjs
+++ b/src/js/api/auth/login.mjs
@@ -6,7 +6,6 @@ const method = "post";
export async function login(profile) {
const loginURL = API_SOCIAL_URL + action;
- console.log(loginURL);
const response = await fetch(loginURL, {
headers: {
diff --git a/src/js/api/auth/register.mjs b/src/js/api/auth/register.mjs
index 7fb3de9d5..cc0a160b6 100644
--- a/src/js/api/auth/register.mjs
+++ b/src/js/api/auth/register.mjs
@@ -5,7 +5,6 @@ const method = "post";
export async function register(profile) {
const registerURL = API_SOCIAL_URL + action;
- console.log(registerURL);
const response = await fetch(registerURL, {
headers: {
@@ -17,5 +16,4 @@ export async function register(profile) {
const result = await response.json();
return result;
- console.log(result);
}
diff --git a/src/js/api/authFetch.mjs b/src/js/api/authFetch.mjs
new file mode 100644
index 000000000..2811da85b
--- /dev/null
+++ b/src/js/api/authFetch.mjs
@@ -0,0 +1,17 @@
+import { load } from "../storage/index.mjs";
+
+export function headers() {
+ const token = load("token");
+
+ return {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ };
+}
+
+export async function authFetch(url, options = {}) {
+ return fetch(url, {
+ ...options,
+ headers: headers(),
+ });
+}
diff --git a/src/js/api/posts/create.mjs b/src/js/api/posts/create.mjs
new file mode 100644
index 000000000..8fe9446e7
--- /dev/null
+++ b/src/js/api/posts/create.mjs
@@ -0,0 +1,16 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+const method = "post";
+
+export async function createPost(postData) {
+ const createPostURL = API_SOCIAL_URL + action;
+
+ const response = await authFetch(createPostURL, {
+ method,
+ body: JSON.stringify(postData),
+ });
+
+ return await response.json();
+}
diff --git a/src/js/api/posts/get.mjs b/src/js/api/posts/get.mjs
new file mode 100644
index 000000000..fa48bd1ab
--- /dev/null
+++ b/src/js/api/posts/get.mjs
@@ -0,0 +1,24 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+
+export async function getPosts() {
+ const getPostsURL = `${API_SOCIAL_URL}${action}`;
+
+ const response = await authFetch(getPostsURL);
+
+ return await response.json();
+}
+
+export async function getPost(id) {
+ if (!id) {
+ throw new Error("Get requires a postID");
+ }
+
+ const getPostURL = `${API_SOCIAL_URL}${action}/${id}`;
+
+ const response = await authFetch(getPostURL);
+
+ return await response.json();
+}
diff --git a/src/js/api/posts/index.mjs b/src/js/api/posts/index.mjs
new file mode 100644
index 000000000..db34f8d61
--- /dev/null
+++ b/src/js/api/posts/index.mjs
@@ -0,0 +1,4 @@
+export * from "./create.mjs";
+export * from "./get.mjs";
+export * from "./update.mjs";
+export * from "./remove.mjs";
diff --git a/src/js/api/posts/remove.mjs b/src/js/api/posts/remove.mjs
new file mode 100644
index 000000000..2142e713b
--- /dev/null
+++ b/src/js/api/posts/remove.mjs
@@ -0,0 +1,19 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+const method = "delete";
+
+export async function removePost(id) {
+ if (!id) {
+ throw new Error("Delete requires a postID");
+ }
+
+ const removePostURL = `${API_SOCIAL_URL}${action}/${id}`;
+
+ const response = await authFetch(removePostURL, {
+ method,
+ });
+
+ return await response.json();
+}
diff --git a/src/js/api/posts/update.mjs b/src/js/api/posts/update.mjs
new file mode 100644
index 000000000..c9fa69c20
--- /dev/null
+++ b/src/js/api/posts/update.mjs
@@ -0,0 +1,20 @@
+import { API_SOCIAL_URL } from "../constants.mjs";
+import { authFetch } from "../authFetch.mjs";
+
+const action = "/posts";
+const method = "put";
+
+export async function updatePost(postData) {
+ if (!postData.id) {
+ throw new Error("Update requires a postID");
+ }
+
+ const updatePostURL = `${API_SOCIAL_URL}${action}/${postData.id}`;
+
+ const response = await authFetch(updatePostURL, {
+ method,
+ body: JSON.stringify(postData),
+ });
+
+ return await response.json();
+}
diff --git a/src/js/handlers/login.mjs b/src/js/handlers/login.mjs
index 590600c20..29df86aa8 100644
--- a/src/js/handlers/login.mjs
+++ b/src/js/handlers/login.mjs
@@ -9,7 +9,6 @@ export function setLoginFormListener() {
const form = event.target;
const formData = new FormData(form);
const profile = Object.fromEntries(formData.entries());
- console.log(profile);
login(profile);
});
diff --git a/src/js/handlers/register.mjs b/src/js/handlers/register.mjs
index 78dabe615..9fddf7c30 100644
--- a/src/js/handlers/register.mjs
+++ b/src/js/handlers/register.mjs
@@ -9,7 +9,6 @@ export function setRegisterFormListener() {
const form = event.target;
const formData = new FormData(form);
const profile = Object.fromEntries(formData.entries());
- console.log(profile);
register(profile);
});
diff --git a/src/js/index.mjs b/src/js/index.mjs
index 1071e9556..891d90fee 100644
--- a/src/js/index.mjs
+++ b/src/js/index.mjs
@@ -1,5 +1,6 @@
import { setRegisterFormListener } from "./handlers/register.mjs";
import { setLoginFormListener } from "./handlers/login.mjs";
+import * as post from "./api/posts/index.mjs";
const path = location.pathname;
@@ -8,3 +9,23 @@ if (path === "/profile/login/") {
} else if (path === "/profile/register/") {
setRegisterFormListener();
}
+
+// post.createPost();
+// post.updatePost();
+// post.removePost();
+// post.getPost();
+// post.getPosts().then(console.log);
+
+// Examples
+// post.createPost({
+// title: "Example Post 4",
+// body: "Example text in body 4",
+// });
+
+// updatePost({
+// id: 8932,
+// title: "Example Post updated",
+// body: "Example text in body",
+// });
+
+// removePost(8932);
From eb8667d0e7cbe926f17547ed49059624c97fc879 Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Mon, 4 Dec 2023 20:44:00 +0100
Subject: [PATCH 04/29] working on ui
---
feed/index.html | 184 +-------------
post/edit/index.html | 470 ++++++++++++++++++++++++++++++++++++
post/index.html | 221 +++++++++++++++++
profile/register/index.html | 3 +-
src/js/index.mjs | 21 +-
src/js/templates/index.mjs | 1 +
src/js/templates/post.mjs | 48 ++++
7 files changed, 764 insertions(+), 184 deletions(-)
create mode 100644 post/edit/index.html
create mode 100644 post/index.html
create mode 100644 src/js/templates/index.mjs
create mode 100644 src/js/templates/post.mjs
diff --git a/feed/index.html b/feed/index.html
index 7c84aca35..c25b7da00 100644
--- a/feed/index.html
+++ b/feed/index.html
@@ -10,9 +10,9 @@
+
My profile | Hello!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/post/index.html b/post/index.html
new file mode 100644
index 000000000..414c03a3b
--- /dev/null
+++ b/post/index.html
@@ -0,0 +1,221 @@
+
+
+ Feed | Hello!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/profile/register/index.html b/profile/register/index.html
index a42f4d2d6..2b001dea0 100644
--- a/profile/register/index.html
+++ b/profile/register/index.html
@@ -7,8 +7,7 @@
diff --git a/src/js/index.mjs b/src/js/index.mjs
index 891d90fee..af3dbcef8 100644
--- a/src/js/index.mjs
+++ b/src/js/index.mjs
@@ -1,6 +1,7 @@
import { setRegisterFormListener } from "./handlers/register.mjs";
import { setLoginFormListener } from "./handlers/login.mjs";
-import * as post from "./api/posts/index.mjs";
+import * as postMethods from "./api/posts/index.mjs";
+import * as templates from "./templates/index.mjs";
const path = location.pathname;
@@ -10,6 +11,24 @@ if (path === "/profile/login/") {
setRegisterFormListener();
}
+// async function testTemplates() {
+// const posts = await postMethods.getPosts();
+// const post = posts[45];
+// const container = document.querySelector("#postFeed");
+// templates.renderPostTemplates(posts, container);
+// }
+
+// testTemplates();
+
+// async function testTemplate() {
+// const posts = await postMethods.getPosts();
+// const post = posts[45];
+// const container = document.querySelector("#post");
+// templates.renderPostTemplate(post, container);
+// }
+
+// testTemplate();
+
// post.createPost();
// post.updatePost();
// post.removePost();
diff --git a/src/js/templates/index.mjs b/src/js/templates/index.mjs
new file mode 100644
index 000000000..c11a397f6
--- /dev/null
+++ b/src/js/templates/index.mjs
@@ -0,0 +1 @@
+export * from "./post.mjs";
diff --git a/src/js/templates/post.mjs b/src/js/templates/post.mjs
new file mode 100644
index 000000000..aac714afd
--- /dev/null
+++ b/src/js/templates/post.mjs
@@ -0,0 +1,48 @@
+export function postTemplate(postData) {
+ const post = document.createElement("div");
+ post.classList.add("post");
+ post.innerHTML += `
+
+
+ `;
+ return post;
+}
+
+export function renderPostTemplate(postData, parent) {
+ parent.append(postTemplate(postData));
+}
+
+export function renderPostTemplates(postDataList, parent) {
+ parent.append(...postDataList.map(postTemplate));
+ console.log(postDataList);
+}
+
+export async function testTemplates() {
+ const posts = await postMethods.getPosts();
+ const post = posts[45];
+ const container = document.querySelector("#postFeed");
+ templates.renderPostTemplates(posts, container);
+}
+
+testTemplates();
From aee404ee5876f96443c4e3eca1787378f33eb532 Mon Sep 17 00:00:00 2001
From: VildeAvloes <94361976+VildeAvloes@users.noreply.github.com>
Date: Mon, 4 Dec 2023 20:56:12 +0100
Subject: [PATCH 05/29] some html cleanup
---
feed/index.html | 6 +++---
post/edit/index.html | 8 ++++----
post/index.html | 8 ++++----
profile/index.html | 8 ++++----
profile/login/index.html | 2 +-
profile/register/index.html | 2 +-
src/js/index.mjs | 14 +++++++-------
7 files changed, 24 insertions(+), 24 deletions(-)
diff --git a/feed/index.html b/feed/index.html
index c25b7da00..f32e90f26 100644
--- a/feed/index.html
+++ b/feed/index.html
@@ -40,19 +40,19 @@
@@ -113,185 +113,7 @@
@tigerlily
-
diff --git a/post/edit/index.html b/post/edit/index.html
new file mode 100644
index 000000000..18a21a7d9
--- /dev/null
+++ b/post/edit/index.html
@@ -0,0 +1,470 @@
+
+
+ -
-
-
- ------
-
cutedogs
-
- --- - --- Caught this corgi in action as he was out on a walk today. He - looks so happy and so adorable! - #happy #dogs #cuteness #corgi -
-- 1 hour ago -
-
-
- -
- ------
-
girlwithapencil
-
- --- - --- Just some nighttime doodles.. Summers over and I can't wait for - spring to arrive again. What du you think? - #art #pastels #drawing #inspiration #flowers #spring -
-- 2 days ago -
-
- -
- ------
-
cutedogs
-
- --- - --- How can I resist this cuteness overload? The rain was pouring - down today, but with those big brown eyes looking at me I was - easily pursuaded to go for a walk. - #happy #dogs #cuteness #cockerspaniel -
-- 6 days ago -
-
-
- -
- ------
-
yogaemeilia
-
- --- - --- Just came back from a wonderful place. I have shot a 10 days - series with videos for you that will be released in a month. So - excited to share this experience with you guys! - #healthy #freedom #spirit #mindfullness -
-- 3 weeks ago -
-
-
- -
- ------
-
yogaemeilia
-
- --- - --- I'm working on something... Will share more about this soon. - #healthy #yoga #spirit #mindfullness -
-- 1 month ago -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ @tigerlily
+Iris Doe
++ Just a girl living in the city trying to catch a glimpse of magic + that the earth has to offer. And yeah.. I'm a morning person! +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+ ++++++
+
tigerlily
+
+ +++ + +++ Went to stay at my parent house for the weekend and I was + up early just get a glimpse of the wonderful morning out + on the fields. + #lavendel #morning #foggy #nature #peaceful #beautiful + +
++ 7 minutes ago +
+
+
+
+
+
+
+
+ -
+
-
+
+ ++ + +++ +
+
cutedogs
+
+ -
+
+ ++ + + +++
+
charlieangelo
+
+ -
+
+ ++ + + +++
+
+ makeupbymariam +
+
+ -
+
+ ++ + +++ +
+
+ angelicaskylar +
+
+ -
+
+ ++ + +++ +
+
+ girlwithapencil +
+
+ -
+
+ ++ + +++
+
yogaemilia
+
+
+
+
+
+ -
+
-
+
+ ++ + +++ +
+
cutedogs
+
+ -
+
+ ++ + +++ +
+
charlieangelo
+
+ -
+
+ ++ + +++ +
+
+ makeupbymariam +
+
+ -
+
+ ++ + + +++ +
+
+ angelicaskylar +
+
+ -
+
+ ++ + +++ +
+
+ girlwithapencil +
+
+ -
+
+ ++ + +++ +
+
yogaemilia
+
+ -
+
+ ++ + +++ +
+
andy_91
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @tigerlily
+
+
+
+
+
+
+
+
+
+
+
+ ${postData.title}
+
+
+
+ + ${postData.body} + ${postData.tags} +
+
+
+
+
+
+ + Posted:${postData.created} +
+ +