Adds back the ability to suggest gifts for each participant

arcanis · Nov 30, 2024 · ede363a · ede363a
1 parent 129c2dd
commit ede363a
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 34 deletions.
diff --git a/src/components/ParticipantRow.tsx b/src/components/ParticipantRow.tsx
@@ -38,7 +38,7 @@ export function ParticipantRow({
           <button
             onClick={onOpenRules}
             className={`px-2 sm:px-3 py-2 rounded hover:opacity-80 flex-shrink-0 ${
-              participant.rules.length > 0 
+              participant.rules.length > 0 || participant.hint
                 ? 'bg-yellow-500 text-white' 
                 : 'bg-gray-200 text-gray-600'
             }`}

diff --git a/src/components/ParticipantsList.tsx b/src/components/ParticipantsList.tsx
@@ -21,7 +21,6 @@ export function ParticipantsList({
 }: ParticipantsListProps) {
   const { t } = useTranslation();
   const [nextParticipantId, setNextParticipantId] = useState(() => crypto.randomUUID());
-  const [isTextView, setIsTextView] = useState(false);
 
   const updateParticipant = (id: string, name: string) => {
     if (id === nextParticipantId) {
@@ -53,8 +52,12 @@ export function ParticipantsList({
   }];
 
   return (
-    <div className="space-y-2">
-      <div className="space-y-2 pr-2">
+    <div className="space-y-4">
+      <p className="mt-1 text-xs text-gray-500">
+        {t('participants.generationWarning')}
+      </p>
+
+      <div className="space-y-2">
         {participantsList.map((participant, index) => (
           <ParticipantRow
             key={participant.id}

diff --git a/src/components/ParticipantsTextView.tsx b/src/components/ParticipantsTextView.tsx
@@ -1,5 +1,5 @@
 import { Participant } from '../types';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { parseParticipantsText, ParseError, formatParticipantText } from '../utils/parseParticipants';
 import { ArrowsClockwise } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
@@ -19,7 +19,7 @@ export function ParticipantsTextView({ participants, onChangeParticipants, onGen
   const handleChange = (newText: string) => {
     setText(newText);
 
-    const result = parseParticipantsText(newText);
+    const result = parseParticipantsText(newText, participants);
     if (result.ok) {
       setError(null);
       onChangeParticipants(result.participants);

diff --git a/src/components/RulesModal.tsx b/src/components/RulesModal.tsx
@@ -22,6 +22,7 @@ export function RulesModal({
   const { t } = useTranslation();
   const participant = participants[participantId];
   const [localRules, setLocalRules] = useState<Rule[]>(participant.rules);
+  const [localHint, setLocalHint] = useState<string>(participant.hint || '');
 
   // Add escape key handler
   useEffect(() => {
@@ -56,6 +57,7 @@ export function RulesModal({
   const handleSave = () => {
     onChangeParticipants(produce(participants, draft => {
       draft[participantId].rules = localRules;
+      draft[participantId].hint = localHint || undefined;
     }));
     onClose();
   };
@@ -73,6 +75,19 @@ export function RulesModal({
           {t('rules.title', { name: participant.name })}
         </h2>
 
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            {t('rules.hintLabel')}
+          </label>
+          <input
+            type="text"
+            value={localHint}
+            onChange={(e) => setLocalHint(e.target.value)}
+            placeholder={t('rules.hintPlaceholder')}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
         <div className="space-y-4 mb-6">
           {localRules.map((rule, index) => (
             <div key={index} className="flex gap-2 items-center">

diff --git a/src/components/SecretSantaLinks.tsx b/src/components/SecretSantaLinks.tsx
@@ -19,17 +19,20 @@ export function SecretSantaLinks({ assignments, instructions, participants, onGe
   const currentHash = generateGenerationHash(participants);
   const hasChanged = currentHash !== assignments.hash;
 
-  const adjustedPairings = assignments.pairings.map(({giver, receiver}): [string, string] => [
+  const adjustedPairings = assignments.pairings.map(({giver, receiver}): [string, string, string | undefined] => [
     participants[giver.id]?.name ?? giver.name,
     participants[receiver.id]?.name ?? receiver.name,
+    participants[receiver.id]?.hint,
   ]);
 
+  console.log(assignments.pairings, participants)
+
   adjustedPairings.sort((a, b) => {
     return a[0].localeCompare(b[0]);
   });
 
   const handleExportCSV = () => {
-    const csvContent = generateCSV(adjustedPairings);
+    const csvContent = generateCSV(adjustedPairings.map(([giver, receiver]) => [giver, receiver]));
     const blob = new Blob([csvContent], { type: 'text/csv' });
     const url = window.URL.createObjectURL(blob);
 
@@ -69,13 +72,13 @@ export function SecretSantaLinks({ assignments, instructions, participants, onGe
         </button>
       </div>
       <div className="grid grid-cols-[minmax(100px,auto)_1fr] gap-3">
-        {adjustedPairings.map(([giver, receiver]) => (
+        {adjustedPairings.map(([giver, receiver, hint]) => (
           <React.Fragment key={giver}>
             <span className="font-medium self-center">
               {giver}:
             </span>
             <CopyButton
-              textToCopy={() => generateAssignmentLink(giver, receiver, instructions)}
+              textToCopy={() => generateAssignmentLink(giver, receiver, hint, instructions)}
               className="p-2 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center justify-center gap-2"
             >
               {t('links.copySecretLink')}

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -34,6 +34,7 @@ export const en = {
   },
   participants: {
     title: "Participants",
+    generationWarning: "Important: Any change made to the participant list or settings will require creating new pairings. Existing links won't be retroactively modified.", 
     addPerson: "Add Person",
     generatePairs: "Generate Pairings",
     enterName: "Enter participant name",
@@ -53,7 +54,9 @@ export const en = {
     addMustRule: "Force a Pairing",
     addMustNotRule: "Prevent a Pairing",
     cancel: "Cancel",
-    saveRules: "Save Rules"
+    saveRules: "Save Rules",
+    hintLabel: 'Gift Hint',
+    hintPlaceholder: 'Enter a hint about gift preferences (optional)',
   },
   links: {
     title: "Links to Share",

diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
@@ -36,6 +36,7 @@ export const fr: Translations = {
   },
   participants: {
     title: "Participants",
+    generationWarning: "Important: Toute modification de la liste des participants ou de leurs paramètres nécessitera la création de nouvelles associations. Les liens existants ne seront pas modifiés.",
     addPerson: "Ajouter une Personne",
     generatePairs: "Générer les Associations",
     enterName: "Entrez le nom du participant",
@@ -55,7 +56,9 @@ export const fr: Translations = {
     addMustRule: "Forcer une association",
     addMustNotRule: "Exclure une association",
     cancel: "Annuler",
-    saveRules: "Enregistrer les Règles"
+    saveRules: "Enregistrer les Règles",
+    hintLabel: 'Suggestions pour le cadeau',
+    hintPlaceholder: 'Entrez une indication sur le type de cadeau adapté à ce participant (optionnel)',
   },
   links: {
     title: "Liens à Partager",

diff --git a/src/pages/Pairing.tsx b/src/pages/Pairing.tsx
@@ -10,22 +10,31 @@ import { ArrowLeft, Info } from '@phosphor-icons/react';
 import { motion } from 'framer-motion';
 import CryptoJS from 'crypto-js';
 import { Layout } from "../components/Layout";
+import { ReceiverData } from "../types";
 
-async function loadPairing(searchParams: URLSearchParams): Promise<[string, string]> {
+async function loadPairing(searchParams: URLSearchParams): Promise<[string, ReceiverData]> {
   // Legacy pairings, not generated anymore; remove after 2025-01-01
   if (searchParams.has(`name`) && searchParams.has(`key`) && searchParams.has(`pairing`)) {
     const name = searchParams.get(`name`)!;
     const key = searchParams.get(`key`)!;
     const pairing = searchParams.get(`pairing`)!;
 
-    return [name, CryptoJS.AES.decrypt(pairing, key).toString(CryptoJS.enc.Utf8)];
+    return [name, {name: CryptoJS.AES.decrypt(pairing, key).toString(CryptoJS.enc.Utf8)}];
   }
 
   if (searchParams.has(`to`)) {
     const from = searchParams.get('from')!;
     const to = searchParams.get('to')!;
+    const decrypted = await decryptText(to);
 
-    return [from, await decryptText(to)];
+    try {
+      // Try to parse as JSON first (new format with hint)
+      const data = JSON.parse(decrypted) as ReceiverData;
+      return [from, data];
+    } catch {
+      // If parsing fails, it's the old format (just the name)
+      return [from, {name: decrypted, hint: undefined} as ReceiverData];
+    }
   }
 
   throw new Error(`Missing key or to parameter in search params`);
@@ -36,13 +45,13 @@ export function Pairing() {
   const [searchParams] = useSearchParams();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [receiver, setReceiver] = useState<[string, string] | null>(null);
+  const [assignment, setAssignment] = useState<[string, ReceiverData] | null>(null);
   const [instructions, setInstructions] = useState<string | null>(null);
 
   useEffect(() => {
     const decryptReceiver = async () => {
       try {
-        setReceiver(await loadPairing(searchParams));
+        setAssignment(await loadPairing(searchParams));
         setInstructions(searchParams.get('info'));
       } catch (err) {
         console.error('Decryption error:', err);
@@ -72,7 +81,7 @@ export function Pairing() {
   return (
     <Layout menuItems={menuItems}>
       <div>
-        {!loading && (
+        {!loading && assignment && (
           <motion.div
             initial={{ rotateZ: -360 * 1, scale: 0 }}
             animate={{ rotateZ: 0, scale: 1, opacity: 1 }}
@@ -87,20 +96,21 @@ export function Pairing() {
                 <Trans
                   i18nKey="pairing.assignment"
                   components={{
-                    name: <span className="font-semibold">{receiver![0]}</span>
+                    name: <span className="font-semibold">{assignment![0]}</span>
                   }}
                 />
               </p>
               <div className="text-8xl font-bold text-center p-6 font-dancing-script">
-                {receiver![1]}
+                {assignment[1].name}
               </div>
               {instructions && (
                 <div className="mt-6 flex p-4 bg-gray-50 rounded-lg leading-6 text-gray-600 whitespace-pre-wrap">
                   <div className="mr-4">
                     <Info size={24}/>
                   </div>
-                  <div>
-                    {instructions}
+                  <div className="space-y-2">
+                    {assignment[1].hint ? <p>{assignment[1].hint}</p> : null}
+                    <p>{instructions}</p>
                   </div>
                 </div>
               )}

diff --git a/src/types.ts b/src/types.ts
@@ -6,7 +6,14 @@ export interface Rule {
 export interface Participant {
   id: string;
   name: string;
+  hint?: string;
   rules: Rule[];
 }
 
 export type Participants = Record<string, Participant>;
+
+// New type for encrypted data
+export interface ReceiverData {
+  name: string;
+  hint?: string;
+}
diff --git a/src/utils/generatePairs.ts b/src/utils/generatePairs.ts
@@ -14,7 +14,7 @@ export function checkRules(rules: Rule[]): string | null {
 }
 
 export function generateGenerationHash(participants: Record<string, Participant>): string {
-  return JSON.stringify(Object.values(participants).map(p => ({rules: p.rules})));
+  return JSON.stringify(Object.values(participants).map(p => ({rules: p.rules, hint: p.hint})));
 }
 
 export type GeneratedPairs = {

diff --git a/src/utils/links.ts b/src/utils/links.ts
@@ -1,15 +1,24 @@
 import { encryptText } from "./crypto";
+import { ReceiverData } from "../types";
 
-export async function generateAssignmentLink(giver: string, receiver: string, instructions?: string) {
+export async function generateAssignmentLink(giver: string, receiver: string, receiverHint?: string, instructions?: string) {
   const baseUrl = `${window.location.origin}${window.location.pathname.replace(/\/[^/]*$/, '')}`;
-  const encryptedReceiver = await encryptText(receiver);
+
+  // If there's a hint, encrypt a JSON object
+  const dataToEncrypt = receiverHint
+    ? JSON.stringify({ name: receiver, hint: receiverHint } as ReceiverData)
+    : receiver;
+
+  const encryptedReceiver = await encryptText(dataToEncrypt);
   const params = new URLSearchParams({
     from: giver,
     to: encryptedReceiver,
   });
+
   if (instructions?.trim()) {
     params.set('info', instructions.trim());
   }
+
   return `${baseUrl}/pairing?${params.toString()}`;
 }
 

diff --git a/src/utils/parseParticipants.ts b/src/utils/parseParticipants.ts
@@ -25,39 +25,74 @@ export function formatParticipantText(participants: Record<string, Participant>)
       .filter(r => r.type === 'mustNot')
       .map(r => `!${participants[r.targetParticipantId]?.name ?? ''}`);
 
-    return `${[participant.name, ...mustRules, ...mustNotRules].join(' ')}\n`;
+    const hintPart = participant.hint
+      ? [`(${participant.hint})`]
+      : [];
+
+    return `${[participant.name, ...hintPart, ...mustRules, ...mustNotRules].join(' ')}\n`;
   }).join('');
 }
 
-export function parseParticipantsText(input: string): ParseResult {
+const PAREN_1 = /[!=(]/g;
+const PAREN_2 = /[()]/g;
+
+export function parseParticipantsText(input: string, existingParticipants?: Record<string, Participant>): ParseResult {
   const lines = input.split('\n').map(line => line.trim());
   const result: Record<string, Participant> = {};
   const nameToId: Record<string, string> = {};
 
   const parsedLines: {
     line: number,
     name: string,
+    hint?: string,
     extra: string[],
   }[] = [];
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i].trim();
     if (line === '') continue;
 
-    const parts = line
+    let splitIndex = PAREN_1.exec(line)?.index;
+
+    const name = typeof splitIndex === 'number'
+      ? line.slice(0, splitIndex).trim()
+      : line.trim();
+
+    let hint: string | undefined;
+    if (typeof splitIndex === 'number' && line[splitIndex] === '(') {
+      let depth = 1;
+      let j = splitIndex + 1;
+
+      while (depth > 0 && j < line.length) {
+        if (line[j] === '(') depth++;
+        if (line[j] === ')') depth--;
+        j++;
+      }
+
+      hint = line.slice(splitIndex + 1, j - 1);
+      splitIndex = j;
+    }
+
+    const remainingPart = line.slice(splitIndex);
+    const parts = remainingPart
+      .trim()
       .split(/([!=])/)
       .map(part => part.trim());
 
-    const [name, ...extra] = parts;
     if (!name) {
       return { ok: false, line: i + 1, key: 'errors.emptyName' };
     }
 
-    parsedLines.push({ line: i + 1, name, extra });
+    parsedLines.push({ 
+      line: i + 1, 
+      name: name.trim(), 
+      hint: hint?.trim(),
+      extra: parts.filter(Boolean)
+    });
   }
 
   // First pass: create participants and build name-to-id mapping
-  for (const {line, name} of parsedLines) {
+  for (const {line, name, hint} of parsedLines) {
     if (nameToId[name]) {
       return { 
         ok: false, 
@@ -67,9 +102,9 @@ export function parseParticipantsText(input: string): ParseResult {
       };
     }
 
-    const id = crypto.randomUUID();
+    const id = existingParticipants?.[name]?.id ?? crypto.randomUUID();
     nameToId[name] = id;
-    result[id] = { id, name, rules: [] };
+    result[id] = { id, name, hint, rules: [] };
   }
 
   // Second pass: process rules
@@ -112,4 +147,4 @@ export function parseParticipantsText(input: string): ParseResult {
   }
 
   return { ok: true, participants: result };
-} 
+}