add date sort order

public/index.html

@@ -21,7 +21,12 @@
           <stop offset="0%" stop-color="#27FDC7"></stop>
           <stop offset="100%" stop-color="#0FC0F5"></stop>
         </linearGradient>
-        <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
+        <linearGradient id="boxGradientInactive" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
+          <stop offset="0%" stop-color="#dde0e6"></stop>
+          <stop offset="100%" stop-color="#dde0e6"></stop>
+        </linearGradient>
+        <path id="todo__box__done" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
+        <path id="todo__box" stroke="url(#boxGradientInactive)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
         <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
         <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
       </defs>

src/App.css

@@ -129,7 +129,7 @@
 
 .todo__box,
 .todo__check {
-  transition: stroke-dashoffset 0.5s cubic-bezier(0.9, 0, 0.5, 1);
+  /*transition: stroke-dashoffset 0.5s cubic-bezier(0.9, 0, 0.5, 1);*/
 }
 .todo__state:checked ~ .todo-list-title {
   text-decoration: line-through;
@@ -140,7 +140,7 @@
   stroke-width: 0;
   transform-origin: 13.5px 12.5px;
   transform: scale(0.4) rotate(0deg);
-  animation: none 0.5s linear;
+  /*animation: none 0.5s linear;*/
 }
 
 @keyframes explode {
@@ -175,6 +175,9 @@
 .todo__state:checked ~ .todo__icon .todo__box {
   stroke-dashoffset: 56.1053;
   transition-delay: 0s;
+  stroke-dasharray: 56.1053, 56.1053;
+  stroke-dashoffset: 0;
+  stroke: red;
 }
 
 .todo__state:checked ~ .todo__icon .todo__check {
@@ -182,7 +185,7 @@
   transition-delay: 0.48s;
 }
 .todo__state:checked ~ .todo__icon .todo__circle {
-  animation-name: explode;
+  /*animation-name: explode;*/
 }
 /* .todo-completed .todo__state:checked ~ .todo__icon .todo__circle {
   animation-name: none;

src/App.js

@@ -12,6 +12,7 @@ class App extends Component {
     // Fetch all todos
     api.readAll().then((response) => {
       console.log('all todos', response)
+
       this.setState({
         todos: response
       })
@@ -33,12 +34,16 @@ class App extends Component {
 
     const todoInfo = {
       title: todoValue,
-      completed: false
+      completed: false,
     }
     // Optimistically add todo to UI
-    const optimisticTodoState = todos.concat({
-      data: todoInfo
-    })
+    const newTodoArray = [{
+      data: todoInfo,
+      ts: new Date().getTime() * 10000
+    }]
+
+    const optimisticTodoState = newTodoArray.concat(todos)
+
     this.setState({
       todos: optimisticTodoState
     })
@@ -157,7 +162,14 @@ class App extends Component {
       return null
     }
 
-    return todos.map((todo, i) => {
+    const sortOrder = sortDate('ts')
+    const todosByDate = todos.sort(sortOrder)
+
+    todosByDate.forEach((item) => {
+      console.log(item)
+    })
+
+    return todosByDate.map((todo, i) => {
       const { data, ref } = todo
       const id = getTodoId(todo)
       // only show delete button after create API response returns
@@ -170,6 +182,7 @@ class App extends Component {
         )
       }
       const completedClass = (data.completed) ? 'todo-completed' : ''
+      const icon = (data.completed) ? '#todo__box__done' : '#todo__box'
       return (
         <div key={i} className={`todo-item ${completedClass}`}>
           <label className="todo">
@@ -181,7 +194,7 @@ class App extends Component {
               checked={data.completed}
             />
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" className="todo__icon">
-              <use xlinkHref="#todo__box" className="todo__box"></use>
+              <use xlinkHref={`${icon}`} className="todo__box"></use>
               <use xlinkHref="#todo__check" className="todo__check"></use>
               <use xlinkHref="#todo__circle" className="todo__circle"></use>
             </svg>
@@ -228,6 +241,18 @@ class App extends Component {
   }
 }
 
+function sortDate(dateKey, order) {
+  return function (a, b) {
+    const timeA = new Date(a[dateKey]).getTime()
+    const timeB = new Date(b[dateKey]).getTime()
+    if (order === 'asc') {
+      return timeA - timeB
+    }
+    // default 'desc' descending order
+    return timeB - timeA
+  }
+}
+
 function removeOptimisticTodo(todos) {
   // return all 'real' todos
   return todos.filter((todo) => {

src/components/AppHeader/AppHeader.css

@@ -1,5 +1,4 @@
 .app-logo {
-  animation: App-logo-spin infinite 20s linear;
   height: 95px;
   margin-right: 20px;
 }
@@ -22,7 +21,9 @@
   display: flex;
 }
 .app-title {
-  font-size: 1.5em;
+  font-size: 32px;
+  margin: 0px;
+  margin-top: 10px;
 }
 .app-intro {
   font-size: large;
@@ -67,7 +68,8 @@
     align-items: flex-start;
   }
   .app-title {
-    font-size: 18px;
+    font-size: 23px;
+    margin-top: 0px;
   }
   .app-intro {
     font-size: 14px;