Skip to content

Commit

Permalink
Notes page Final
Browse files Browse the repository at this point in the history
  • Loading branch information
@NitinTheGreat
NitinTheGreat committed Oct 1, 2024
1 parent d91b83e commit 400cecd
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 128 deletions.
19 changes: 13 additions & 6 deletions ao3 webpages/components/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,19 @@ export default function Login() {
// Store tokens in localStorage
localStorage.setItem('accessToken', data.accessToken);
localStorage.setItem('refreshToken', data.refreshToken);

// Send token to Chrome extension
chrome.runtime.sendMessage("nnmmeljlhmhpnfphcpifdahblfmhlilm", { action: "storeToken", token: data.refreshToken }, function(response) {
console.log('Token sent to extension');

// Send both tokens to the Chrome extension
chrome.runtime.sendMessage("nnmmeljlhmhpnfphcpifdahblfmhlilm",
{ action: "storeTokens", accessToken: data.accessToken, refreshToken: data.refreshToken },
function(response) {
if (chrome.runtime.lastError) {
console.error('Error sending message:', chrome.runtime.lastError);
} else {
console.log('Tokens sent to extension:', response);
}
});



setMessage('Login successful');
setMessageType('success');

Expand Down Expand Up @@ -227,7 +234,7 @@ return (
borderRadius: '4px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '50px'
marginTop: '25px'

}}
>
Expand Down
251 changes: 129 additions & 122 deletions ao3 webpages/src/pages/notes.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { useState, useRef, useEffect } from 'react'
import Sidebar from '../../components/Sidebar/Sidebar';

const initialNotes = [
{ id: '1', title: 'The Shoebox Project', tags: ['Humor', 'Drama'], completed: false },
{ id: '2', title: 'Twist and Shout', tags: ['Angst', 'Historical', 'Tragedy'], completed: false },
{ id: '3', title: 'Everyday Love in Stockholm', tags: ['Humor', 'Hurt', 'Loki'], completed: false },
{ id: '4', title: 'Everyday Love in Stockholm', tags: ['Humor', 'Hurt', 'Loki'], completed: false },
{ id: '4', title: 'The Shoebox Project', tags: ['Humor', 'Drama'], completed: false },
{ id: '5', title: 'Crying Lightning', tags: ['Angst', 'Skugrou'], completed: false },
{ id: '6', title: 'The Shoebox Project', tags: ['Humor', 'Drama'], completed: true },
]
Expand Down Expand Up @@ -53,7 +54,7 @@ export default function Component() {
if (value.endsWith(' ') && value.trim() !== '') {
setNewNote(prev => ({
...prev,
tags: [...prev.tags, currentTag.trim()]
tags: [...prev.tags, value.trim()]
}))
setCurrentTag('')
} else {
Expand Down Expand Up @@ -92,155 +93,161 @@ export default function Component() {
}

const sortedNotes = [...notes].sort((a, b) => {
const aMatchCount = a.tags.filter(tag =>
selectedTags.includes(tag) || tag.toLowerCase().includes(searchTag.toLowerCase())
).length
const bMatchCount = b.tags.filter(tag =>
selectedTags.includes(tag) || tag.toLowerCase().includes(searchTag.toLowerCase())
).length
const aMatchCount = a.tags.filter(tag => selectedTags.includes(tag)).length
const bMatchCount = b.tags.filter(tag => selectedTags.includes(tag)).length
if (aMatchCount !== bMatchCount) {
return bMatchCount - aMatchCount // Sort by match count first
return bMatchCount - aMatchCount
}
// If match counts are equal, maintain original order
return notes.indexOf(a) - notes.indexOf(b)
})

const renderNotes = (completed) => {
return sortedNotes
.filter(note => note.completed === completed)
.map(note => (
<div key={note.id} className="bg-gray-100 rounded-lg shadow p-4 mb-4 border border-gray-200">
<div className="flex items-center justify-between">
<div className="flex items-center">
<input
type="checkbox"
className="mr-2"
checked={completed}
onChange={() => toggleNoteCompletion(note.id)}
/>
<span className={completed ? "line-through" : ""}>{note.title}</span>
</div>
<span className="text-gray-400 cursor-pointer" onClick={() => deleteNote(note.id)}>Delete</span>
<div key={note.id} className="flex h-[92px] px-6 py-4 items-center self-stretch bg-white mb-4 rounded-lg">
<input
type="checkbox"
className="w-4 h-4 mr-4 rounded border border-[rgba(0,0,0,0.80)] bg-[#EEE]"
checked={completed}
onChange={() => toggleNoteCompletion(note.id)}
/>
<div className="flex-grow">
<span className={completed ? "line-through" : ""}>{note.title}</span>
<p className="text-sm text-gray-400 mt-1">
{note.tags.map(tag => (
<span
key={tag}
className={`inline-block mr-1 ${
selectedTags.includes(tag) ? 'text-blue-500 font-bold' : ''
}`}
>
#{tag}
</span>
))}
</p>
</div>
<p className="text-sm text-gray-400 mt-1">
{note.tags.map(tag => (
<span
key={tag}
className={`inline-block mr-1 ${
selectedTags.includes(tag) || tag.toLowerCase().includes(searchTag.toLowerCase())
? 'text-blue-500 font-bold'
: ''
}`}
>
#{tag}
</span>
))}
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" onClick={() => deleteNote(note.id)} className="cursor-pointer">
<path d="M7 1H13M1 4H19M17 4L16.2987 14.5193C16.1935 16.0975 16.1409 16.8867 15.8 17.485C15.4999 18.0118 15.0472 18.4353 14.5017 18.6997C13.882 19 13.0911 19 11.5093 19H8.4907C6.90891 19 6.11803 19 5.49834 18.6997C4.95276 18.4353 4.50009 18.0118 4.19998 17.485C3.85911 16.8867 3.8065 16.0975 3.70129 14.5193L3 4M8 8.5V13.5M12 8.5V13.5" stroke="#BBBBBB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
))
}

return (
<div className="flex">
<div className="flex flex-col md:flex-row">
<Sidebar />
<div className="min-h-screen p-4 ml-16">
<div className="container mx-auto bg-white rounded-lg p-6">
<h1 className="text-2xl font-bold mb-4 text-blue-900">Notes</h1>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h2 className="text-lg font-semibold mb-2 text-blue-700">Manage your Reading list :</h2>
<div className="bg-gray-100 rounded-lg shadow p-4 mb-4 border border-gray-200 cursor-pointer" onClick={() => setIsModalOpen(true)}>
<div className="flex items-center justify-between">
<div className="flex items-center">
<input type="checkbox" className="mr-2" disabled />
<span className="text-gray-500">Add Name</span>
</div>
<span className="text-gray-400">+</span>
<div className="min-h-screen p-4 md:ml-16 bg-[#F3F5F7] w-full">
<div className="container mx-auto max-w-7xl">
<h1 className="text-2xl font-bold mb-4 text-blue-900">Notes</h1>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div>
<h2 className="text-lg font-semibold mb-2 text-blue-700">Manage your Reading list :</h2>
<div
className="flex w-full h-[92px] px-6 md:px-12 py-[22px] items-start gap-[29px] rounded-lg border border-dashed border-[#B0B0B0] bg-white mb-4 cursor-pointer"
onClick={() => setIsModalOpen(true)}
>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 10V38M10 24H38" stroke="#B0B0B0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="text-gray-500">Add Name</span>
</div>
<p className="text-sm text-gray-400 mt-1">#Add Tags</p>
</div>

{renderNotes(false)}
{renderNotes(false)}

<h2 className="text-lg font-semibold mb-2 mt-6 text-blue-700">Completed :</h2>
{renderNotes(true)}
</div>

<h2 className="text-lg font-semibold mb-2 mt-6 text-blue-700">Completed :</h2>
{renderNotes(true)}
<div>
<h2 className="text-lg font-semibold mb-2 text-blue-700">Manage Tags :</h2>
<div className="flex p-6 md:p-10 items-center content-center gap-4 self-stretch flex-wrap rounded-lg bg-white shadow-[0px_0px_4px_0px_rgba(0,0,0,0.20)]">
<div className="relative mb-4 w-full">
<input
type="text"
placeholder="Search Tags"
className="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
value={searchTag}
onChange={(e) => setSearchTag(e.target.value)}
/>
<svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<div className="flex flex-wrap gap-2">
{allTags.map(tag => (
<span
key={tag}
className={`px-2 py-1 rounded-full text-sm cursor-pointer ${
selectedTags.includes(tag) ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'
}`}
onClick={() => toggleSelectedTag(tag)}
>
#{tag}
</span>
))}
</div>
</div>
</div>
</div>
</div>

<div>
<h2 className="text-lg font-semibold mb-2 text-blue-700">Manage Tags :</h2>
<div className="bg-gray-100 rounded-lg shadow p-4 border border-gray-200">
<div className="relative mb-4">
{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div ref={modalRef} className="bg-white rounded-xl w-full max-w-[560px] p-8">
<h3 className="text-xl font-bold mb-6 text-blue-900">Add a new Note :</h3>
<div className="mb-6 relative">
<input
type="text"
placeholder="Add name"
className="w-full p-2 border rounded-md pr-10"
value={newNote.title}
onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
/>
<svg className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</div>
<div className="mb-6">
<div className="flex flex-wrap gap-2 mb-2">
{newNote.tags.map(tag => (
<span key={tag} className="bg-gray-200 text-gray-700 px-2 py-1 rounded-full text-sm flex items-center">
#{tag}
<button onClick={() => removeTag(tag)} className="ml-1 text-gray-500 hover:text-gray-700">×</button>
</span>
))}
</div>
<input
type="text"
placeholder="Search Tags"
className="w-full pl-4 pr-10 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
value={searchTag}
onChange={(e) => setSearchTag(e.target.value)}
placeholder="#Add tags"
className="w-full p-2 border rounded-md"
value={currentTag}
onChange={handleTagInput}
onKeyDown={(e) => {
if (e.key === ' ' && currentTag.trim() !== '') {
e.preventDefault()
setNewNote(prev => ({
...prev,
tags: [...prev.tags, currentTag.trim()]
}))
setCurrentTag('')
}
}}
/>
<span className="absolute right-3 top-2 text-gray-400">🔍</span>
</div>
<div className="flex flex-wrap gap-2">
{allTags.map(tag => (
<span
key={tag}
className={`bg-gray-200 text-gray-700 px-2 py-1 rounded-full text-sm cursor-pointer ${
selectedTags.includes(tag) ? 'bg-blue-500 text-white' : ''
}`}
onClick={() => toggleSelectedTag(tag)}
>
#{tag}
</span>
))}
<div className="flex justify-center">
<button
className="bg-[#285599] text-white px-6 py-2 rounded-md font-semibold"
onClick={addNote}
>
Add Note
</button>
</div>
</div>
</div>
</div>
)}
</div>

{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div ref={modalRef} className="bg-white rounded-tl-xl w-[560px] h-[320px] p-8">
<h3 className="text-xl font-bold mb-6 text-blue-900">Add a new Note :</h3>
<div className="mb-6 relative">
<input
type="text"
placeholder="Add name"
className="w-full p-2 border rounded-md pr-8"
value={newNote.title}
onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
/>
<span className="absolute right-2 top-2 text-gray-400">✏️</span>
</div>
<div className="mb-6">
<div className="flex flex-wrap gap-2 mb-2">
{newNote.tags.map(tag => (
<span key={tag} className="bg-gray-200 text-gray-700 px-2 py-1 rounded-full text-sm flex items-center">
#{tag}
<button onClick={() => removeTag(tag)} className="ml-1 text-gray-500 hover:text-gray-700">×</button>
</span>
))}
</div>
<input
type="text"
placeholder="#Add tags"
className="w-full p-2 border rounded-md"
value={currentTag}
onChange={handleTagInput}
/>
</div>
<div className="flex justify-center">
<button
className="bg-blue-600 text-white px-6 py-2 rounded-md font-semibold"
onClick={addNote}
>
Add Note
</button>
</div>
</div>
</div>
)}
</div>
</div>
)
}

0 comments on commit 400cecd

Please sign in to comment.