-
-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* first commit - Daily journal - issue #1556 * final touches --------- Co-authored-by: Priyankar Pal <[email protected]>
- Loading branch information
1 parent
eb55421
commit 4f1b269
Showing
6 changed files
with
209 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import PlayHeader from 'common/playlists/PlayHeader'; | ||
import './styles.css'; | ||
import { useState, useEffect } from 'react'; | ||
import JournalEntryForm from './components/JournalEntryForm'; | ||
import EntryList from './components/EntryList'; | ||
import EntryDetails from './components/EntryDetails'; | ||
|
||
// WARNING: Do not change the entry componenet name | ||
function DailyJournal(props) { | ||
// Your Code Start below. | ||
const [entries, setEntries] = useState([]); | ||
const [selectedEntry, setSelectedEntry] = useState(null); | ||
|
||
useEffect(() => { | ||
const savedEntries = JSON.parse(localStorage.getItem('entries')) || []; | ||
setEntries(savedEntries); | ||
}, []); | ||
|
||
useEffect(() => { | ||
localStorage.setItem('entries', JSON.stringify(entries)); | ||
}, [entries]); | ||
|
||
const addEntry = (entry) => { | ||
setEntries([...entries, entry]); | ||
}; | ||
|
||
const viewEntry = (entry) => setSelectedEntry(entry); | ||
|
||
const goBack = () => setSelectedEntry(null); | ||
|
||
const onDelete = () => setEntries([]); | ||
|
||
return ( | ||
<> | ||
<div className="play-details"> | ||
<PlayHeader play={props} /> | ||
<div className="play-details-body"> | ||
{/* Your Code Starts Here */} | ||
<div> | ||
<div className="min-h-screen flex flex-col"> | ||
<h1 className="text-3xl font-semibold mb-3 text-center ">Daily Journal</h1> | ||
<p className="mb-6 text-gray-600 text-center"> | ||
Your daily companion that you can share your thoughts and feelings with.{' '} | ||
</p> | ||
<div className="flex flex-grow p-4"> | ||
<div className="w-full md:w-2/3 lg:w-2/4 p-4"> | ||
<JournalEntryForm onSubmit={addEntry} /> | ||
</div> | ||
<div className="w-full md:w-1/3 lg:w-2/4 p-4"> | ||
{selectedEntry ? ( | ||
<EntryDetails entry={selectedEntry} onBack={goBack} /> | ||
) : ( | ||
<> | ||
<EntryList entries={entries} onDelete={onDelete} onSelect={viewEntry} /> | ||
</> | ||
)} | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
{/* Your Code Ends Here */} | ||
</div> | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default DailyJournal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Daily journal | ||
|
||
This play is about writing daily entries, categorising them by mood or topic, and reviewing past entries. | ||
|
||
## Play Demographic | ||
|
||
- Language: js | ||
- Level: Beginner | ||
|
||
## Creator Information | ||
|
||
- User: GhadaRV | ||
- Gihub Link: https://github.com/GhadaRV | ||
- Blog: | ||
- Video: | ||
|
||
## Implementation Details | ||
|
||
Update your implementation idea and details here | ||
|
||
## Consideration | ||
|
||
Update all considerations(if any) | ||
|
||
## Resources | ||
|
||
Update external resources(if any) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
|
||
const EntryDetails = ({ entry, onBack }) => ( | ||
<div className="bg-white shadow-md rounded-lg p-4"> | ||
<h2 className="text-xl font-semibold mb-2">{entry.date}</h2> | ||
<p> | ||
<strong>Mood:</strong> {entry.mood} | ||
</p> | ||
<p>{entry.text}</p> | ||
{entry.tags.length > 0 && ( | ||
<p> | ||
<strong>Tags:</strong> {entry.tags.join(', ')} | ||
</p> | ||
)} | ||
<button | ||
className="mt-4 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded" | ||
onClick={onBack} | ||
> | ||
Back | ||
</button> | ||
</div> | ||
); | ||
|
||
export default EntryDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React from 'react'; | ||
|
||
const EntryList = ({ entries, onSelect, onDelete }) => ( | ||
<div className="bg-white shadow-md rounded-lg p-4"> | ||
<h2 className="text-center font-semibold text-pink-500">Past Entries</h2> | ||
{entries.length > 0 ? ( | ||
<button | ||
className="mt-4 mr-0 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded" | ||
onClick={onDelete} | ||
> | ||
Delete entries | ||
</button> | ||
) : null} | ||
{entries.length === 0 ? <p>No entries found</p> : null} | ||
<ul> | ||
{entries.map((entry) => ( | ||
<li | ||
className="cursor-pointer hover:bg-gray-100 p-2 rounded" | ||
key={entry.id} | ||
onClick={() => onSelect(entry)} | ||
> | ||
<h3>{entry.date}</h3> | ||
<p>{entry.text.substring(0, 100)}...</p> | ||
<p> | ||
<strong>Mood:</strong> {entry.mood} | ||
</p> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
); | ||
|
||
export default EntryList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { useState } from 'react'; | ||
|
||
const JournalEntryForm = ({ onSubmit }) => { | ||
const [text, setText] = useState(''); | ||
const [mood, setMood] = useState('Happy'); | ||
const [tags, setTags] = useState(''); | ||
|
||
const handleSubmit = (e) => { | ||
e.preventDefault(); | ||
const newEntry = { | ||
id: Date.now(), | ||
text, | ||
mood, | ||
tags: tags.split(' ').map((tag) => tag.trim()), | ||
date: new Date().toLocaleDateString() | ||
}; | ||
onSubmit(newEntry); | ||
setText(''); | ||
setMood('Happy'); | ||
setTags(''); | ||
}; | ||
|
||
return ( | ||
<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 " onSubmit={handleSubmit}> | ||
<textarea | ||
className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 " | ||
placeholder="How was your day like? " | ||
value={text} | ||
onChange={(e) => setText(e.target.value)} | ||
/> | ||
<div className="flex flex-raw "> | ||
<select className="mr-5" value={mood} onChange={(e) => setMood(e.target.value)}> | ||
<option value="happy">Happy</option> | ||
<option value="sad">Sad</option> | ||
<option value="excited">Excited</option> | ||
<option value="anxious">Anxious</option> | ||
</select> | ||
<input | ||
className="" | ||
placeholder="Tags: Home Family ..." | ||
type="text" | ||
value={tags} | ||
onChange={(e) => setTags(e.target.value)} | ||
/> | ||
</div> | ||
<button | ||
className="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded mt-6" | ||
type="submit" | ||
> | ||
Add Entry | ||
</button> | ||
</form> | ||
); | ||
}; | ||
|
||
export default JournalEntryForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/* enter stlyes here */ |