Merge pull request #254 from deaaprizal/dev

fixing homepage ui

lang/en/pagination.php

@@ -13,7 +13,7 @@
     |
     */
 
-    'previous' => '« Previous',
-    'next' => 'Next »',
+    'previous' => 'First &nbsp; <',
+    'next' => '> &nbsp; Latest',
 
 ];

resources/js/Components/Dashboard/CreatePost.jsx

@@ -109,7 +109,7 @@ const CreatePost = ({ props }) => {
           {imagePreview &&
             <div className="image-full pb-4"><img src={imagePreview} /></div>
           }
-          <input type="file" name="image" accept="image/*" onChange={(e) => handleImagePost(e.target.files[0])} />
+          <input className="p-4 w-full border border-spacing-1" type="file" name="image" accept="image/*" onChange={(e) => handleImagePost(e.target.files[0])} />
         </div>
         <i>{textTagged[0]}</i>
         <div className="relative w-full rounded-lg border-4 p-2 lg:w-1/2">

resources/js/Components/Homepage/DarkToggle.jsx

@@ -1,4 +1,4 @@
-import {useEffect} from "react";
+import { useEffect } from "react";
 
 const DarkToggle = () => {
   useEffect(() => {

resources/js/Components/Homepage/Paginate.jsx

@@ -1,18 +1,18 @@
-import {Link} from "@inertiajs/inertia-react";
+import { Link } from "@inertiajs/inertia-react";
 import React from "react";
 
-export default function Paginate({meta}) {
+export default function Paginate({ meta }) {
   return (
-    <div className="flex flex-wrap gap-2 py-8 px-2">
+    <div className="flex flex-wrap gap-4 w-full justify-center py-8 px-2">
       {meta.links.map((link, key) =>
         link.url == null ? (
-          <span key={key} className="text-gray-500" dangerouslySetInnerHTML={{__html: link.label}} />
+          <span key={key} className="text-gray-500" dangerouslySetInnerHTML={{ __html: link.label }} />
         ) : (
           <Link
             key={key}
             className={`${link.active ? "rounded-lg bg-white px-3 py-1 text-blue-500 shadow" : ""}`}
             href={link.url || ""}
-            dangerouslySetInnerHTML={{__html: link.label}}
+            dangerouslySetInnerHTML={{ __html: link.label }}
           />
         )
       )}

resources/js/Components/Homepage/PostList.jsx

@@ -102,7 +102,7 @@ export default function PostList(props) {
         <NotificationAlert message={props.notif} />
       </RenderIfTrue>
       <div className="card-body p-6" data-aos="flip-left" data-aos-duration="500">
-        <p className="cursor-default break-all text-2xl font-bold">{props.posts.description}</p>
+        <p className="cursor-default break-normal break-words text-xl">{props.posts.description}</p>
         <div className="flex flex-row border-b-4 border-b-secondary py-2 dark:border-b-slate-400">
           <div className="flex basis-1/2 items-end justify-start">
             <div className="cursor-default break-normal text-xs">posted {formatTime(props.posts.created_at)}</div>
@@ -125,14 +125,13 @@ export default function PostList(props) {
             </div>
           </div>
         </div>
-
         <div className="bg-base-200">
           {props.comments.map((comment, i) => {
             return (
               <div
                 className="flex flex-col border-b-2 border-b-secondary p-3 dark:border-b-slate-500 dark:bg-slate-800 dark:text-white"
                 key={i}>
-                <div className="text-md font-mono font-bold">{comment.description}</div>
+                <div className="text-md font-mono break-words break-normal">{comment.description}</div>
                 <Link
                   href={`/author/${comment.commentartor}`}
                   as="div"
@@ -158,6 +157,7 @@ export default function PostList(props) {
           })}
         </div>
       </div>
+      <div className="divider" />
       <div className="flex items-center justify-start gap-2 px-2 py-2 text-base-100 sm:px-10">
         <button
           onClick={() => likePost(props.posts.id)}

resources/js/Components/Homepage/PostsListImaged.jsx

@@ -0,0 +1,70 @@
+import { formatTime } from "@/utils/jsHelper";
+import { Link } from "@inertiajs/inertia-react";
+
+const noPosts = () => {
+  return (
+    <div className="text-center">
+      <h6 className="font-bold">
+        <progress className="progress w-56"></progress>
+      </h6>
+    </div>
+  );
+};
+
+const isPostsWithImage = (posts, from) => {
+  return posts.filter(post => post.image !== null).map((post, i) => {
+    let more = false;
+    let desc = post.description
+    if (desc.length > 60) {
+      desc = desc.slice(0, 60)
+      more = true
+    }
+    return <Link
+      href={`/post/${post.id}`} method="get" as="div" className="flex" key={i}>
+      <div className="z-0 card bg-base-100 shadow-xl w-full max-h-72 image-full">
+        <figure><img src={`/storage/images/posts/${post.image}`} alt="Post Image" height={200} width={200} /></figure>
+        <div className="card-body w-80">
+          {post.hashtag &&
+            <Link className="card-title" as="a" href={`/?tag=${post.hashtag}`}>
+              <div className="badge badge-primary text-primary-content">#{post.hashtag}</div>
+            </Link>
+          }
+          <p className="text-sm">{desc} {more && <span className="italic text-sm text-white break-words break-normal"> ...lebih lengkap</span>}</p>
+          <div className="flex flex-row flex-wrap gap-2 p-2 absolute bottom-0 left-0 bg-opacity-70 text-white bg-black">
+            <Link href={`/author/${post.author}`} as="button" method="get" className="avatar">
+              <div className="w-6 rounded-full">
+                {from?.page == "author" ? (
+                  <img
+                    src={
+                      from.author_image !== null
+                        ? `/storage/images/${from.author_image}`
+                        : "/storage/images/defaultavatar.png"
+                    }
+                  />
+                ) : (
+                  <img
+                    src={
+                      post.users && post.users.image !== null
+                        ? `/storage/images/${post.users.image}`
+                        : "/storage/images/defaultavatar.png"
+                    }
+                  />
+                )}
+              </div>
+            </Link>
+            <div className="badge badge-outline">{post.author}</div>
+            <p className="break-words break-normal text-2xs">
+              posted {formatTime(post.updated_at)} |{" "}
+              {post.comments && post.comments.length > 0 ? post.comments.length : "no"} comment
+            </p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  })
+}
+
+export default function PostsListImage(props) {
+  if (!props.posts || !props.posts.length) return noPosts();
+  return isPostsWithImage(props.posts, props.from)
+}

resources/js/Components/Homepage/PostsLists.jsx

@@ -12,35 +12,32 @@ const noPosts = () => {
 };
 
 const isPosts = (posts, from) => {
-  return posts.map((post, i) => {
+  return posts.filter((post) => post.image == null).map((post, i) => {
     let more = false;
-    let desc_no_image = post.description
-    let desc_with_image = post.description
-    if (post.image && post.description.length > 20) {
-      desc_with_image = desc_with_image.slice(0, 20)
-      more = true
-    }
-    if (!post.image && post.description.length > 150) {
-      desc_no_image = desc_no_image.slice(0, 150)
+    let desc = post.description
+    if (desc.length > 150) {
+      desc = desc.slice(0, 150)
       more = true
     }
     return (
       <Link
         href={`/post/${post.id}`} method="get" as="div"
         key={i}
-        className="card-normal cursor-pointer md:py-2 md:px-1 bg-base-100 transition-all duration-300  dark:bg-slate-700 dark:text-white dark:hover:bg-gray-600 w-full md:w-1/2 md:h-full">
-        {post.image &&
-          <img src={`/storage/images/posts/${post.image}`} className="relative pt-2 md:pt-0 block md:max-h-72 w-auto h-auto min-w-full" />
-        }
-        <div className={`flex flex-col shadow-md p-4 justify-between h-auto hover:-translate-y-1 hover:bg-primary hover:text-primary-content`}>
-          <div className="text-md break-words break-all">
-            {post.image ? desc_with_image : desc_no_image}
+        className="card cursor-pointer md:py-2 md:px-1 bg-base-100 transition-all duration-300  dark:bg-slate-700 dark:text-white dark:hover:bg-gray-600 w-full md:w-full">
+        <div className={`card-body rounded-md flex flex-col shadow-md m-2 md:m-0 p-4 justify-between hover:-translate-y-1 hover:bg-primary hover:text-primary-content`}>
+          {post.hashtag &&
+            <Link className="card-title" as="a" href={`/?tag=${post.hashtag}`}>
+              <div className="badge badge-primary text-primary-content">#{post.hashtag}</div>
+            </Link>
+          }
+          <div className="text-xl break-words break-normal">
+            {desc}
             {more && <span className="italic text-sm text-primary"> ...lebih lengkap</span>}
           </div>
 
           <div className="mt-2 py-2 flex flex-row items-center">
             <Link href={`/author/${post.author}`} as="button" method="get" className="avatar">
-              <div className="w-6 rounded-full">
+              <div className="w-8 rounded-full">
                 {from?.page == "author" ? (
                   <img
                     src={
@@ -60,9 +57,9 @@ const isPosts = (posts, from) => {
                 )}
               </div>
             </Link>
-            <div className="ml-2 text-2xs">
+            <div className="ml-2 text-sm">
               <p className="leading-none dark:text-white">{post.author}</p>
-              <p className="break-normal">
+              <p className="break-normal break-words">
                 posted {formatTime(post.updated_at)} |{" "}
                 {post.comments && post.comments.length > 0 ? post.comments.length : "no"} comment
               </p>

resources/js/Layouts/Guest.jsx

@@ -1,13 +1,13 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import Dropdown from "@/Components/Default/Dropdown";
 import NavLink from "@/Components/Default/NavLink";
 import ResponsiveNavLink from "@/Components/Default/ResponsiveNavLink";
-import {MdLogin, MdDashboard, MdOutlineHome, MdSearch} from "react-icons/md";
-import {FaGithub} from "react-icons/fa";
-import {Link} from "@inertiajs/inertia-react";
+import { MdLogin, MdDashboard, MdOutlineHome, MdSearch } from "react-icons/md";
+import { FaGithub } from "react-icons/fa";
+import { Link } from "@inertiajs/inertia-react";
 import DarkToggle from "@/Components/Homepage/DarkToggle";
 
-export default function Guest({children, auth}) {
+export default function Guest({ children, auth }) {
   const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
 
   return (
@@ -152,7 +152,7 @@ export default function Guest({children, auth}) {
         </div>
       </nav>
       <main>{children}</main>
-      <div className="fixed bottom-24 right-6 lg:right-6 lg:bottom-6">
+      <div className="fixed bottom-16 right-2 lg:right-6 lg:bottom-6">
         <DarkToggle />
       </div>
     </div>

resources/js/Pages/Author.jsx

@@ -1,14 +1,27 @@
-import React from "react";
-import {Head} from "@inertiajs/inertia-react";
+import React, { useEffect, useState } from "react";
+import { Head } from "@inertiajs/inertia-react";
 import PostsList from "@/Components/Homepage/PostsLists";
-import Paginate from "@/Components/Homepage/Paginate";
+import PostsListImaged from "@/Components/Homepage/PostsListImaged";
 import Guest from "@/Layouts/Guest";
 
 export default function AuthorPage(props) {
   const thisData = {
     page: "author",
     author_image: props.author_image,
   };
+  const { data: posts } = props.posts;
+
+  const [postImageLength, setPostImageLength] = useState(0);
+  useEffect(() => {
+    let isImagedPost = true
+    if (isImagedPost) {
+      posts.filter(post => post.image !== null).map((post, i) => {
+        setPostImageLength(i);
+      })
+    }
+    return () => { isImagedPost = false };
+  }, [posts])
+
   return (
     <Guest auth={props.auth.user}>
       <Head title={props.title} />
@@ -27,15 +40,41 @@ export default function AuthorPage(props) {
           </div>
           <h1 className="text-xl font-bold dark:text-white">✨ {props.author} ✨</h1>
         </div>
-        <div
-          className="flex flex-col items-center justify-center gap-6 p-4 lg:flex-row lg:flex-wrap lg:items-stretch"
-          data-aos="fade-up"
-          data-aos-duration="1500">
-          <PostsList posts={props.posts.data} from={thisData} />
-        </div>
-        <div className="mb-20 flex items-center justify-center md:mb-7" data-aos="fade-up" data-aos-duration="500">
-          <Paginate meta={props.posts} />
-        </div>
+        {posts.length > 0 ? (
+          <div className="py-2 px-2 w-full lg:w-2/3 xl:w-5/6 lg:p-0 lg:py-2 mx-auto">
+            {postImageLength > 0 &&
+              <>
+                <h1 className="font-sans font-bold text-2xl border-b-2 mb-4">Latest Image Posts</h1>
+                <div className="flex flex-row gap-2 overflow-x-auto">
+                  <PostsListImaged posts={posts} from={thisData} />
+                </div>
+              </>
+            }
+            <h1 className="font-sans font-bold text-2xl px-2 mt-4 border-b-2 mb-4">Readable Posts</h1>
+            <div className="flex flex-row flex-wrap place-items-end gap-1 bg-base-200 md:gap-0 md:bg-base-100">
+              <PostsList posts={posts} from={thisData} />
+            </div>
+          </div>
+        ) : (
+          <div className="flex justify-center pt-5">
+            <div className="alert alert-warning w-11/12 md:w-1/3 rounded-sm text-slate-900 shadow-lg">
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  className="h-6 w-6 flex-shrink-0 stroke-current">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                <span>Belum ada postingan yang tersedia</span>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </Guest>
   );

resources/js/Pages/Dashboard/MyPosts.jsx

@@ -7,6 +7,7 @@ import { formatTime } from "@/utils/jsHelper";
 import { Inertia } from "@inertiajs/inertia";
 import NotificationAlert from "@/Components/Default/NotificationAlert";
 import { TbTrashX } from "react-icons/tb";
+import { FaArrowAltCircleUp } from "react-icons/fa";
 
 export default function MyPosts(props) {
   const { flash } = usePage().props;
@@ -44,6 +45,7 @@ export default function MyPosts(props) {
         </div>
       }>
       <Head title="Dashboard" />
+      <div className="fixed bottom-16 z-10 right-2 w-10 h-10 flex justify-center items-center" onClick={() => window.scrollTo(0, 0)}><FaArrowAltCircleUp size={24} /></div>
       <div className="lg:items-strech flex flex-col items-center justify-center gap-6 py-6 px-4 lg:flex-row lg:flex-wrap">
         {showNotif && <NotificationAlert message={flash.message} />}
         {props.data.length > 0 ? (