Reaperxxxx commited on
Commit
b96f9ee
·
verified ·
1 Parent(s): ee5c484

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +25 -41
index.html CHANGED
@@ -1,53 +1,37 @@
1
  <body>
2
- <div id="posts"></div>
 
 
 
 
 
 
3
  <script>
4
- let page = 0;
5
- const limit = 5;
6
-
7
- async function loadPosts() {
8
- const res = await fetch('/api/posts');
9
- const posts = await res.json();
10
 
11
- const paginatedPosts = posts.slice(page * limit, (page + 1) * limit);
12
- if (paginatedPosts.length === 0) return;
 
 
 
 
 
13
 
14
- const postsContainer = document.getElementById('posts');
15
- paginatedPosts.forEach(post => {
16
- const postHTML = `
17
  <div class="post">
18
- <h3>${post.username}</h3>
19
  <p>${post.caption}</p>
20
  ${post.file ? `<img src="${post.file}" alt="Post Image">` : ''}
21
- <button onclick="followUser('${post.username}')">Follow</button>
22
  </div>
23
- `;
24
- postsContainer.innerHTML += postHTML;
25
- });
26
-
27
- page++;
28
- }
29
-
30
- function followUser(target) {
31
- const username = localStorage.getItem('username');
32
- fetch('/api/follow', {
33
- method: 'POST',
34
- headers: { 'Content-Type': 'application/json' },
35
- body: JSON.stringify({ username, target }),
36
- }).then(res => res.json()).then(data => {
37
- if (data.success) {
38
- alert(`You are now following ${target}!`);
39
- } else {
40
- alert(data.message);
41
- }
42
- });
43
- }
44
-
45
- window.addEventListener('scroll', () => {
46
- if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
47
- loadPosts();
48
  }
49
- });
50
 
51
- loadPosts();
52
  </script>
53
  </body>
 
1
  <body>
2
+ <div class="profile-info">
3
+ <img id="profilePicture" src="" alt="Profile Picture" width="100" height="100">
4
+ <h1 id="username"></h1>
5
+ <p id="followers"></p>
6
+ <p id="following"></p>
7
+ </div>
8
+ <div id="myPosts"></div>
9
  <script>
10
+ async function loadProfile() {
11
+ const username = localStorage.getItem('username');
12
+ const res = await fetch(`/api/user/${username}`);
13
+ const data = await res.json();
 
 
14
 
15
+ if (res.ok) {
16
+ document.getElementById('username').textContent = `@${data.user.username}`;
17
+ document.getElementById('followers').textContent = `${data.user.followers} Followers`;
18
+ document.getElementById('following').textContent = `Following: ${data.user.following?.length || 0}`;
19
+ if (data.user.profilePicture) {
20
+ document.getElementById('profilePicture').src = data.user.profilePicture;
21
+ }
22
 
23
+ const myPosts = document.getElementById('myPosts');
24
+ myPosts.innerHTML = data.posts.map(post => `
 
25
  <div class="post">
 
26
  <p>${post.caption}</p>
27
  ${post.file ? `<img src="${post.file}" alt="Post Image">` : ''}
 
28
  </div>
29
+ `).join('');
30
+ } else {
31
+ alert('Error loading profile.');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
+ }
34
 
35
+ loadProfile();
36
  </script>
37
  </body>