feat: add 'Mark Prayed' button for prayer items with streak tracking
This commit is contained in:
nmemmert committed
1 parent
8105d39554
commit
6c33fc4606
5 files changed
+66
-87
No files matched your search
+1
-1
@@ -1 +1 @@
|
|||||||
if(!self.define){let e,s={};const a=(a,n)=>(a=new URL(a+".js",n).href,s[a]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=a,e.onload=s,document.head.appendChild(e)}else e=a,importScripts(a),s()}).then(()=>{let e=s[a];if(!e)throw new Error(`Module ${a} didn’t register its module`);return e}));self.define=(n,c)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(s[i])return;let t={};const r=e=>a(e,i),o={module:{uri:i},exports:t,require:r};s[i]=Promise.all(n.map(e=>o[e]||r(e))).then(e=>(c(...e),t))}}define(["./workbox-4754cb34"],function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/static/MjqTcdbH4CGo7rDQKMqgw/_buildManifest.js",revision:"44608b7d53e1eefcd54452c125d6300e"},{url:"/_next/static/MjqTcdbH4CGo7rDQKMqgw/_ssgManifest.js",revision:"b6652df95db52feb4daf4eca35380933"},{url:"/_next/static/chunks/172-71074a5b97c03327.js",revision:"71074a5b97c03327"},{url:"/_next/static/chunks/462-718696c85490a0df.js",revision:"718696c85490a0df"},{url:"/_next/static/chunks/497-dc7d5e6b69ac9e5c.js",revision:"dc7d5e6b69ac9e5c"},{url:"/_next/static/chunks/4bd1b696-b7529f9b306ab05d.js",revision:"b7529f9b306ab05d"},{url:"/_next/static/chunks/512-8d2b9de6fda25175.js",revision:"8d2b9de6fda25175"},{url:"/_next/static/chunks/7508b87c-97d7ae290120d64a.js",revision:"97d7ae290120d64a"},{url:"/_next/static/chunks/995.a093d11da39e25d3.js",revision:"a093d11da39e25d3"},{url:"/_next/static/chunks/app/_global-error/page-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/_not-found/page-f75e7ecfbcc8dd77.js",revision:"f75e7ecfbcc8dd77"},{url:"/_next/static/chunks/app/admin/page-121d83c28093566e.js",revision:"121d83c28093566e"},{url:"/_next/static/chunks/app/api/debug-smtp/route-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/api/send-email/route-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/api/send-scheduled-emails/route-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/layout-7f3802a6a2a60f7d.js",revision:"7f3802a6a2a60f7d"},{url:"/_next/static/chunks/app/page-f1d3569e14c0e94e.js",revision:"f1d3569e14c0e94e"},{url:"/_next/static/chunks/app/profile/page-7124e76cdfa45e42.js",revision:"7124e76cdfa45e42"},{url:"/_next/static/chunks/app/testimonies/page-7fc7ddaa6cbd104f.js",revision:"7fc7ddaa6cbd104f"},{url:"/_next/static/chunks/dd8162e8-bea2cd35813297c3.js",revision:"bea2cd35813297c3"},{url:"/_next/static/chunks/framework-292291387d6b2e39.js",revision:"292291387d6b2e39"},{url:"/_next/static/chunks/main-5e55aa9a8969fd08.js",revision:"5e55aa9a8969fd08"},{url:"/_next/static/chunks/main-app-1640b70ccc992192.js",revision:"1640b70ccc992192"},{url:"/_next/static/chunks/next/dist/client/components/builtin/app-error-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/next/dist/client/components/builtin/forbidden-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/next/dist/client/components/builtin/global-error-647436fbb68222b8.js",revision:"647436fbb68222b8"},{url:"/_next/static/chunks/next/dist/client/components/builtin/not-found-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/next/dist/client/components/builtin/unauthorized-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/polyfills-42372ed130431b0a.js",revision:"846118c33b2c0e922d7b3a7676f81f6f"},{url:"/_next/static/chunks/webpack-6b6a51bcb4cc4744.js",revision:"6b6a51bcb4cc4744"},{url:"/_next/static/css/a09d3c2fda316d1e.css",revision:"a09d3c2fda316d1e"},{url:"/_next/static/media/4cf2300e9c8272f7-s.p.woff2",revision:"18bae71b1e1b2bb25321090a3b563103"},{url:"/_next/static/media/747892c23ea88013-s.woff2",revision:"a0761690ccf4441ace5cec893b82d4ab"},{url:"/_next/static/media/8d697b304b401681-s.woff2",revision:"cc728f6c0adb04da0dfcb0fc436a8ae5"},{url:"/_next/static/media/93f479601ee12b01-s.p.woff2",revision:"da83d5f06d825c5ae65b7cca706cb312"},{url:"/_next/static/media/9610d9e46709d722-s.woff2",revision:"7b7c0ef93df188a852344fc272fc096b"},{url:"/_next/static/media/ba015fad6dcf6784-s.woff2",revision:"8ea4f719af3312a055caf09f34c89a77"},{url:"/file.svg",revision:"d09f95206c3fa0bb9bd9fefabfd0ea71"},{url:"/firebase-messaging-sw.js",revision:"396ffcf00a63da03dfc03d78d4815494"},{url:"/globe.svg",revision:"2aaafa6a49b6563925fe440891e32717"},{url:"/icon-192x192.png",revision:"bbbd7efc0e31088ae0a3aeede7608534"},{url:"/icon-512x512.png",revision:"400538d76556a3a8ee4fd3dfda7bc092"},{url:"/locales/en/common.json",revision:"41332abbb11f0b33b3eb308a5448f8d6"},{url:"/manifest.json",revision:"928e96ccc236cff27f97d358c0517c73"},{url:"/next.svg",revision:"8e061864f388b47f33a1c3780831193e"},{url:"/vercel.svg",revision:"c0af2f507b369b085b35ef4bbe3bcf1e"},{url:"/window.svg",revision:"a2760511c65806022ad20adf74370ff3"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaLine truncated
|
if(!self.define){let e,s={};const a=(a,n)=>(a=new URL(a+".js",n).href,s[a]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=a,e.onload=s,document.head.appendChild(e)}else e=a,importScripts(a),s()}).then(()=>{let e=s[a];if(!e)throw new Error(`Module ${a} didn’t register its module`);return e}));self.define=(n,i)=>{const c=e||("document"in self?document.currentScript.src:"")||location.href;if(s[c])return;let t={};const r=e=>a(e,c),o={module:{uri:c},exports:t,require:r};s[c]=Promise.all(n.map(e=>o[e]||r(e))).then(e=>(i(...e),t))}}define(["./workbox-4754cb34"],function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/static/chunks/172-71074a5b97c03327.js",revision:"71074a5b97c03327"},{url:"/_next/static/chunks/462-718696c85490a0df.js",revision:"718696c85490a0df"},{url:"/_next/static/chunks/497-dc7d5e6b69ac9e5c.js",revision:"dc7d5e6b69ac9e5c"},{url:"/_next/static/chunks/4bd1b696-b7529f9b306ab05d.js",revision:"b7529f9b306ab05d"},{url:"/_next/static/chunks/512-8d2b9de6fda25175.js",revision:"8d2b9de6fda25175"},{url:"/_next/static/chunks/7508b87c-97d7ae290120d64a.js",revision:"97d7ae290120d64a"},{url:"/_next/static/chunks/995.a093d11da39e25d3.js",revision:"a093d11da39e25d3"},{url:"/_next/static/chunks/app/_global-error/page-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/_not-found/page-f75e7ecfbcc8dd77.js",revision:"f75e7ecfbcc8dd77"},{url:"/_next/static/chunks/app/admin/page-121d83c28093566e.js",revision:"121d83c28093566e"},{url:"/_next/static/chunks/app/api/debug-smtp/route-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/api/send-email/route-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/api/send-scheduled-emails/route-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/app/layout-7f3802a6a2a60f7d.js",revision:"7f3802a6a2a60f7d"},{url:"/_next/static/chunks/app/page-da425629f73a1f3a.js",revision:"da425629f73a1f3a"},{url:"/_next/static/chunks/app/profile/page-7124e76cdfa45e42.js",revision:"7124e76cdfa45e42"},{url:"/_next/static/chunks/app/testimonies/page-7fc7ddaa6cbd104f.js",revision:"7fc7ddaa6cbd104f"},{url:"/_next/static/chunks/dd8162e8-bea2cd35813297c3.js",revision:"bea2cd35813297c3"},{url:"/_next/static/chunks/framework-292291387d6b2e39.js",revision:"292291387d6b2e39"},{url:"/_next/static/chunks/main-5e55aa9a8969fd08.js",revision:"5e55aa9a8969fd08"},{url:"/_next/static/chunks/main-app-1640b70ccc992192.js",revision:"1640b70ccc992192"},{url:"/_next/static/chunks/next/dist/client/components/builtin/app-error-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/next/dist/client/components/builtin/forbidden-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/next/dist/client/components/builtin/global-error-647436fbb68222b8.js",revision:"647436fbb68222b8"},{url:"/_next/static/chunks/next/dist/client/components/builtin/not-found-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/next/dist/client/components/builtin/unauthorized-2af6c391bfa86449.js",revision:"2af6c391bfa86449"},{url:"/_next/static/chunks/polyfills-42372ed130431b0a.js",revision:"846118c33b2c0e922d7b3a7676f81f6f"},{url:"/_next/static/chunks/webpack-6b6a51bcb4cc4744.js",revision:"6b6a51bcb4cc4744"},{url:"/_next/static/css/ec0e59c59f332d11.css",revision:"ec0e59c59f332d11"},{url:"/_next/static/media/4cf2300e9c8272f7-s.p.woff2",revision:"18bae71b1e1b2bb25321090a3b563103"},{url:"/_next/static/media/747892c23ea88013-s.woff2",revision:"a0761690ccf4441ace5cec893b82d4ab"},{url:"/_next/static/media/8d697b304b401681-s.woff2",revision:"cc728f6c0adb04da0dfcb0fc436a8ae5"},{url:"/_next/static/media/93f479601ee12b01-s.p.woff2",revision:"da83d5f06d825c5ae65b7cca706cb312"},{url:"/_next/static/media/9610d9e46709d722-s.woff2",revision:"7b7c0ef93df188a852344fc272fc096b"},{url:"/_next/static/media/ba015fad6dcf6784-s.woff2",revision:"8ea4f719af3312a055caf09f34c89a77"},{url:"/_next/static/zGoUFgd26mjX9VCibjeQJ/_buildManifest.js",revision:"44608b7d53e1eefcd54452c125d6300e"},{url:"/_next/static/zGoUFgd26mjX9VCibjeQJ/_ssgManifest.js",revision:"b6652df95db52feb4daf4eca35380933"},{url:"/file.svg",revision:"d09f95206c3fa0bb9bd9fefabfd0ea71"},{url:"/firebase-messaging-sw.js",revision:"396ffcf00a63da03dfc03d78d4815494"},{url:"/globe.svg",revision:"2aaafa6a49b6563925fe440891e32717"},{url:"/icon-192x192.png",revision:"bbbd7efc0e31088ae0a3aeede7608534"},{url:"/icon-512x512.png",revision:"400538d76556a3a8ee4fd3dfda7bc092"},{url:"/locales/en/common.json",revision:"41332abbb11f0b33b3eb308a5448f8d6"},{url:"/manifest.json",revision:"928e96ccc236cff27f97d358c0517c73"},{url:"/next.svg",revision:"8e061864f388b47f33a1c3780831193e"},{url:"/vercel.svg",revision:"c0af2f507b369b085b35ef4bbe3bcf1e"},{url:"/window.svg",revision:"a2760511c65806022ad20adf74370ff3"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaLine truncated
|
||||||
+20
-7
@@ -39,7 +39,6 @@ export default function Home() {
|
|||||||
const [prayFor, setPrayFor] = useState('');
|
const [prayFor, setPrayFor] = useState('');
|
||||||
const [answered, setAnswered] = useState(false);
|
const [answered, setAnswered] = useState(false);
|
||||||
const [answerDetails, setAnswerDetails] = useState('');
|
const [answerDetails, setAnswerDetails] = useState('');
|
||||||
const [prayFrequency, setPrayFrequency] = useState(1); // 1-7 times per week
|
|
||||||
|
|
||||||
const { user, loading: authLoading } = useAuth();
|
const { user, loading: authLoading } = useAuth();
|
||||||
|
|
||||||
@@ -109,8 +108,6 @@ export default function Home() {
|
|||||||
prayFor: prayFor || undefined,
|
prayFor: prayFor || undefined,
|
||||||
answered,
|
answered,
|
||||||
answerDetails: answerDetails || undefined,
|
answerDetails: answerDetails || undefined,
|
||||||
prayFrequency,
|
|
||||||
lastPrayedFor: answered ? undefined : new Date().toISOString().split('T')[0],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (editingPrayer) {
|
if (editingPrayer) {
|
||||||
@@ -147,7 +144,6 @@ export default function Home() {
|
|||||||
setPrayFor(prayer.prayFor || '');
|
setPrayFor(prayer.prayFor || '');
|
||||||
setAnswered(prayer.answered || false);
|
setAnswered(prayer.answered || false);
|
||||||
setAnswerDetails(prayer.answerDetails || '');
|
setAnswerDetails(prayer.answerDetails || '');
|
||||||
setPrayFrequency(prayer.prayFrequency || 1);
|
|
||||||
setActiveTab('compose');
|
setActiveTab('compose');
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -161,6 +157,25 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleMarkPrayed = async (prayerId: string) => {
|
||||||
|
if (!user) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
await updateDoc(doc(db, 'prayers', prayerId), {
|
||||||
|
lastPrayedFor: today,
|
||||||
|
});
|
||||||
|
|
||||||
|
setPrayers(prev =>
|
||||||
|
prev.map(p => (p.id === prayerId ? { ...p, lastPrayedFor: today } : p))
|
||||||
|
);
|
||||||
|
toast.success('Prayed! 🙏');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error marking prayed:', error);
|
||||||
|
toast.error('Failed to update');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (authLoading) {
|
if (authLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-black to-slate-800 flex items-center justify-center p-4">
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-black to-slate-800 flex items-center justify-center p-4">
|
||||||
@@ -227,8 +242,6 @@ export default function Home() {
|
|||||||
onAnsweredChange={setAnswered}
|
onAnsweredChange={setAnswered}
|
||||||
answerDetails={answerDetails}
|
answerDetails={answerDetails}
|
||||||
onAnswerDetailsChange={setAnswerDetails}
|
onAnswerDetailsChange={setAnswerDetails}
|
||||||
prayFrequency={prayFrequency}
|
|
||||||
onPrayFrequencyChange={setPrayFrequency}
|
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
isEditing={!!editingPrayer}
|
isEditing={!!editingPrayer}
|
||||||
/>
|
/>
|
||||||
@@ -243,7 +256,7 @@ export default function Home() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'praying' && (
|
{activeTab === 'praying' && (
|
||||||
<ThingsToPrayFor prayers={prayers.filter(p => !p.answered)} onEdit={handleSelectPrayer} />
|
<ThingsToPrayFor prayers={prayers.filter(p => !p.answered)} onEdit={handleSelectPrayer} onMarkPrayed={handleMarkPrayed} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'reflections' && (
|
{activeTab === 'reflections' && (
|
||||||
|
|||||||
@@ -14,8 +14,6 @@ interface DailyEntryProps {
|
|||||||
onAnsweredChange?: (answered: boolean) => void;
|
onAnsweredChange?: (answered: boolean) => void;
|
||||||
answerDetails?: string;
|
answerDetails?: string;
|
||||||
onAnswerDetailsChange?: (details: string) => void;
|
onAnswerDetailsChange?: (details: string) => void;
|
||||||
prayFrequency?: number;
|
|
||||||
onPrayFrequencyChange?: (frequency: number) => void;
|
|
||||||
onSubmit: (e: React.FormEvent) => void;
|
onSubmit: (e: React.FormEvent) => void;
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
isEditing?: boolean;
|
isEditing?: boolean;
|
||||||
@@ -32,8 +30,6 @@ export default function DailyEntry({
|
|||||||
onAnsweredChange,
|
onAnsweredChange,
|
||||||
answerDetails = '',
|
answerDetails = '',
|
||||||
onAnswerDetailsChange,
|
onAnswerDetailsChange,
|
||||||
prayFrequency = 1,
|
|
||||||
onPrayFrequencyChange,
|
|
||||||
onSubmit,
|
onSubmit,
|
||||||
loading = false,
|
loading = false,
|
||||||
isEditing = false,
|
isEditing = false,
|
||||||
@@ -120,28 +116,6 @@ export default function DailyEntry({
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Prayer Frequency Slider */}
|
|
||||||
<div className="bg-slate-800/40 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50">
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="block text-sm font-semibold text-slate-300 mb-2">📅 Pray For (times per week)</label>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
value={prayFrequency}
|
|
||||||
onChange={(e) => onPrayFrequencyChange?.(parseInt(e.target.value))}
|
|
||||||
className="flex-1 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
|
||||||
/>
|
|
||||||
<span className="ml-4 text-lg font-bold text-blue-400 min-w-[50px]">{prayFrequency}x</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-xs text-slate-500 mt-2">
|
|
||||||
<span>1× week</span>
|
|
||||||
<span>Daily</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Answer Details */}
|
{/* Answer Details */}
|
||||||
{answered && (
|
{answered && (
|
||||||
<div className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 animate-in fade-in-50 duration-300">
|
<div className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 animate-in fade-in-50 duration-300">
|
||||||
|
|||||||
+12
-19
@@ -34,16 +34,25 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
|
|||||||
const calculateStreak = () => {
|
const calculateStreak = () => {
|
||||||
if (prayers.length === 0) return 0;
|
if (prayers.length === 0) return 0;
|
||||||
|
|
||||||
const prayerDates = Array.from(new Set(prayers.map(p => p.date))).sort().reverse();
|
// Get all dates where user either created a prayer OR marked something as prayed for
|
||||||
|
const activityDates = new Set<string>();
|
||||||
|
prayers.forEach(p => {
|
||||||
|
activityDates.add(p.date); // Date prayer was created
|
||||||
|
if (p.lastPrayedFor) {
|
||||||
|
activityDates.add(p.lastPrayedFor); // Date marked as prayed for
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedDates = Array.from(activityDates).sort().reverse();
|
||||||
let streak = 0;
|
let streak = 0;
|
||||||
let checkDate = new Date(today);
|
let checkDate = new Date(today);
|
||||||
|
|
||||||
for (let i = 0; i < 365; i++) {
|
for (let i = 0; i < 365; i++) {
|
||||||
const dateStr = checkDate.toISOString().split('T')[0];
|
const dateStr = checkDate.toISOString().split('T')[0];
|
||||||
if (prayerDates.includes(dateStr)) {
|
if (sortedDates.includes(dateStr)) {
|
||||||
streak++;
|
streak++;
|
||||||
} else if (i === 0) {
|
} else if (i === 0) {
|
||||||
// If today has no prayer, streak is broken (unless we haven't prayed today yet, which is ok)
|
// If today has no activity, streak is broken
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
break;
|
break;
|
||||||
@@ -54,23 +63,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
|
|||||||
return streak;
|
return streak;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Calculate frequency compliance - how many active items being prayed for
|
|
||||||
const frequencyCompliance = () => {
|
|
||||||
const activePrayers = prayers.filter(p => !p.answered && p.prayFrequency);
|
|
||||||
if (activePrayers.length === 0) return 0;
|
|
||||||
|
|
||||||
// Check today's date
|
|
||||||
const todayPrayers = prayers.filter(p => p.date === today);
|
|
||||||
return {
|
|
||||||
total: activePrayers.length,
|
|
||||||
prayedToday: activePrayers.filter(ap =>
|
|
||||||
todayPrayers.some(tp => tp.prayFor === ap.prayFor || tp.id === ap.id)
|
|
||||||
).length,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const streak = calculateStreak();
|
const streak = calculateStreak();
|
||||||
const frequencyStats = frequencyCompliance();
|
|
||||||
|
|
||||||
// Calculate more stats
|
// Calculate more stats
|
||||||
const avgPrayerLength = totalPrayers > 0
|
const avgPrayerLength = totalPrayers > 0
|
||||||
|
|||||||
@@ -17,9 +17,10 @@ interface Prayer {
|
|||||||
interface ThingsToPrayForProps {
|
interface ThingsToPrayForProps {
|
||||||
prayers: Prayer[];
|
prayers: Prayer[];
|
||||||
onEdit: (prayer: Prayer) => void;
|
onEdit: (prayer: Prayer) => void;
|
||||||
|
onMarkPrayed: (prayerId: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProps) {
|
export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: ThingsToPrayForProps) {
|
||||||
// Filter for unanswered prayers
|
// Filter for unanswered prayers
|
||||||
const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) =>
|
const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) =>
|
||||||
new Date(b.date).getTime() - new Date(a.date).getTime()
|
new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||||
@@ -78,52 +79,50 @@ export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProp
|
|||||||
const daysAgo = Math.floor(
|
const daysAgo = Math.floor(
|
||||||
(new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
|
(new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
|
||||||
);
|
);
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
const prayedToday = prayer.lastPrayedFor === today;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<div
|
||||||
key={prayer.id}
|
key={prayer.id}
|
||||||
onClick={() => onEdit(prayer)}
|
className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 transition-all hover:shadow-xl hover:bg-slate-800/80"
|
||||||
className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-2"
|
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className="text-3xl mt-0.5">🙏</div>
|
<div className="text-3xl mt-0.5">🙏</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-base text-slate-200 group-hover:text-white line-clamp-3">
|
<p className="text-base text-slate-200 line-clamp-3 mb-3">
|
||||||
{prayer.text}
|
{prayer.text}
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-3 space-y-2">
|
<div className="flex items-center justify-between gap-3">
|
||||||
<div className="flex items-center justify-between text-xs">
|
<span className="text-xs text-slate-500">
|
||||||
<span className="text-slate-500">
|
{daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
|
||||||
{daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
|
</span>
|
||||||
</span>
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
<button
|
||||||
Edit →
|
onClick={(e) => {
|
||||||
</span>
|
e.stopPropagation();
|
||||||
|
onMarkPrayed(prayer.id);
|
||||||
|
}}
|
||||||
|
disabled={prayedToday}
|
||||||
|
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
|
||||||
|
prayedToday
|
||||||
|
? 'bg-green-900/40 text-green-300 border border-green-500/30 cursor-not-allowed'
|
||||||
|
: 'bg-blue-900/40 text-blue-300 border border-blue-500/30 hover:bg-blue-900/60 hover:border-blue-400/50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{prayedToday ? '✓ Prayed Today' : '🙏 Mark Prayed'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => onEdit(prayer)}
|
||||||
|
className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-700/50 text-slate-300 border border-slate-600/50 hover:bg-slate-700/80 hover:border-slate-500/50 transition-all"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{prayer.prayFrequency && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="text-xs font-semibold text-amber-400">Pray:</div>
|
|
||||||
<div className="flex gap-1">
|
|
||||||
{Array.from({ length: prayer.prayFrequency }).map((_, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="w-2 h-2 rounded-full bg-amber-400/60"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{Array.from({ length: 7 - prayer.prayFrequency }).map((_, i) => (
|
|
||||||
<div
|
|
||||||
key={`empty-${i}`}
|
|
||||||
className="w-2 h-2 rounded-full bg-slate-600/40"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-slate-400">× per week</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user