Skip to content

Commit 16f6fa8

Browse files
GustavBoeGustavBoe
committed
Trying to add following feature
1 parent a7ee8e8 commit 16f6fa8

6 files changed

Lines changed: 89 additions & 19 deletions

File tree

‎profile.html‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,7 @@
1313
<title>Still | Profile</title>
1414
</head>
1515
<body>
16-
<header id="desktop-header" class="desktop-header">
17-
<nav>
18-
<a href="./">Global feed <i class="fa-thin fa-globe"></i></a>
19-
<a href="./">Following <i class="fa-thin fa-user-group"></i></a>
20-
<a href="./create.html"
21-
>Create post <i class="fa-thin fa-square-plus"></i
22-
></a>
23-
<a href="./profile.html"
24-
>Profile <i class="fa-thin fa-circle-user"></i
25-
></a>
26-
<a href="./login.html">Login</a>
27-
</nav>
28-
</header>
16+
<header id="desktop-header" class="desktop-header"></header>
2917
<div id="profile-container"></div>
3018
<div id="profile-posts-container"></div>
3119
</body>

‎src/api/apiClient.js‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { getFromLocalStorage } from "..//utils/storage.js";
1+
import { addToLocalStorage, getFromLocalStorage } from "..//utils/storage.js";
22

33
import {
44
NOROFF_API_KEY,
55
SINGLE_URL,
66
PROFILE_URL,
77
PROFILE_POSTS_URL,
8+
FOLLOW_PROFILE_URL,
9+
UNFOLLOW_PROFILE_URL,
810
} from "..//utils/const.js";
911

1012
export async function fetchSinglePost() {
@@ -38,6 +40,26 @@ export async function fetchUser() {
3840
const json = await response.json();
3941
return json.data;
4042
} catch (error) {
43+
window.location.href = "./index.html";
44+
console.log(error);
45+
}
46+
}
47+
export async function addFollowingToLocal() {
48+
try {
49+
const accessToken = getFromLocalStorage("accessToken");
50+
const fetchOptions = {
51+
headers: {
52+
Authorization: `Bearer ${accessToken}`,
53+
"X-Noroff-API-Key": NOROFF_API_KEY,
54+
},
55+
};
56+
const response = await fetch(LOGGEDIN_PROFILE_URL, fetchOptions);
57+
const json = await response.json();
58+
const following = json.data.following;
59+
addToLocalStorage("following", following);
60+
return json.data;
61+
} catch (error) {
62+
window.location.href = "./index.html";
4163
console.log(error);
4264
}
4365
}
@@ -54,6 +76,43 @@ export async function fetchUsersPosts() {
5476
const json = await response.json();
5577
return json.data;
5678
} catch (error) {
79+
window.location.href = "./index.html";
5780
console.log(error);
5881
}
5982
}
83+
export async function followUser() {
84+
try {
85+
const accessToken = getFromLocalStorage("accessToken");
86+
const fetchOptions = {
87+
method: "PUT",
88+
headers: {
89+
Authorization: `Bearer ${accessToken}`,
90+
"X-Noroff-API-Key": NOROFF_API_KEY,
91+
},
92+
};
93+
const response = await fetch(FOLLOW_PROFILE_URL, fetchOptions);
94+
const json = response.json();
95+
return json;
96+
} catch (error) {
97+
alert("Could not follow user, please return to homepage");
98+
console.log(error[0].message);
99+
}
100+
}
101+
export async function unfollowUser() {
102+
try {
103+
const accessToken = getFromLocalStorage("accessToken");
104+
const fetchOptions = {
105+
method: "PUT",
106+
headers: {
107+
Authorization: `Bearer ${accessToken}`,
108+
"X-Noroff-API-Key": NOROFF_API_KEY,
109+
},
110+
};
111+
const response = await fetch(UNFOLLOW_PROFILE_URL, fetchOptions);
112+
const json = response.json();
113+
return json;
114+
} catch (error) {
115+
alert("Could not follow user, please return to homepage");
116+
console.log(error[0].message);
117+
}
118+
}

