1

I am working on a to do list app in react native, when a new item is added it goes directly to the last place and I will like every new object to go to the first place. To achieve this I tried adding a function that is supposed to sort the items but it the code doesnt make any changes. How can I sort these items in my to do list?

app.js

  const [todos, setTodos] = useState([]);
  const [addMode, setAddMode] = useState(false);
  const [isReady, setIsReady] = useState(false);

  const addTodoHandler = addTodos => {
    if (addTodos.lenght === 0) {
      return;
    };
    setTodos(prevTodos => [...prevTodos, { key: Math.random().toString(), value: addTodos, date: Date.now() }]);
    setAddMode(false);
    Keyboard.dismiss();
  };

  const sortTodos = () => {  //this is the function that is supposed to sort the items.
    const todoSort = [...todos];
    const soarted = todoSort.sort((a, b) => {
      return a.todoSort - b.todoSort;
    })
    setTodos(soarted);
  };
  return (
    <View style={styles.screen}>
      <Header />
      <AddTodo onAddTodo={addTodoHandler} />
      <FlatList
        keyExtractor={(item, index) => item.key}
        data={ todos }
        renderItem={({ item }) => <TodoItem  key={item.key}
        todoKey={item.key}
        title={item.value}
        editHandler={handleEdit}
        pressHandler={pressHandler}/> }
      />
    </View>
  );

AddTodo.js

const AddTodo = props => {
    const [text, setText] = useState('');

    const changeHandler = (val) => {
        setText(val);
    };

    const addTodoHandler = () => {
        props.onAddTodo(text);
        setText('');
    };

    return (
        <View style={styles.inputView}>
            <TextInput style={styles.textInput} placeholder='What do you want to do?' onChangeText={changeHandler} value={text}/>
            <Buttons title="Add" onPress={addTodoHandler} style={styles.salsachBtn}/>
        </View>
    );
};

TodoItem.js

const TodoItem = props => {
    return (
        <View>
            <View style={styles.items}>
                <View style={styles.itemContainer}>
                    <Text style={styles.itemText}>{props.title}</Text>
                </View>
            </View>
        </View>

    );
};

if you have any questions please let me know in the comments:)

Juan Martin Zabala
  • 743
  • 2
  • 9
  • 29
  • Sorry if i missed that, but where are you using sortTodos? I only see declaration. – RauboLuk Aug 02 '20 at 23:30
  • @RauboLuk Yes! that is the only thing I have, I dont know how to implemented somewhere else to make it work – Juan Martin Zabala Aug 02 '20 at 23:32
  • @StackedQ I have already checked that question and it doesnt work, I get `TypeError: a.localeCompare is not a function` error – Juan Martin Zabala Aug 03 '20 at 00:37
  • @StackedQ I followed RauboLuk advice of using Date to sort and in your question I found that you added a link to sort by date so basically all I did was adding this to flat list data `data={ todos.sort((a, b) => { return new Date(b.date) - new Date(a.date); })}` – Juan Martin Zabala Aug 03 '20 at 00:47

1 Answers1

2

First idea:

  1. Add your 'sortTodos' inside function that handle adding new item.
  2. Add date to items with e.g. Date.now()
  3. Sort a.date - b.date

Second (without sorting): you can try to use unshift

const newTodo = [...prevTodos]
newTodo.unshift({ key: Math.random().toString(), value: addTodos });
setTodos(newTodo)
RauboLuk
  • 421
  • 1
  • 3
  • 7