Merge pull request #25 from CodeURJC-DAW-2022-23/feat/home

feat: home

back/src/main/java/net/daw/alist/controllers/PostController.java

@@ -0,0 +1,48 @@
+package net.daw.alist.controllers;
+
+import net.daw.alist.models.Post;
+import net.daw.alist.models.User;
+import net.daw.alist.services.PostService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.data.domain.Page;
+import org.springframework.security.core.Authentication;
+
+@Controller
+public class PostController {
+
+  @Autowired
+  private PostService postService;
+
+  @GetMapping({"/","/followed-users/"})
+  public String home(Model model) {
+    return "feed";
+  }
+
+  @GetMapping("/posts")
+  public String getNewPosts(Model model, @RequestParam int page) {
+
+    Page<Post> newPage = postService.getPosts(page);
+
+    model.addAttribute("posts", newPage);
+
+    return "post";
+  }
+
+  @GetMapping("/followed-users/posts")
+  public String getFollowedUsersPosts(Model model, Authentication authentication, @RequestParam int page) {
+
+    User currentUser = (User) authentication.getPrincipal();
+
+    Page<Post> starredPost = postService.getStarredPosts(page,currentUser.getId().intValue());
+
+    model.addAttribute("posts", starredPost);
+
+    return "post";
+  }
+
+
+}

back/src/main/java/net/daw/alist/models/User.java

@@ -113,7 +113,7 @@ public void setImage(String imagePath) throws IOException, SQLException {
       imagePath = "static/images/notFound.jpg";
     }
     this.image = pathToImage(imagePath);
-    this.imagePath = imagePath.replace("static", "");
+    this.imagePath = imagePath.replace("static","");
   }
 
   public void setFollowing(List<User> following) {
@@ -231,4 +231,8 @@ public void unFollow(User user) {
     }
   }
 
+  public Long getId() {
+    return id;
+  }
+
 }

back/src/main/java/net/daw/alist/repositories/PostRepository.java

@@ -1,7 +1,14 @@
 package net.daw.alist.repositories;
 
 import net.daw.alist.models.Post;
+
+
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 
 public interface PostRepository extends JpaRepository<Post, Long> {
+  @Query(value="select * from post where post.author_id in (select following_id from user_following where user_following.followers_id=?1) order by post.date desc", nativeQuery=true)
+  Page<Post> findPostsByFollows(int user_id,Pageable page); 
 }

back/src/main/java/net/daw/alist/security/WebSecurityConfig.java

