No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Generador autom谩tico de IDs

21/30
Recursos

Aportes 21

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Yo lo que hice fue utilizar el m茅todo est谩tico Date.now(), el cu谩l devuelve la cantidad de milisegundos transcurridos desde el primero de enero de 1970.


function newTodoId() {
  return Date.now();
}
//Devuelve el numero de milisegundos, ejemplo: 1668393426376

De esa forma, tenemos una id con un numero que nunca va a ser igual, a menos que registremos dos TODOs en el mismo milisegundo, lo que espero que para nuestro caso espec铆fico nunca suceda.

隆Hola, comuniadad! 馃憢

Yo utilic茅 la librer铆a que viene instalada en node_modules llamada uuid.

鉁 Nota: Las nuevas versiones tienen a dar inconveniente con la exportaci贸n por defecto, por eso le dejo la forma de solventar el error:

import { v4 as uuid } from 'uuid';

// Y luego, la variable que creamos llamada uuid, la necesitamos ejecutar como una funci贸n. 

const id = uuid();

馃 Y listo, as铆 es como se solventa y se puede utilizar esta librer铆a que trae la carpeta node_modules.

Mi soluci贸n con generators:

  function* generateId() {
        let id = toDos.length
        while (true) {
            yield id++
        }
    }

    const newTodoId = generateId()

Yo use el metodo randomUUID(). Genera de manera aleatoria 36 digitos鈥
Dejo la info de MDN

function newTodoId(){
  return crypto.randomUUID()
}
//  ejemplo:  "36b8f84d-df4e-4d49-b662-bcde71a8764f

Hay un metodo nativo de JS para generar UUID鈥檚 unicos

https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

yo solo le a帽ad铆 un 0 a la funci贸n generadora de IDs

const newTodoId = (todos)=> {
  const ids = todos.map(e => e.id)
  return Math.max(0, ...ids)+1
}

osea lo correcto seria generar un id nuevo o si el id ya no existe entonces generar un id con cualquier n煤mero que sea diferente a los existentes aqui les dejo una parte de mi codigo osea la parte mas importante

    const ids = Object.keys(data.items)
          const idN = ids.map(item=>Number(item.replace('item-','')))
          let idNew = 0
          for (let i = 1; i < 200; i++) {
          const condition = idN.some(item=>item === i)
          if(!condition){
            idNew = i
            break
          }
          }

Hola papus y mamus, dejo el codigo de la clase en TypeScript, si tienen recomendaciones sera bien recibidas.

import { Dispatch, SetStateAction, useState } from "react";
import { useLocalStorege } from "./useLocalStorage";

export interface ITodo {
  text:string,
  completed:boolean,
  id: string
}

interface State {
  searchedTodos: ITodo[]
  completedTodos: number,
  totalTodos: number,
  searchValue: string,
  loading: boolean,
  error: boolean,
  openModal: boolean,
}

interface StateUpdaters {
  setSearchValue: Dispatch<SetStateAction<string>>
  addTodo: (v:string)=>void
  completeTodo: (v:string)=>void,
  deleteTodo: (v:string)=>void,
  setOpenModal: Dispatch<SetStateAction<boolean>>
  sincronizeTodos: ()=>void
}

const useTodos = (): { state: State, stateUpdaters: StateUpdaters } => {
  
  const {
    item: todos,
    saveItem: saveTodos,
    loading,
    error,
    sincronizeItem:  sincronizeTodos,
  } = useLocalStorege<ITodo[]>('TODOS_V2', []);

  const completedTodos:number = todos.filter(todo=>todo.completed).length;
  const totalTodos:number = todos.length;
  const [searchValue, setSearchValue] = useState<string>('');
  const [openModal, setOpenModal] = useState(false);

  const searchedTodos = todos.filter(todo=> todo.text.toLowerCase().includes(searchValue.toLowerCase()));

  const addTodo = (text:string) => {
    const id = crypto.randomUUID();
    const newTodos = [...todos]
    newTodos.push({
      text,
      completed: false,
      id
    })
    saveTodos(newTodos)
  }
  
  const completeTodo = (id: string) =>{
    const newTodos = todos.map(todo=>{
      if(todo.id === id) todo.completed = !todo.completed;
      return todo;
    })
    saveTodos(newTodos);
  }

  const deleteTodo = (text: string) => {
    const newTodos = todos.filter(todo=>todo.text !== text);
    saveTodos(newTodos);
  }

  const state = {
    searchedTodos,
    completedTodos,
    totalTodos,
    searchValue,
    loading,
    error,
    openModal,
  }

  const stateUpdaters = {
    addTodo,
    setSearchValue,
    completeTodo,
    deleteTodo,
    setOpenModal,
    sincronizeTodos,
  }

  return {
    state,
    stateUpdaters,
  }
}

