fixed test cases

README.md

@@ -43,3 +43,5 @@ Our users are keen to be able to add point values to tasks with a natural langua
 ## Feature Four
 
 If you've got some extra time left, it would be great for our users to be able to update the point value of an existing task. Implement the UI however you think best.
+
+Thank you

src/components/CreateEntry.tsx

@@ -28,7 +28,17 @@ export const CreateEntry = ({ onSave }: Props) => {
   const [value, setValue] = useState<string>('');
 
   const handleAdd = () => {
-    value && onSave({ name: value, points: 0 });
+    let actualPoint: number = 0;
+    let points = value.substr(-5);
+    let name: string = value.substr(0, value.length-5);
+    let actualPointString: string = points.substr(0, 2);
+    if (isNaN(parseInt(actualPointString))) {
+      actualPoint = 0;
+      name = value;
+    } else {
+      actualPoint = parseInt(actualPointString.trim());
+    }
+    value && onSave({ name: name.trim(), points: actualPoint });
     setValue('');
   }
 

src/components/ItemCard.tsx

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     marginTop: 2,
     backgroundColor: 'white',
+    fontWeight: 'bold'
   },
   containerCritical: {
     backgroundColor: '#ffdddd',
@@ -19,6 +20,11 @@ const styles = StyleSheet.create({
   },
   textCritical: {
     fontWeight: 'bold',
+  },
+  critical: {
+    backgroundColor: 'red',
+    color: 'yellow',
+    fontWeight: 'bold'
   }
 });
 
@@ -28,7 +34,7 @@ type Props = {
 }
 
 export const ItemCard: React.FC<Props> = ({ children, onDelete, critical }) => (
-  <View testID="itemCard" style={{ ...styles.container, ...(critical ? styles.containerCritical : {}) }}>
+  <View testID="itemCard" style={{ ...styles.container, ...(  styles.critical ) , ...(critical ? styles.containerCritical : {}) }}>
     <Text testID="itemName" style={{ ...styles.text, ...(critical ? styles.textCritical : {}) }}>{children}</Text>
     <Button testID="itemDeleteButton" onPress={onDelete} title="Delete" />
   </View>

src/components/Todos.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text, FlatList, StyleSheet, Button } from 'react-native';
 
 import { CreateEntry } from './CreateEntry';
@@ -15,11 +15,31 @@ const styles = StyleSheet.create({
     fontSize: 16,
     textAlign: 'center',
   },
+  critical: {
+    fontWeight: 'bold'
+  }
 });
 
+const sortItems = (testingITems: Item[]) => {
+  testingITems.sort((item, item2)=>{
+    if(item.points < item2.points)  {
+      return 1;
+    } else if (item.points > item2.points){
+      return -1;
+    }
+    return 0;
+  });
+}
+
 export const Todos = () => {
   const defaultItems = sample.map((item, index) => ({ key: `item${index}`, ...item }));
+  sortItems(defaultItems);
   const [items, setItems] = useState<Item[]>(defaultItems);
+
+  useEffect(()=>{
+    sortItems(items);
+  }, [items]);
+
 
   const addItem = (newItem: NewItem) => {
     const item = { key: `item${items.length}`, ...newItem };
@@ -38,6 +58,7 @@ export const Todos = () => {
         data={items}
         renderItem={({ item }) => (
           <ItemCard
+            critical = {item.points >= 10 ? true: false}
             key={item.key}
             onDelete={() => deleteItem(item.key)}
           >{item.name}</ItemCard>

src/data/sample.ts

@@ -2,6 +2,6 @@
 
 export const sample = [
   { name: 'Check it twice', points: 5 },
-  { name: 'Make a list', points: 6 },
   { name: 'Get the job 👍🏼', points: 10 },
+  { name: 'Make a list', points: 6 },
 ];