@@ -31,7 +31,8 @@ protected void configure(HttpSecurity http) throws Exception {
                 .authorizeRequests()
                     .antMatchers("/").permitAll()
                     .antMatchers("/admin-panel").hasAnyRole("ADMIN")
-                    .antMatchers("/profile").hasAnyRole("USER", "ADMIN")
+                .antMatchers("/profile").hasAnyRole("USER", "ADMIN")
+                    .antMatchers("/followed-users/").hasAnyRole("USER", "ADMIN")
                     .antMatchers("/create-list").hasAnyRole("USER", "ADMIN")
                     .antMatchers("/create").hasAnyRole("USER", "ADMIN")
                     .antMatchers("/register").permitAll()

back/src/main/java/net/daw/alist/services/DatabaseInitializer.java

@@ -108,7 +108,7 @@ public void init() throws IOException, SQLException {
             topicRepository.save(programming);
             topicRepository.save(f1);
 
-            PostItem attackOnTitan = new PostItem("Attack on Titan", "static/images/example/cr7.jpg");
+            PostItem attackOnTitan = new PostItem("Attack on Titan", "static/images/example/attackOnTitan.jpg");
             PostItem fullMetalAlchemist = new PostItem("Fullmetal Alchemist", "static/images/example/fullmetalAlchemist.jpg");
             PostItem inazumaEleven = new PostItem("Inazuma Eleven", "static/images/example/inazumaEleven.jpg");
             PostItem myLittlePony = new PostItem("My Little Pony", "static/images/example/myLittlePony.jpg");

back/src/main/java/net/daw/alist/services/PostService.java

@@ -4,17 +4,27 @@
 import net.daw.alist.models.Post;
 import net.daw.alist.repositories.PostRepository;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
 import org.springframework.stereotype.Service;
 
 @Service
 @AllArgsConstructor
 public class PostService {
 
+    private final int pageSize = 2;
     @Autowired
-    PostRepository postRepository;
+    private final PostRepository postRepository;
 
+    public Page<Post> getPosts(int pageNumber) {
+        return postRepository.findAll(PageRequest.of(pageNumber, pageSize));
+    }
+
+    public Page<Post> getStarredPosts(int pageNumber, int user_id) {
+        return postRepository.findPostsByFollows(user_id,PageRequest.of(pageNumber,pageSize));
+    }
+
     public void save(Post post) {
         postRepository.save(post);
     }
-
 }

back/src/main/resources/static/scripts/load-data.js

@@ -0,0 +1,35 @@
+var page = 0;
+var url;
+
+$(document).ready(() => {
+  // fetch 1st page
+
+  url = window.location.href + 'posts';
+  getData(url, page);
+
+  if ($('.post-container').length < 2) showBottomReached();
+});
+
+// fetch more posts when bottom is reached
+$(window).scroll(function () {
+  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
+    page++;
+    $('.spinner-border').removeClass('invisible').addClass('visible');
+    getData(url, page);
+  }
+});
+
+// fetch data
+const getData = (url, page) => {
+  $.get(url, { page }, data => {
+    if (data == '') showBottomReached();
+
+    $('.post-container').append(data);
+    $('.spinner-border').removeClass('visible').addClass('invisible');
+  });
+};
+
+// show message: No more posts :(
+const showBottomReached = () => {
+  $('.no-posts').removeClass('invisible').addClass('visible');
+};

back/src/main/resources/static/styles/home.css

@@ -1,4 +1,3 @@
 .feed-container {
-  height: 100vh;
-  margin: 0 25rem;
+  margin: 0 1rem;
 }

back/src/main/resources/templates/comment.html

@@ -0,0 +1,13 @@
+<div class="commentSection mb-3">
+  <div class="writeComment p-3">
+    <div class="d-flex flex-row">
+      <img src="https://github.com/twbs.png" alt="Profile Photo" width="40" height="40"
+        class="own-comment-image rounded-circle flex-shrink-0">
+      <textarea class="commentBox form-control ml-1 shadow-none textarea"></textarea>
+    </div>
+    <div class="mt-2 d-flex justify-content-center">
+      <button class="btn btn-primary btn-sm shadow-none" type="button">Post comment</button>
+    </div>
+  </div>
+
+</div>

back/src/main/resources/templates/home.html → back/src/main/resources/templates/feed.html

@@ -13,13 +13,27 @@
   <link rel="stylesheet" type="text/css" href="/styles/bootstrap/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="/styles/styles.css">
   <link rel="stylesheet" type="text/css" href="/styles/home.css">
+  <link rel="stylesheet" type="text/css" href="/styles/top-list.css">
+  <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
+    crossorigin="anonymous"></script>
   <script src="/scripts/bootstrap/bootstrap.bundle.min.js"></script>
+  <script src="/scripts/load-data.js"></script>
   <title>AList</title>
 </head>
 
 <body>
   {{>navbar}}
-  <div class="feed-container pt-5"></div>
+  <div class="feed-container pt-3">
+    <div class="post-container">
+      {{>post}}
+    </div>
+    <div class="text-center my-5">
+      <div class="spinner-border text-white invisible" role="status">
+      </div>
+      <div class="no-posts text-white invisible">No more posts :(
+      </div>
+    </div>
+  </div>
 </body>
 
 </html>

back/src/main/resources/templates/navbar.html

@@ -25,7 +25,7 @@
             <i class="searchBtn fa-solid fa-magnifying-glass"></i>
           </button>
         </form>
-        <a>
+        <a href="/followed-users/">
           <i class="fa-regular fa-heart fa-xl"></i>
         </a>
         <a href="/profile">

back/src/main/resources/templates/post.html

@@ -0,0 +1,45 @@
+{{#posts}}
+<div class="post mt-3 mb-3">
+  <div class="postInfo border bg-white d-flex gap-3 py-3">
+    <img src={{author.imagePath}} alt="Profile picture" width="75" height="75"
+      class="profileImg rounded-circle flex-shrink-0">
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <div class="d-flex">
+          {{#topics}}
+          <h6 class="topics pe-1">
+            <a class="topic" href="#">@{{name}}</a>
+          </h6>
+          {{/topics}}
+        </div>
+        <a class="OP text-black text-decoration-none" href="#">
+          {{author.username}}
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="list-group m-auto">
+    <div class="bg-white text-black d-flex gap-3 py-3 text-center justify-content-*-center align-items-center"
+      aria-current="true">
+      <div class="top w-75 m-auto">
+        <h2 class="topName">{{title}}</h2>
+        <ol class="m-auto p-0 w-100">
+          {{#items}}
+          <li>
+            {{description}}
+            <img src={{imagePath}} alt="image" width="45" height="45" class="itemImage rounded-circle">
+          </li>
+          {{/items}}
+        </ol>
+      </div>
+    </div>
+    <div class="list-group-item d-flex">
+      <div class="w-auto m-auto">
+        <img class="upvoteIcon" src="/images/upvoteIcon.svg" alt="" width="35" height="35">
+        <img class="downvoteIcon" src="/images/downvoteIcon.svg" alt="" width="35" height="35">
+      </div>
+      <img class="shareIcon m-auto" src="/images/shareIcon.svg" alt="" width="35" height="35">
+    </div>
+  </div>
+</div>
+{{/posts}}