‎src/api/login.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { addToLocalStorage, logOut } from "..//utils/storage.js";
22
import { AUTH_LOGIN_URL, loginForm, logoutButton } from "..//utils/const.js";
33
import { createHeader } from "../components/headerFooterLoader.js";
4+
import { addFollowingToLocal } from "./apiClient.js";
45

56
createHeader();
67
async function loginUser(userDetails) {
@@ -28,6 +29,7 @@ async function onLoginFormSubmit(event) {
2829
const formData = new FormData(event.target);
2930
const formFields = Object.fromEntries(formData);
3031
await loginUser(formFields);
32+
3133
window.location.href = "./index.html";
3234
}
3335

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
loggedOutText,
88
} from "./utils/const.js";
99
import { createHeader } from "./components/headerFooterLoader.js";
10+
import { addFollowingToLocal } from "./api/apiClient.js";
1011

1112
async function fetchPosts() {
1213
try {
@@ -76,6 +77,7 @@ async function main() {
7677
try {
7778
const posts = await fetchPosts();
7879
generatePosts(posts);
80+
await addFollowingToLocal();
7981
} catch (error) {
8082
console.log(error);
8183
alert("Something went wrong, please return later!");

‎src/profile.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
profileContainer,
55
profilePostsContainer,
66
} from "./utils/const.js";
7-
import { fetchUsersPosts } from "./api/apiClient.js";
7+
import { fetchUsersPosts, followUser, unfollowUser } from "./api/apiClient.js";
88
import { createHeader } from "./components/headerFooterLoader.js";
99

1010
async function renderProfile(profile) {
@@ -19,16 +19,31 @@ async function renderProfile(profile) {
1919

2020
const profilePageUsername = document.createElement("h2");
2121
profilePageUsername.textContent = profile.name;
22-
22+
const followButton = document.createElement("button");
23+
followButton.textContent = "Follow";
24+
followButton.addEventListener("click", followUser);
25+
const unfollowButton = document.createElement("button");
26+
unfollowButton.textContent = "Unfollow";
27+
unfollowButton.addEventListener("click", unfollowUser);
28+
if (getFromLocalStorage("following".includes(profile.name))) {
29+
followButton.style.display = "none";
30+
} else {
31+
unfollowButton.style.display = "none";
32+
}
2333
const profilePageBio = document.createElement("p");
2434
profilePageBio.textContent = profile.bio;
2535

26-
console.log(profile);
27-
36+
if (profile.following === undefined) {
37+
console.log("Doesnt follow anybody");
38+
} else {
39+
console.log(profile.following);
40+
}
2841
profileContainer.append(
2942
profilePageBanner,
3043
profilePageImage,
3144
profilePageUsername,
45+
followButton,
46+
unfollowButton,
3247
profilePageBio
3348
);
3449
}

‎src/utils/const.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,13 @@ export const deleteButton = document.getElementById("delete-button");
4848
export const profileQueryString = window.location.search;
4949
export const profileUrlParams = new URLSearchParams(queryString);
5050
export const PROFILE_PARAMETER_NAME = urlParams.get("name");
51+
5152
export const PROFILE_URL = `${BASE_API_URL}/social/profiles/${PROFILE_PARAMETER_NAME}`;
53+
export const LOGGEDIN_PROFILE_URL = `${BASE_API_URL}/social/profiles/${profileName}?_following=true`;
54+
export const FOLLOW_PROFILE_URL = `${PROFILE_URL}/follow`;
55+
export const UNFOLLOW_PROFILE_URL = `${PROFILE_URL}/unfollow`;
5256

53-
export const PROFILE_POSTS_URL = `${PROFILE_URL}?_posts=true`;
57+
export const PROFILE_POSTS_URL = `${PROFILE_URL}?_posts=true&_following=true`;
5458
export const profileContainer = document.getElementById("profile-container");
5559
export const profilePostsContainer = document.getElementById(
5660
"profile-posts-container"

0 commit comments

Comments
 (0)