toggler is working

README.md

@@ -1,4 +1,4 @@
-#Advent of Code
+#Advent of Code#
 
 My solutions to the challenges for Advent of Code 2023
 

src/App.css

@@ -33,7 +33,8 @@
 }
 
 .card {
-  padding: 2em;
+  padding: 1em;
+  max-width:50em;
 }
 
 .split-card {
@@ -46,8 +47,8 @@
 }
 
 .large-editor-textarea {
-  margin: 16px;
+  margin: 6px;
   border-radius:1em;
-  height:20em;
+  height:25em;
   width:100%;
 }

src/App.tsx

@@ -2,33 +2,36 @@ import './App.css';
 import reactLogo from './assets/react.svg';
 import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { DayPicker } from 'react-day-picker';
-import { getPuzzlesByDay } from 'data/puzzles/getPuzzlesByDay';
 import { PuzzleResult } from 'models';
-import { solvePuzzle } from 'data/solutions/solvePuzzle';
+import { solvePuzzle } from 'data/solvePuzzle';
+import { NotificationBox } from 'components/notification-box/NotificationBox';
 
 import 'react-day-picker/dist/style.css';
-import 'components/notification-box/NotificationBox.css';
+import { Toggler } from 'components/toggler/Toggler';
-import NotificationBox from 'components/notification-box/NotificationBox';
 
 function App() {
-    let puzzles: string[] = [];
+    const errorText = `Uh oh, we couldn't find an answer for that puzzle!`;
     const puzzleInputRef = useRef<HTMLTextAreaElement | null>(null);
 
     const [selectedDate, setSelectedDate] = useState<Date>();
-    // const [ selectedPuzzle, setSelectedPuzzle ] = useState<Date>();
     const [puzzleInput, setPuzzleInput] = useState<string>();
-    const [answer, setAnswer] = useState<PuzzleResult>();
+    const [answer, setAnswer] = useState<PuzzleResult | null>(null);
+    const [badAnswer, setBadAnswer] = useState<boolean>(false);
+    const [answerPart2, setAnswerPart2] = useState<boolean>(false);
 
     const handleChangeDate = async (date: Date) => {
-        puzzles = [];
+        setAnswer(null);
         setSelectedDate(date);
-        const day = date.getDate();
+    };
-        const thisDaysPuzzles = await getPuzzlesByDay(day);
+
-        puzzles.push(...thisDaysPuzzles);
+    const handleToggle = async (checked: boolean) => {
+        setAnswer(null);
+        setAnswerPart2(checked);
     };
 
     const handleChangePuzzleInput = useCallback(
         (e: ChangeEvent<HTMLTextAreaElement>) => {
+            setAnswer(null);
             const { value } = e.currentTarget;
             setPuzzleInput(value);
         },
@@ -36,14 +39,15 @@ function App() {
     );
 
     const handleSolvePuzzle = async () => {
+        setAnswer(null);
         const day = selectedDate?.getDate();
-        const answer = !!day && (await solvePuzzle(day, puzzleInput || ''));
+        const answer = !!day && (await solvePuzzle(day, answerPart2, puzzleInput || ''));
         answer && setAnswer(answer);
+        const badAnswer = !!(answer && answer.answer === '' && !answer.values.length);
+        setBadAnswer(badAnswer);
     };
 
     const disabled = !(puzzleInput && selectedDate);
-    const badAnswer = !!(answer && answer.answer === '' && !answer.values.length);
-    const errorText = `Uh oh, we couldn't find an answer for that puzzle!`;
 
     return (
         <div className="App">
@@ -54,29 +58,16 @@ function App() {
             </div>
             <h1>Advent of Code Solutions</h1>
             <p className="instructions">
-                Please select a date and a puzzle, then enter some input, and click
+                Please select a date and enter some input, and click &quot;Solve&quot; to see the
-                &quot;Solve&quot; to see the output.
+                answer!
             </p>
             <div className="card split-card">
-                <div>
-                    <h4>Date</h4>
                 <DayPicker
                     required={true}
                     mode="single"
                     selected={selectedDate}
                     onDayClick={handleChangeDate}
                 />
-                </div>
-                {/* <div>
-          <h4>Puzzle</h4>
-          <ul>
-            {puzzles.map((puzzle, index) => 
-              <li key={ index }>{puzzle}</li>
-            )}
-          </ul>
-        </div> */}
-                <div>
-                    <h4>Input</h4>
                 <textarea
                     className="large-editor-textarea"
                     ref={puzzleInputRef}
@@ -86,12 +77,25 @@ function App() {
                     value={puzzleInput}
                 />
             </div>
+            <div className="card">
+                <Toggler checked={answerPart2} onChange={handleToggle} />
             </div>
             <div className="card">
                 <button disabled={disabled} onClick={handleSolvePuzzle}>
                     Solve
                 </button>
             </div>
+            {selectedDate && answer && !badAnswer && (
+                <div className="card">
+                    <h4>
+                        The answer to Puzzle {selectedDate?.getDate()} Part{' '}
+                        {answerPart2 ? '2' : '1'} is: {answer.answer}
+                    </h4>
+                    {answer.values.length && (
+                        <p className="instructions">{answer.values.join(', ')}</p>
+                    )}
+                </div>
+            )}
             <NotificationBox visible={badAnswer} text={errorText} />
         </div>
     );

src/components/notification-box/NotificationBox.tsx

@@ -1,3 +1,5 @@
+import 'components/notification-box/NotificationBox.css';
+
 interface Props {
     visible: boolean;
     text: string;

src/components/toggler/Toggler.css

@@ -0,0 +1,8 @@
+.toggler {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 1em;
+    justify-items: center;
+}

src/components/toggler/toggler.tsx

@@ -1,15 +1,17 @@
 import Switch from 'react-switch';
 
+import 'components/toggler/Toggler.css';
+
 interface Props {
     checked: boolean;
-    handleChange: any;
+    onChange(checked: boolean): void;
 }
 
-export const Toggler = ({ handleChange, checked = false }: Props) => {
+export const Toggler = ({ onChange, checked = false }: Props) => {
     return (
-        <label>
+        <label className="toggler">
             <span>Answer Part 2</span>
-            <Switch onChange={handleChange} checked={checked} />
+            <Switch onChange={(checked) => onChange(checked)} checked={checked} />
         </label>
     );
 };

src/data/puzzles/getPuzzlesByDay.ts

@@ -1,24 +0,0 @@
-const domParser = new DOMParser(); // the dom parser is reusable
-
-export async function getPuzzlesByDay(day: number): Promise<string[]> {
-    const document = await fetchDocument(`https://adventofcode.com/2022/day/${day}`);
-
-    const puzzleNames: string[] = [];
-    const dayDescriptions = document.getElementsByClassName('day-desc');
-
-    for (const dayDescription of dayDescriptions) {
-        const name = dayDescription.children[0].textContent;
-        name && puzzleNames.push(name);
-    }
-
-    return puzzleNames;
-}
-
-async function fetchDocument(url: string) {
-    const headers = new Headers({});
-    headers.set('Content-Type', 'text/html');
-    headers.set('Access-Control-Allow-Origin', '*');
-    const response = await fetch(url, { headers });
-    const text = await response.text();
-    return domParser.parseFromString(text, 'text/html');
-}

src/data/solutions/day_2.ts

@@ -0,0 +1,7 @@
+export const day_2 = (input: string) => {
+    return { values: [], answer: '' };
+};
+
+export const day_2_part_2 = (input: string) => {
+    return { values: [], answer: '' };
+};

src/data/solutions/day_3.ts

@@ -0,0 +1,7 @@
+export const day_3 = (input: string) => {
+    return { values: [], answer: '' };
+};
+
+export const day_3_part_2 = (input: string) => {
+    return { values: [], answer: '' };
+};

src/data/solutions/day_4.ts

@@ -0,0 +1,7 @@
+export const day_4 = (input: string) => {
+    return { values: [], answer: '' };
+};
+
+export const day_4_part_2 = (input: string) => {
+    return { values: [], answer: '' };
+};

src/data/solutions/day_5.ts

@@ -0,0 +1,7 @@
+export const day_5 = (input: string) => {
+    return { values: [], answer: '' };
+};
+
+export const day_5_part_2 = (input: string) => {
+    return { values: [], answer: '' };
+};

src/data/solutions/solvePuzzle.ts

@@ -1,11 +0,0 @@
-import { day_1 } from 'data/solutions/day_1';
-import { PuzzleResult } from 'models';
-
-export async function solvePuzzle(day: number, input: string): Promise<PuzzleResult> {
-    switch (day) {
-        case 1:
-            return day_1(input);
-        default:
-            return { values: [], answer: '' };
-    }
-}

src/data/solvePuzzle.ts

@@ -0,0 +1,79 @@
+import { day_1, day_1_part_2 } from 'data/solutions/day_1';
+import { PuzzleResult } from 'models';
+import { day_2, day_2_part_2 } from './solutions/day_2';
+import { day_3_part_2, day_3 } from './solutions/day_3';
+import { day_4_part_2, day_4 } from './solutions/day_4';
+import { day_5_part_2, day_5 } from './solutions/day_5';
+
+export async function solvePuzzle(
+    day: number,
+    part2: boolean,
+    input: string,
+): Promise<PuzzleResult> {
+    switch (day) {
+        case 1:
+            return part2 ? day_1_part_2(input) : day_1(input);
+        case 2:
+            return part2 ? day_2_part_2(input) : day_2(input);
+        case 3:
+            return part2 ? day_3_part_2(input) : day_3(input);
+        case 4:
+            return part2 ? day_4_part_2(input) : day_4(input);
+        case 5:
+            return part2 ? day_5_part_2(input) : day_5(input);
+        // case 6:
+        //     return part2 ? day_6_part_2(input) : day_6(input);
+        // case 7:
+        //     return part2 ? day_7_part_2(input) : day_7(input);
+        // case 8:
+        //     return part2 ? day_8_part_2(input) : day_8(input);
+        // case 9:
+        //     return part2 ? day_9_part_2(input) : day_9(input);
+        // case 10:
+        //     return part2 ? day_10_part_2(input) : day_10(input);
+        // case 11:
+        //     return part2 ? day_11_part_2(input) : day_11(input);
+        // case 12:
+        //     return part2 ? day_12_part_2(input) : day_12(input);
+        // case 13:
+        //     return part2 ? day_13_part_2(input) : day_13(input);
+        // case 14:
+        //     return part2 ? day_14_part_2(input) : day_14(input);
+        // case 15:
+        //     return part2 ? day_15_part_2(input) : day_15(input);
+        // case 16:
+        //     return part2 ? day_16_part_2(input) : day_16(input);
+        // case 17:
+        //     return part2 ? day_17_part_2(input) : day_17(input);
+        // case 18:
+        //     return part2 ? day_18_part_2(input) : day_18(input);
+        // case 19:
+        //     return part2 ? day_19_part_2(input) : day_19(input);
+        // case 20:
+        //     return part2 ? day_20_part_2(input) : day_20(input);
+        // case 21:
+        //     return part2 ? day_21_part_2(input) : day_21(input);
+        // case 22:
+        //     return part2 ? day_22_part_2(input) : day_22(input);
+        // case 23:
+        //     return part2 ? day_23_part_2(input) : day_23(input);
+        // case 24:
+        //     return part2 ? day_24_part_2(input) : day_24(input);
+        // case 25:
+        //     return part2 ? day_25_part_2(input) : day_25(input);
+        // case 26:
+        //     return part2 ? day_26_part_2(input) : day_26(input);
+        // case 27:
+        //     return part2 ? day_27_part_2(input) : day_27(input);
+        // case 28:
+        //     return part2 ? day_28_part_2(input) : day_28(input);
+        // case 29:
+        //     return part2 ? day_29_part_2(input) : day_29(input);
+        // case 30:
+        //     return part2 ? day_30_part_2(input) : day_30(input);
+        // case 31:
+        //     return part2 ? day_31_part_2(input) : day_31(input);
+        default:
+            return { values: [], answer: '' };
+    }
+}

src/index.css

@@ -34,7 +34,7 @@ body {
 
 h1 {
   font-size: 3.2em;
-  line-height: 1.1;
+  line-height: 0.5;
 }
 
 button {