Skip to content

Commit

Permalink
```text
Browse files Browse the repository at this point in the history 
feat: Add addToCollection and downloadCollection functions

This commit adds two new functions, addToCollection and downloadCollection, to the helpers/functions.ts file. The addToCollection function is responsible for adding items to a collection stored in localStorage, while the downloadCollection function downloads the collection as a JSON file. These functions enhance the functionality of the SearchResults component by allowing users to build and download collections of search results.
  • Loading branch information
@bramses
bramses committed Sep 6, 2024
1 parent 8488f47 commit a7127a8
Show file tree
Hide file tree
Showing 4 changed files with 310 additions and 178 deletions.
179 changes: 116 additions & 63 deletions src/app/[locale]/(auth)/dashboard/garden/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,18 @@ import { useCallback, useEffect, useState } from 'react';
import Calendar from 'react-calendar';
import ScrollToTop from 'react-scroll-to-top';

import { splitIntoWords } from '@/helpers/functions';
import { addToCollection, splitIntoWords } from '@/helpers/functions';

const GardenDaily = () => {
const searchParams = useSearchParams();
const [entries, setEntries] = useState<any[]>([]);
const [selectedDay, setSelectedDay] = useState('');
const [dateSelected, setDateSelected] = useState(new Date());
const [loading, setLoading] = useState(false);
const [checkedButtons, setCheckedButtons] = useState<{
[key: string]: boolean;
}>({});
const [buildingCollection, setBuildingCollection] = useState(false);
// const cache = getCache();

const toHostname = (url: string) => {
Expand Down Expand Up @@ -112,75 +116,124 @@ const GardenDaily = () => {
{entries.length === 0 ? <p>No entries for this day</p> : null}

{entries.map((result) => (
<div key={result.id} className="mb-4">
<Link
href={{
pathname: `/dashboard/entry/${result.id}`,
}}
className="block"
>
<div className="flex items-center text-blue-600 hover:underline">
<Image
src={result.favicon || '/favicon.ico'}
alt="favicon"
width={16}
height={16}
className="mr-2"
/>
<span className="font-medium">
{result.data.split(' ').length > 12 ? (
<>
{splitIntoWords(result.data, 12, 0)}...
<span className="mt-1 block text-sm text-gray-500">
...{splitIntoWords(result.data, 20, 12)}...
</span>
</>
) : (
result.data
<div key={result.id} className="mb-4 flex items-center justify-between">
<div className="grow">
<Link
href={{
pathname: `/dashboard/entry/${result.id}`,
}}
className="block"
>
<div className="flex items-center text-blue-600 hover:underline">
<Image
src={result.favicon || '/favicon.ico'}
alt="favicon"
width={16}
height={16}
className="mr-2"
/>
<span className="font-medium">
{result.data.split(' ').length > 12 ? (
<>
{splitIntoWords(result.data, 12, 0)}...
<span className="mt-1 block text-sm text-gray-500">
...{splitIntoWords(result.data, 20, 12)}...
</span>
</>
) : (
result.data
)}
</span>
</div>
<div className="text-sm text-gray-500">
{result.parentData && (
<span className="mt-1 block">{result.parentData.data}</span>
)}
</span>
</div>
</div>
</Link>
{/* when was the entry created and updated */}
<div className="text-sm text-gray-500">
{result.parentData && (
<span className="mt-1 block">{result.parentData.data}</span>
Created: {new Date(result.createdAt).toLocaleString()}
{result.createdAt !== result.updatedAt && (
<>
{' '}
| Last Updated: {new Date(
result.updatedAt,
).toLocaleString()}{' '}
</>
)}
</div>
</Link>
{/* when was the entry created and updated */}
<div className="text-sm text-gray-500">
Created: {new Date(result.createdAt).toLocaleString()}
{result.createdAt !== result.updatedAt && (
<>
{' '}
| Last Updated: {new Date(
result.updatedAt,
).toLocaleString()}{' '}
</>
)}
<a
target="_blank"
href={result.metadata.author}
rel="noopener noreferrer"
className="inline-flex items-center font-medium text-blue-600 hover:underline"
>
{toHostname(result.metadata.author)}
<svg
className="ms-2.5 size-3 rtl:rotate-[270deg]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
/>
</svg>
</a>
</div>
<a
target="_blank"
href={result.metadata.author}
rel="noopener noreferrer"
className="inline-flex items-center font-medium text-blue-600 hover:underline"
<button
type="button"
className={`ml-4 rounded-full p-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-300 ${
checkedButtons[result.id] ? 'bg-green-500' : 'bg-blue-500'
}`}
onClick={() =>
addToCollection(
result.id,
result.data,
buildingCollection,
setBuildingCollection,
setCheckedButtons,
)
}
>
{toHostname(result.metadata.author)}
<svg
className="ms-2.5 size-3 rtl:rotate-[270deg]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
{checkedButtons[result.id] ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
/>
</svg>
</a>
className="size-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 13l4 4L19 7"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
className="size-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 4v16m8-8H4"
/>
</svg>
)}
</button>
</div>
))}
<ScrollToTop smooth />
Expand Down
Loading

0 comments on commit a7127a8

Please sign in to comment.