challenge submission

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // Use IntelliSense to find out which attributes exist for C# debugging
+            // Use hover for the description of the existing attributes
+            // For further information visit https://github.com/dotnet/vscode-csharp/blob/main/debugger-launchjson.md
+            "name": ".NET Core Launch (console)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/CodingChallenge.PirateSpeak.Tests/bin/Debug/netcoreapp3.1/CodingChallenge.PirateSpeak.Tests.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/CodingChallenge.PirateSpeak.Tests",
+            // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
+            "console": "internalConsole",
+            "stopAtEntry": false
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,41 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/CodingChallenge.sln",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/CodingChallenge.sln",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "--project",
+                "${workspaceFolder}/CodingChallenge.sln"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

CodingChallenge.PirateSpeak/Solution.cs

@@ -7,7 +7,21 @@ public class Solution
     {
         public string[] GetPossibleWords(string jumble, string[] dictionary)
         {
-            throw new NotImplementedException();
+            //move jumble to char array
+            var jumbleChars = jumble.ToCharArray();
+
+            //sort jumble
+            Array.Sort(jumbleChars);
+
+            //sort each string in dictionary and compare to jumble
+            var possibleWords = dictionary.Where(word =>
+            {
+                var wordChars = word.ToCharArray();
+                Array.Sort(wordChars);
+                return new string(wordChars) == new string(jumbleChars);
+            }).ToArray();
+
+            return possibleWords;
         }
     }
 }

CodingChallenge.UI/TodoChallenge/package.json

@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "node-sass": "^5.0.0",
+    "chart.js": "^4.4.0",
+    "node-sass": "^8.0.0",
     "react": "^17.0.2",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "redux": "^4.1.0",
     "redux-thunk": "2.3.0",
     "web-vitals": "^1.0.1"

CodingChallenge.UI/TodoChallenge/src/App.js

@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 import TodoList from "./components/todo/TodoList";
+import Chart from "./components/todo/TodoChart";
 import "./App.scss";
 import './button.scss';
+import svc from './TodoService';
 
 class App extends Component {
   constructor(props) {
@@ -17,12 +19,14 @@ class App extends Component {
   }
 
   addNewTodo = () => {
-    console.warn('not implemented');
+    svc.addTodo(this.state.newTodo);
   }
 
   render() {
     return (
       <div className="App">
+        <h1>Todo App</h1>
+        <Chart />
         <input type="text" value={this.state.newTodo} onChange={this.textInputChange}></input>
         <button className={"btn--default"} onClick={this.addNewTodo}>Add</button>
         <TodoList />

CodingChallenge.UI/TodoChallenge/src/App.scss

@@ -1,5 +1,5 @@
 .App {
-  text-align: left;
+  text-align: center;
   padding: 20px;
 
   input[type=text] {
@@ -46,3 +46,4 @@
     transform: rotate(360deg);
   }
 }
+

CodingChallenge.UI/TodoChallenge/src/TodoService.js

@@ -14,6 +14,12 @@ const svc =  {
         return Promise.resolve(todo);
     },
 
+    updateTodoText: async (text, id) => {
+        const todos = (await svc.getTodos()).map((item) => (item.id === id ? {...item, text: text} : item));
+        localStorage.setItem(KEY, JSON.stringify(todos));
+        return Promise.resolve(text);
+    },
+
     addTodo: async text => {
         const todos = (await svc.getTodos());
         const nextId = Number(new Date());

CodingChallenge.UI/TodoChallenge/src/components/todo/Todo.js

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {TodoModel} from "../../TodoModel";
 import PropTypes from "prop-types";
 import './todo.scss';
+import svc from "../../TodoService";
 
 const Todo = (props) => {
     const [editing, setStateEditing] =  useState(false);
@@ -19,6 +20,7 @@ const Todo = (props) => {
     const saveText = () => {
         if (!editing) return;
         props.onTextChange(editingText, props.todo.id);
+        svc.updateTodoText(editingText, props.todo.id);
         toggleEditText();
     };
 

CodingChallenge.UI/TodoChallenge/src/components/todo/TodoChart.js

@@ -0,0 +1,56 @@
+import React, {useState, useEffect} from 'react';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+import './TodoChart.scss';
+import {connect} from "react-redux";
+import { getTodos } from '../../todoActions';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const TodoChart = ({todos, getTodos}) => {
+
+  useEffect(() => {
+    getTodos();
+  }, [getTodos]);
+
+  const completedCount = todos.filter(todo => todo.isComplete).length;
+  const notCompletedCount = todos.filter(todo => !todo.isComplete).length;
+
+  const getData = () => { 
+      return {
+        labels: ['Done', 'Not Done'],
+        datasets: [
+          {
+            data: [completedCount, notCompletedCount],
+            backgroundColor: [
+              'rgba(75, 192, 192, 0.5)',
+              'rgba(54, 162, 235, 0.5)',
+
+            ],
+            borderColor: [
+              'rgba(75, 192, 192, 1)',
+              'rgba(54, 162, 235, 1)',
+            ],
+            borderWidth: 1,
+          },
+        ],
+      }
+    };
+
+  return (
+      <div className='chart-container'>
+          <Doughnut style={{ position: "relative", margin: "auto", width: "40vw" }} data={getData()}/> 
+      </div>
+  )
+
+}
+
+const mapStateToProps = (state) => ({
+  todos: state.todos ?? []
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getTodos: () => dispatch(getTodos())
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TodoChart);

CodingChallenge.UI/TodoChallenge/src/components/todo/TodoChart.scss

@@ -0,0 +1,11 @@
+.chart-container {
+    position: "relative";
+    margin: "auto"; 
+    width: "80vw";
+    height: "80vh";
+}
+
+.chart {
+    width: "30%";
+    height: "30%";
+}

CodingChallenge.UI/TodoChallenge/src/components/todo/TodoList.js

@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
 import Todo from "./Todo";
 import {TodoListModel} from "../../TodoModel";
 import {connect} from "react-redux";
-import {completeTodo, getTodos, TODO_TEXT_CHANGE} from "../../todoActions";
+import {completeTodo, getTodos, updateTodoText} from "../../todoActions";
 
 const TodoList = ({todos, getTodos, onTodoTextChange, onTodoCompleteChange}) => {
     const [filtered, setFiltered] = useState(true);
@@ -42,7 +42,7 @@ const mapStateToProps = (state) => ({
     todos: state.todos ?? []
 });
 const mapDispatchToProps = (dispatch) => ({
-    onTodoTextChange: (text, id) => dispatch({type: TODO_TEXT_CHANGE, text, id}),
+    onTodoTextChange: (text, id) => dispatch(updateTodoText(text, id)),
     onTodoCompleteChange: (todo) => dispatch(completeTodo(todo)),
     getTodos: () => dispatch(getTodos())
 });

CodingChallenge.UI/TodoChallenge/src/todoActions.js

@@ -13,6 +13,15 @@ export const completeTodo = (todo) => {
     );
 };
 
+export const updateTodoText = (text, id) => {
+    return (dispatch) => (
+        todoSvc.updateTodoText(text, id)
+            .then(() => {
+                return dispatch({type: TODO_TEXT_CHANGE, text, id })
+            })
+    );
+};
+
 export const getTodos = () => {
     return (dispatch) => (
         todoSvc.getTodos()