Skip to content

Commit

Permalink
Merge pull request #605 from marchhq/revert-594-refac/reading-list
Browse files Browse the repository at this point in the history 
Revert "refac: reading list"
  • Loading branch information
@sajdakabir
sajdakabir authored Nov 15, 2024
2 parents f32f0c3 + db15e14 commit 713f7b1
Show file tree
Hide file tree
Showing 7 changed files with 77 additions and 544 deletions.
6 changes: 3 additions & 3 deletions apps/frontend/src/components/Reading/AddItemForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,14 +148,14 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ blockId, spaceId }) => {
onChange={(e) => handleInputChange(e.target.value)}
onKeyDown={handleKeyDown}
onPaste={handlePaste}
placeholder="paste link or just plain text.."
className="w-full resize-none overflow-hidden truncate whitespace-pre-wrap break-words bg-background text-sm text-foreground outline-none placeholder:text-secondary-foreground focus:outline-none"
placeholder="Insert a link or just plain text.."
className="w-full truncate rounded-lg border border-transparent bg-background p-4 pl-6 pr-32 font-semibold text-primary-foreground outline-none transition-colors placeholder:text-secondary-foreground focus:border-border focus:ring-0"
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
disabled={isSaving}
/>
{input && !isSaving && (
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs text-secondary-foreground">
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-secondary-foreground">
press ↵ to save
</span>
)}
Expand Down
207 changes: 67 additions & 140 deletions apps/frontend/src/components/Reading/ItemsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,171 +1,98 @@
import React, { useEffect, useState } from "react"
import React from "react"

import { CalendarIcon, Link2Icon } from "lucide-react"
import { Icon } from "@iconify-icon/react"
import { Link2Icon } from "lucide-react"

import { RescheduleCalendar } from "../Inbox/RescheduleCalendar/RescheduleCalendar"
import ImageWithFallback from "../ui/ImageWithFallback"
import { useAuth } from "@/src/contexts/AuthContext"
import { type ReadingItem } from "@/src/lib/@types/Items/Reading"
import useReadingStore from "@/src/lib/store/reading.store"
import { getWeekDates } from "@/src/utils/datetime"
import { truncateString } from "@/src/utils/helpers"

interface ItemsListProps {
blockId: string
blockId: string | null
spaceId: string
items: ReadingItem[]
handleExpand: (item: ReadingItem) => void
}

const ItemsList: React.FC<ItemsListProps> = ({
blockId,
spaceId,
items,
handleExpand,
}) => {
const ItemsList: React.FC<ItemsListProps> = ({ blockId, spaceId }) => {
const { session } = useAuth()
const { updateItem } = useReadingStore()
const [date, setDate] = useState<Date | null>(new Date())
const [dateChanged, setDateChanged] = useState(false)
const [cycleDate, setCycleDate] = useState<Date | null>(new Date())
const [reschedulingItemId, setReschedulingItemId] = useState<string | null>(
null
)

useEffect(() => {
if (dateChanged) {
if (reschedulingItemId) {
if (date && blockId) {
updateItem(session, spaceId, blockId, reschedulingItemId, {
status: "todo",
dueDate: date,
})
}
if (cycleDate && blockId) {
const { startDate, endDate } = getWeekDates(cycleDate)
updateItem(session, blockId, spaceId, reschedulingItemId, {
status: "todo",
dueDate: date,
cycle: {
startsAt: startDate,
endsAt: endDate,
},
})
}
}
setReschedulingItemId(null)
setDateChanged(false)
}
}, [
date,
cycleDate,
updateItem,
session,
reschedulingItemId,
dateChanged,
blockId,
])

const handleRescheduleCalendar = (
e: React.MouseEvent,
id: string,
dueDate?: Date | null
) => {
e.stopPropagation()
const { readingItems, deleteItem: deleteItemFromStore } = useReadingStore()

const newDate = dueDate
? typeof dueDate === "string"
? new Date(dueDate)
: dueDate
: null
const deleteItem = async (itemId: string) => {
if (!blockId) return

setReschedulingItemId(id)
setDate(newDate) // Ensure this is a Date or null
try {
await deleteItemFromStore(session, spaceId, blockId, itemId)
} catch (error) {
console.error("Error deleting item:", error)
}
}

if (items.length === 0) {
if (readingItems.length === 0) {
return <p>Reading list is empty </p>
}

return (
<div className="flex w-3/4 flex-col gap-2">
{[...items].reverse().map((item: ReadingItem) => {
const url = item?.metadata?.url
const favicon = item?.metadata?.favicon
<div className="flex w-3/4 flex-col gap-4">
{[...readingItems].reverse().map((item: ReadingItem) => {
const url = item.metadata?.url
const favicon = item.metadata?.favicon
console.log("ulr: ", item.metadata?.url)
return (
<button
key={item?._id}
<div
key={item._id}
className="group flex flex-col justify-center gap-2 rounded-lg py-1"
onClick={() => handleExpand(item)}
>
<div className="flex items-center gap-2">
<div className="grow overflow-hidden">
<p className="flex flex-wrap items-center gap-2 text-xs font-medium text-foreground">
<span className="break-all">
{truncateString(item?.title, 50)}
</span>
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className={`block ${url ? "cursor-pointer" : "cursor-default"}`}
>
<span>
{favicon ? (
<ImageWithFallback
src={favicon}
FallbackIcon={Link2Icon}
alt="Favicon"
width={16}
height={16}
className="mt-0.5 size-3.5 shrink-0"
/>
) : (
""
)}
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className={`block ${url ? "cursor-pointer" : "cursor-default"}`}
>
<div className="flex items-center gap-2">
{favicon ? (
<ImageWithFallback
src={favicon}
FallbackIcon={Link2Icon}
alt="Favicon"
width={16}
height={16}
className="size-5 shrink-0"
/>
) : (
<Icon
icon="ph:circle-bold"
className="ml-[3px] shrink-0 text-[16px] text-secondary-foreground"
/>
)}
<div className="grow overflow-hidden">
<h3 className="flex flex-wrap items-center text-lg font-semibold text-foreground">
<span className="break-all">
{truncateString(item.title, 50)}
</span>
</a>
<span className="invisible group-hover:visible">
<CalendarIcon
size={13}
className="hover-text"
onClick={(e) => {
handleRescheduleCalendar(e, item._id, item?.dueDate)
}}
/>
</span>
</p>
</h3>
</div>
</div>
</div>
</button>
{item.description && (
<p className="text-base text-secondary-foreground">
{item.description}
</p>
)}
{item?.type === "link" && (
<p className="ml-7 text-sm text-secondary-foreground">
{truncateString(
(item?.metadata?.url || "").replace(
/^https?:\/\/(www\.)?/,
""
),
30
)}
</p>
)}
</a>
</div>
)
})}

{reschedulingItemId !== null && (
<div>
<div
className="fixed inset-0 z-50 cursor-default bg-black/80"
role="button"
onClick={() => setReschedulingItemId(null)}
onKeyDown={(e) => {
if (e.key === "Escape" || e.key === "Esc") {
setReschedulingItemId(null)
}
}}
tabIndex={0}
></div>
<div className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 shadow-lg">
<RescheduleCalendar
date={date}
setDate={setDate}
cycleDate={cycleDate}
setCycleDate={setCycleDate}
dateChanged={dateChanged}
setDateChanged={setDateChanged}
/>
</div>
</div>
)}
</div>
)
}
Expand Down
Loading

0 comments on commit 713f7b1

Please sign in to comment.