export { useTodos }

Yo me apoy茅 de Math.random 馃憖馃憖

function newTodoID () {
  const characteresNum = 10
  const words = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
  const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
  const getAllCharacters = words.concat(numbers)
  let result = ''
  for (let index = 0; index < characteresNum; index++) {
    const randomIndex = Math.floor(Math.random() * getAllCharacters.length)
    result += getAllCharacters[randomIndex]
  }
  return result
}

No s茅 si sea robusto mi manera de generar id, pero me funcion贸鈥
Solo use el tama帽o del arreglo como id

  const addTodo = text =>{
    //generando id
    const id = todos.length +1;
    const newTodos = [...todos];
    newTodos.unshift({
      completed: false,
      text,
      id,
    });
    saveTodos(newTodos);
  };

por si a alguien le interesa esta funcion genera el ID del tama帽o que nos interese

Se puede usar el paquete uuid que viene por defecto cuando se descargan los paquetes de react y asi no es necesario crear una funcion

const addTodo = (text) => {
  const id = uuidv4();
  const newTodos = [...todos];
  newTodos.push({
    completed: false,
    text,
    id
  });
  saveTodos(newTodos);
};

Yo implement茅

Math.random().toString(36).splice(2)

para generar los Id鈥檚.

Como yo he resuelto en otros lenguajes el caso de obtener el m谩ximo id, asumiendo que la lista siempre se incrementa en 1 simplemente uso .length para ver el mayor y ese seria el nuevo id que guardo en la lista y retorno.

const todoId = []
function newTodoId(){
  const id = todoId?.length
  todoId.push(id);
  return id;
}

Esta soluci贸n implica que si se borran todos igual los ids van a seguir en aumento. Aunque, esto en crecimiento es mucho almacenamiento ocupado para una lista de id, que r谩pidamente se me ocurre que puede servir si se quiere saber que id han sido eliminados para tener el registro del total de eliminaciones o incluso para ver si se pueden reutilizar en el futuro

Antes de ver tu soluci贸n, hice la m铆a. Es menos legible y m谩s robusta, pero funciona 馃憣

let greaterId = todoList.reduce((previousTodo, currentTodo) => {
      return (previousTodo.id > currentTodo.id) ? previousTodo.id : currentTodo.id;
   }, 0);
   return greaterId + 1;
una forma mas directa seria usar crypto.randomUUID() , compatible en la mayor铆a de los navegadores 93% , si quieren pru茅benlo en la consola ![](https://static.platzi.com/media/user_upload/image-ca3183c0-6d88-4204-9986-bf922a9fcdf1.jpg)![](https://static.platzi.com/media/user_upload/image-21abd41e-96e6-4829-a42e-074531ccb74d.jpg)
Me pareci贸 m谩s random este generador ```js function generateRandomId() { const randomString = Math.random().toString(36).substring(2, 11); return randomString; } ```function generateRandomId() { const randomString = *Math*.random().toString(36).substring(2, 11); return randomString;}

Para generar los IDs unicos yo use una libreria llamada uuid

https://www.npmjs.com/package/uuid

en mi consola null+1 es igual a 1 XD

A mi me pinto la compleja y agarre data que lei en los comentarios y arme uno combinando un generador de ids en forma de string con el de Date.now(), los sume y multiplique x2 y cree esto.

function newTodoId() {
  const id = Date.now()
  
  const  generateRandomString = (num) => {
    let result1= Math.random().toString(36).substring(0, num);       

    return result1;
  }

  return generateRandomString(12) + id;
}
function generateId(array) {
  return (array.length)?(Math.max(...array.map(el=>el.id))+1):1
}