DEV Community

Genilson fernandes
Genilson fernandes

Posted on

1

Crei um ultils para simular um back end usando o local storage

Absurdo, não é? Eu preciso simular um back-end porque, sendo um desenvolvedor full stack, ainda não criei meu próprio back-end para a minha aplicação. Problemas, não é mesmo?

Devido a essa pequena complicação, eu comecei a adiantar os métodos que, no futuro, seriam responsáveis por fazer as requisições para o back-end. Assim, mesmo sem esses endpoints, eu poderia avançar no desenvolvimento do front-end para depois conectar aos endpoints.

Não é a primeira vez que faço isso, então eu já sabia o que estava fazendo.

Primeiro, aqui está o utilitário que criei:

import generateHashId from './generateHashId';

type localStorageBaseType = {
  id: string;
  created_at: Date;
};

export class NotFoundError extends Error {
  constructor(message: string) {
    super(message);
    this.message = message;
  }
}

export class StorageError extends Error {
  constructor(message: string) {
    super(message);
    this.message = message;
  }
}

class LocalStorageUtil<T extends localStorageBaseType> {
  private key: string;

  constructor(key: string) {
    this.key = key;
  }

  // Obtém os dados do Local Storage para a chave especificada
  getData(): T[] {
    const data = localStorage.getItem(this.key);
    return data ? JSON.parse(data) : [];
  }

  getById(id: string): T | undefined {
    const data = this.getData();
    return data.find((item) => item.id === id);
  }
  // Salva os dados no Local Storage para a chave especificada
  saveData(data: T[]): void {
    localStorage.setItem(this.key, JSON.stringify(data));
  }

  updateItem(item: T): void {
    const data = this.getData();
    const findIndex = data.findIndex((i) => i.id === item.id);

    if (findIndex === -1) {
      throw new NotFoundError('Item not found');
    }

    if (findIndex !== -1) {
      data[findIndex] = item;
      this.saveData(data);
    }
  }

  // Adiciona um novo item aos dados existentes
  addItem(item: Omit<T, 'id' | 'created_at'>): void {
    if (!item) {
      throw new StorageError('data is required');
    }

    const data = this.getData();
    const newItem: T = {
      id: generateHashId(16),
      created_at: new Date(),
      ...item
    } as T;
    data.push(newItem);
    this.saveData(data);
  }

  // Remove um item específico dos dados
  removeItem(id: string): void {
    const data = this.getData();
    const filteredData = data.filter((item) => item.id !== id);
    this.saveData(filteredData);
  }

  // Remove todos os dados relacionados à chave especificada
  deleteData(): void {
    localStorage.removeItem(this.key);
  }
}

export default LocalStorageUtil;
Enter fullscreen mode Exit fullscreen mode

Como pode ver, é uma classe que de dar alguns métodos, os principais de um CRUD. E o uso dela é bem simples, como pode ver, esta usando typescript o que já ajuda bastante.

Primeiro passo: instanciando a casse

Como ela é uma classe, precisamos instanciar ela em algum lugar, ai ficar sua vontade


const keys = {
  budgets: '@budgets'
};

export type Budgets = {
  name: string;
  value: number;
} & localStorageBaseType;


const budgetStorage = new LocalStorageUtil<Budgets>(keys.budgets);

export { budgetStorage };
Enter fullscreen mode Exit fullscreen mode

O que é esse localStorageBaseType? é somente um tipo base para você da merge com o tipo que vc quer passar para a classe, ela vai usar para ajudar na tipagem dos metodos.

ela por baixo dos planos tem id e um created_at para ajudar nos métodos da classe de buscar e update.

Segundo passo: finalmente usando

O uso ficar bem fácil, é so pegar budgetStorage e começar usar os métodos.


budgetStorage.addItem({
  name: 'Salário',
  value: 1000
});

const budgets = budgetStorage.getData() 
// spec: {
// name: 'Salário', 
// value: 1000
// id: 'x1y2z3',
// created_at: '17/12/2023'
// }

budgetStorage.updateItem({
  name: 'Salário',
  id: 'x1y2z3',
  value: 2000,
  created_at: new Date()
});

// Para atualizar é so passar o item com o update que o
// metodo vai buscar pelo id para atualizar o item
Enter fullscreen mode Exit fullscreen mode

Os outros métodos são bem fáceis de usar e com a ajuda o typescript, temos o removeItem, deleteData, getById.

lembrando que foi uma solução bem simples para ajudar a completar um etapa do projeto e claro que da pra melhorar. é isso.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay