Skip to content

Commit cf3a946

Browse files
DangHoangGeoDangHoangGeo
authored
Merge pull request #29 from christian-japan-devs/design
update groups, posts api
2 parents d6e8043 + 47d2bfa commit cf3a946

File tree

22 files changed

+388
-176
lines changed

22 files changed

+388
-176
lines changed

‎design/components/ReadMoreAndLess.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import {useState,useEffect} from 'react'
22

33
type Props = {
4-
content:string
5-
children?: React.ReactNode
4+
content:string|undefined,
5+
excerpt?:string
66
}
77

8-
const ReadMoreAndLess = ({ content, children }: Props) => {
8+
const ReadMoreAndLess = ({ content,excerpt }: Props) => {
99
const [isReadMoreShown, setReadMoreShown] = useState(false)
1010
//const [contentEle, setContentEle] = useState<HTMLElement>()
11+
/**
1112
useEffect(()=>{
1213
//const conEle = document.getElementById("post_content")
1314
//const conElement: HTMLElement = conEle as HTMLElement;
1415
//setContentEle(conElement)
15-
const conEle = document.getElementById("post_content_sub")
16-
if(!conEle){
17-
removeChildren()
16+
//const conEle = document.getElementById("post_content_sub")
17+
if(conEle){
18+
/ removeChildren()
1819
}
1920
},[])
2021
@@ -33,7 +34,7 @@ const ReadMoreAndLess = ({ content, children }: Props) => {
3334
child = newEle.getElementById('post_content_sub')
3435
}
3536
if (child?.hasChildNodes()) {
36-
while (child.childElementCount>3) {
37+
while (child.childElementCount>2) {
3738
const lastChild = child.lastChild
3839
if(lastChild){
3940
child.removeChild(lastChild)
@@ -55,20 +56,24 @@ const ReadMoreAndLess = ({ content, children }: Props) => {
5556
conEle?.appendChild(child)
5657
}
5758
}
58-
59+
*/
5960
const toggleBtn = () => {
6061
setReadMoreShown(prevState => !prevState)
62+
/*
6163
if(!isReadMoreShown){
6264
showMoreChildren()
6365
}else{
6466
removeChildren()
65-
}
67+
}*/
6668
}
6769

6870
return (
6971
<div className="read-more-and-less space-y-4">
70-
{children}
71-
<div id="post_content" className="space-y-4"></div>
72+
{
73+
isReadMoreShown?
74+
<div id="post_content" className="space-y-2" dangerouslySetInnerHTML={{ __html: content?content:"" }} />:
75+
<div id="excerpt" className="space-y-4">{excerpt}</div>
76+
}
7277
<button id="continue"
7378
type="button"
7479
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"

‎design/components/card/PostView.tsx‎

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,95 @@
11
import type { NextPage } from 'next'
2+
import {useState,useEffect} from 'react'
23
import Link from 'next/link'
34
import PostType from '../../types/post'
45
import {getDateFromDateByHour} from '../../lib/helper'
56
import ReadMoreAndLess from '../ReadMoreAndLess'
67

78
type Props = {
8-
post: PostType
9+
post: PostType | undefined
910
readMore?: boolean
1011
}
1112

1213
const PostView: NextPage<Props> = ({post,readMore}) => {
14+
const [isReadMoreShown, setReadMoreShown] = useState(false)
15+
const toggleBtn = () => {
16+
setReadMoreShown(prevState => !prevState)
17+
}
18+
if(post == undefined){
19+
return (<></>)
20+
}else{
1321
return(
1422
<div className="relative px-2 lg:px-8">
1523
<div className="mx-auto max-w-5xl pt-8 pb-8 sm:pt-18 sm:pb-18">
1624
<div className="md:px-16 md:py-4 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700">
17-
{post.image_url&&
18-
<Link href={"/chia-se/thu-muc-vu/"+post.slug} legacyBehavior>
25+
{post.post_meta.image_url?
26+
<Link href={"/chia-se/thu-muc-vu/"+post.post_meta.slug} legacyBehavior>
1927
<a >
20-
<img className="rounded-t-lg" src={post.image_url} alt={post.title} />
28+
<img className="rounded-t-lg" src={post.post_meta.image_url} alt={post.post_meta.title} />
2129
</a>
22-
</Link>
30+
</Link>:""
2331
}
2432
<div className="p-4">
2533
<h1 className="text-3xl font-serif font-bold tracking-tight sm:text-center sm:text-4xl">
26-
{post.title}
34+
{post.post_meta.title}
2735
</h1>
2836

2937
<div className="mt-2 flex items-center space-x-4">
3038
<div className="flex-shrink-0">
31-
<img className="w-8 h-8 rounded-full" src={post.author.image} alt={post.title}/>
39+
<img className="w-8 h-8 rounded-full" src={post.post_meta.author.image} alt={post.post_meta.title}/>
3240
</div>
3341
<div className="flex-1 min-w-0">
3442
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
35-
{post.author.saint_name} {post.author.full_name}
43+
{post.post_meta.author.saint_name} {post.post_meta.author.full_name}
3644
</p>
3745
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
38-
{post.author.email}
46+
{post.post_meta.author.email}
3947
</p>
4048
</div>
4149
</div>
42-
<span className="text-sm mt-4 text-gray-500 dark:text-gray-400">{getDateFromDateByHour(post.created_on,0)}</span>
43-
<ReadMoreAndLess content={'<div id="post_content_sub" className="space-y-2">'+post.content+'</div>'}>
44-
</ReadMoreAndLess>
50+
<span className="text-sm mt-4 text-gray-500 dark:text-gray-400">{getDateFromDateByHour(post.post_meta.created_on,0)}</span>
51+
{post.post_meta.audio_link&&
52+
<div className="mt-8 justify-center items-start h-full max-h-full w-full max-w-full border-gray-200 dark:border-gray-700">
53+
<iframe className="w-full h-full" src={post.post_meta.audio_link} title="Vietcatholicjp"></iframe>
54+
</div>
55+
}
56+
<div className="my-2">
57+
{
58+
isReadMoreShown?
59+
post.content.map((chapter,idx)=>(
60+
<div key={idx}>
61+
<h2 className="relative group my-4 text-lg md:text-xl font-bold">{chapter.chapter_title}
62+
<span id={chapter.slug} className="absolute -top-[140px]"></span>
63+
<a className="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100" href="#leading-paragraph" aria-label="Link to this section: Leading paragraph">
64+
#
65+
</a>
66+
</h2>
67+
<div className="space-y-2" dangerouslySetInnerHTML={{ __html: chapter.content?chapter.content:"" }} />
68+
</div>
69+
)):<div>
70+
<h2 className="relative group my-4 text-lg md:text-xl font-bold">{post.content[0].chapter_title}
71+
<span id={post.content[0].slug} className="absolute -top-[140px]"></span>
72+
<a className="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100" href="#leading-paragraph" aria-label="Link to this section: Leading paragraph">
73+
#
74+
</a>
75+
</h2>
76+
<div className="space-y-2" dangerouslySetInnerHTML={{ __html: post.content[0].content?post.content[0].content:"" }} />
77+
</div>
78+
}
79+
</div>
80+
<button id="continue"
81+
type="button"
82+
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
83+
onClick={toggleBtn}
84+
>
85+
{isReadMoreShown?'Thu nhỏ':'Đọc tiếp'}
86+
</button>
4587
</div>
4688
</div>
4789
</div>
4890
</div>
4991
)
92+
}
5093
}
5194

5295
export default PostView

‎design/components/card/groupPreview.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ export default function GroupPreviewCard({group_preview}:PostPreviewProps){
1818
<h2 className="card-title">
1919
{group_preview.name}
2020
</h2>
21-
<p>{group_preview.description}</p>
2221
<div className="card-actions justify-end">
23-
<div className="badge badge-outline">{group_preview.area}</div>
24-
<div className="badge badge-outline">{group_preview.province}</div>
22+
<div className="badge badge-outline">{group_preview.province?.name}</div>
23+
<div className="badge badge-outline">{group_preview.church?.name}</div>
2524
</div>
2625
</div>
2726
</div>

‎design/components/card/noticesPreviewSide.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Link from 'next/link'
2+
3+
import {NoticeType} from '../../types/notice'
4+
import {getDateFromDateByHour} from '../../lib/helper'
5+
6+
type PostPreviewProps = {
7+
posts_preview: NoticeType
8+
}
9+
10+
export default function NoticeSidePreviewCard({ props }: { props: PostPreviewProps }){
11+
return (
12+
<div className="w-48 md:w-64 bg-base-100 shadow border rounded-xl">
13+
<Link href={"/chia-se/chi-tiet/"+(props.posts_preview.slug)} legacyBehavior>
14+
<a>
15+
<div className="p-4">
16+
<h2 className="card-title text-gray-600 dark:text-gray-200">{props.posts_preview.title}</h2>
17+
<div className="flex mt-2 items-center space-x-4">
18+
<div className="flex-shrink-0">
19+
<img className="w-8 h-8 rounded-full" src={props.posts_preview.author.image} alt={props.posts_preview.title}/>
20+
</div>
21+
<div className="flex-1 min-w-0">
22+
<p className="text-sm text-gray-800 truncate dark:text-white">
23+
{props.posts_preview.author.full_name}
24+
</p>
25+
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
26+
{props.posts_preview.author?.email}
27+
</p>
28+
</div>
29+
</div>
30+
<span className="text-sm mt-2 text-gray-500 dark:text-gray-400">{getDateFromDateByHour(props.posts_preview.created_on,0)}</span>
31+
<p className="text-justify mt-2 text-sm">{props.posts_preview.excerpt}</p>
32+
</div>
33+
</a>
34+
</Link>
35+
</div>
36+
)
37+
}

‎design/components/card/postPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default function PostPreviewCard({ props }: { props: PostPreviewProps }){
2727
</p>
2828
</div>
2929
</div>
30-
<span className="text-sm mt-2 text-gray-500 dark:text-gray-400">{props.posts_preview.date}</span>
30+
<span className="text-sm mt-2 text-gray-500 dark:text-gray-400">{props.posts_preview.created_on}</span>
3131
<p className="text-justify mt-2 text-sm">{props.posts_preview.excerpt}</p>
3232
</div>
3333
</a>

‎design/components/card/postPreviewSide.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Link from 'next/link'
22

33
import {PostCard} from '../../types/post'
4+
import {getDateFromDateByHour} from '../../lib/helper'
45

56
type PostPreviewProps = {
67
posts_preview: PostCard
@@ -26,7 +27,7 @@ export default function PostSidePreviewCard({ props }: { props: PostPreviewProps
2627
</p>
2728
</div>
2829
</div>
29-
<span className="text-sm mt-2 text-gray-500 dark:text-gray-400">{props.posts_preview.date}</span>
30+
<span className="text-sm mt-2 text-gray-500 dark:text-gray-400">{getDateFromDateByHour(props.posts_preview.created_on,0)}</span>
3031
<p className="text-justify mt-2 text-sm">{props.posts_preview.excerpt}</p>
3132
</div>
3233
</a>

‎design/components/home/LetterView.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import type { NextPage } from 'next'
2+
import Link from 'next/link'
3+
import {LetterType} from '../../types/letter'
4+
import {getDateFromDateByHour} from '../../lib/helper'
5+
import ReadMoreAndLess from '../ReadMoreAndLess'
6+
7+
type Props = {
8+
post: LetterType | undefined
9+
readMore?: boolean
10+
}
11+
12+
const LetterView: NextPage<Props> = ({post,readMore}) => {
13+
if(post == undefined){
14+
return (<></>)
15+
}else{
16+
return(
17+
<div className="relative px-2 lg:px-8">
18+
<div className="mx-auto max-w-5xl pt-8 pb-8 sm:pt-18 sm:pb-18">
19+
<div className="md:px-16 md:py-4 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700">
20+
{post.image_url?
21+
<Link href={"/chia-se/thu-muc-vu/"+post.slug} legacyBehavior>
22+
<a >
23+
<img className="rounded-t-lg" src={post.image_url} alt={post.title} />
24+
</a>
25+
</Link>:""
26+
}
27+
<div className="p-4">
28+
<h1 className="text-3xl font-serif font-bold tracking-tight sm:text-center sm:text-4xl">
29+
{post.title}
30+
</h1>
31+
32+
<div className="mt-2 flex items-center space-x-4">
33+
<div className="flex-shrink-0">
34+
<img className="w-8 h-8 rounded-full" src={post.author?.image} alt={post.title}/>
35+
</div>
36+
<div className="flex-1 min-w-0">
37+
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
38+
{post.author?.saint_name} {post.author?.full_name}
39+
</p>
40+
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
41+
{post.author?.email}
42+
</p>
43+
</div>
44+
</div>
45+
<span className="text-sm mt-4 text-gray-500 dark:text-gray-400">{getDateFromDateByHour(post.created_on?post.created_on:"",0)}</span>
46+
<div className="mt-4">
47+
<ReadMoreAndLess content={post.content} excerpt={post.excerpt}/>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
)
54+
}
55+
}
56+
57+
export default LetterView

0 commit comments

Comments
 (0)