From 400cecd8aebd18feaa6cbbbbd545d19feea06347 Mon Sep 17 00:00:00 2001
From: Nitinthegreat <nitinpandey1304@gmail.com>
Date: Tue, 1 Oct 2024 10:21:15 +0530
Subject: [PATCH] Notes page Final

---
 ao3 webpages/components/Login.jsx |  19 ++-
 ao3 webpages/src/pages/notes.jsx  | 251 +++++++++++++++---------------
 2 files changed, 142 insertions(+), 128 deletions(-)

diff --git a/ao3 webpages/components/Login.jsx b/ao3 webpages/components/Login.jsx
index 6bbf87b..6ed3301 100644
--- a/ao3 webpages/components/Login.jsx	
+++ b/ao3 webpages/components/Login.jsx	
@@ -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');
   
@@ -227,7 +234,7 @@ return (
                 borderRadius: '4px',
                 fontSize: '16px',
                 cursor: 'pointer',
-                marginTop: '50px'
+                marginTop: '25px'
 
               }}
             >
diff --git a/ao3 webpages/src/pages/notes.jsx b/ao3 webpages/src/pages/notes.jsx
index cb043f8..afab2c9 100644
--- a/ao3 webpages/src/pages/notes.jsx	
+++ b/ao3 webpages/src/pages/notes.jsx	
@@ -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 },
 ]
@@ -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 {
@@ -92,16 +93,11 @@ 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)
   })
 
@@ -109,138 +105,149 @@ export default function Component() {
     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>
   )
 }
\ No newline at end of file