Skip to content

Commit

Permalink
Daily Diary (#1564)
Browse files Browse the repository at this point in the history
* first commit - Daily journal - issue #1556

* final touches

---------

Co-authored-by: Priyankar Pal <[email protected]>
  • Loading branch information
GhadaRV and priyankarpal authored Oct 25, 2024
1 parent eb55421 commit 4f1b269
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 0 deletions.
68 changes: 68 additions & 0 deletions src/plays/daily-journa/DailyJournal.jsx
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;
27 changes: 27 additions & 0 deletions src/plays/daily-journa/Readme.md
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)
24 changes: 24 additions & 0 deletions src/plays/daily-journa/components/EntryDetails.jsx
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;
33 changes: 33 additions & 0 deletions src/plays/daily-journa/components/EntryList.jsx
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;
56 changes: 56 additions & 0 deletions src/plays/daily-journa/components/JournalEntryForm.jsx
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;
1 change: 1 addition & 0 deletions src/plays/daily-journa/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* enter stlyes here */

0 comments on commit 4f1b269

Please sign in to comment.