Cómo construir un botón inteligente usando React

Esta es una historia de tres botones y cómo un desarrollador web que se aleja del diseño hizo realidad sus sueños de front-end.

Debe saber de antemano que la mayor parte del estilo aquí es Bootstrap repetitivo. Se ve bien y es un producto interno, por lo que no arreglamos algo que no esté roto.

Nuestra tarea era crear una interfaz fácil de entender para manejar un registro. Nuestro registro tiene un estado de tres partes: disponible, enfermo o vab. No hay mucho estado para comunicar una vez, pero necesitamos cinco semanas de estos en una página.

Nota al margen: "VAB" es una palabra sueca que se refiere a quedarse en casa con su hijo enfermo. ¡Hay una diferencia entre hacer eso y estar enfermo usted mismo aquí, tanto en pago como en tiempo libre!

Comprobando un registro existente

El primer paso fue mostrar si el usuario tenía o no un registro para el día en cuestión. Como en todos los proyectos de React que conozco, tomamos una lista de una API (la nuestra) e iteramos sobre ella. Como la API devolverá una lista de registros existentes e ignorará los días sin registros, tendremos que configurar nuestra propia serie de días.

Aquí está nuestro código para obtener cinco semanas de días:

export const dateArray = (numberOfDays, startDate) => {
  const day = moment (startDate);
  días constantes = [];
  while (days.length 

He escrito sobre Moment.js antes. Si no lo está usando, ¡súbase al maldito carro ya! Hace que trabajar con fechas sea estúpidamente fácil, como aquí, donde podemos llamar a day.add (1, 'days') o donde obtenemos el día de la semana con moment (startDate) .day ().

¡Los objetos de momento son mutables! Por lo tanto, tenga cuidado en general, pero aquí es excelente porque necesitamos actualizar nuestro día y podemos hacerlo con muy poco código.

Nota al margen: los estadounidenses naturalmente harían el sábado el último día de la semana - 6 - y el domingo el primer día - 0. Pero no los suecos o básicamente el resto del mundo. Para casi todos, no estadounidenses, la semana comienza el lunes. La programación puede ser muy extrañamente centrada en los Estados Unidos.

Aquí puede ver que estamos armando una lista de fechas, comenzando con startDate, y continuamos hasta que lleguemos a numberOfDays, saltando los fines de semana. Utilizaremos esta matriz para crear nuestra lista de registros para que podamos ponerle algunos botones deliciosos.

Mapeando nuestra matriz de días para reflejar registros reales

Ahora que tenemos todos los días que necesitamos mostrar (a continuación llamamos dateArray), tendremos que recorrer nuestro conjunto de datos de la API para determinar si debemos mostrar un registro o no. Como queremos ver las fechas que no tienen registros, debemos configurar una matriz con algunos registros llenos y otros vacíos:

const userRecords = dateArray (50, startDay) .map (date => {
  const recordToReturn = data.find (record =>
    record.date === fecha
  );

  return {fecha, registro: recordToReturn};
});

Ahora tenemos una serie de fechas, algunas con un registro completo y otras con registro: indefinido.

Lógica de botón disponible

Ahora que podemos ver si hay un registro ese día o no, podemos condicionar nuestro botón para que se muestre verde y decir "Disponible" o blanco y "Agregar". De nuevo, estoy usando Reactstrap para un estilo básico. El componente Button viene con un buen espaciado y esquinas redondeadas y demás, además de prácticos parámetros de "color" que puedo configurar en cosas como "información" y "éxito".


  {this.state.buttonText}

Configurar el texto del botón

Para configurar el buttonText, comprobaré si hay un registro:

const buttonText = () =>
  isEmpty (this.props.data.record)? 'Agregar': 'Disponible'

Recuerde que paso {date: 'some date', record: {some: 'record'}} en cada uno de los componentes de mi botón. Si mis registros de usuario no encontraron un registro para ese día, no tendremos nada en data.record y podremos decir "Agregar". IsEmpty proviene de la excelente biblioteca Javascript lodash. Una vez más, súbete al carro. Lodash hace que Javascript sea mucho más limpio y fácil de usar.

Configurar el color del botón

Nuestra función setColor también verificará si el registro existe, pero además tendrá que mirar el estado del registro para ver qué color necesitamos mostrar.

const setColor = () => {
  if (existenteRecord && record.status === 'disponible') {
    devolver 'éxito';
  } más si (existenteRecord)) {
    volver 'gris';
  } más {
    volver 'secundario';
  }
};

Bootstrap por defecto agradabilidad. Hemos sobrescrito estas palabras predeterminadas con nuestros propios colores, pero las opciones listas para usar también son buenas. Aquí verificamos si el registro está disponible. Si no está disponible pero todavía hay un registro, debe estar enfermo o vab, pero en cualquier caso, el usuario ya no está disponible ese día, por lo que tendremos que atenuar el botón.

Los botones de colores muestran cuatro estados.

Los otros dos botones

Puedo usar la pantalla condicional súper práctica de React para ocultar los botones "enfermo" y "vab" cuando no hay registro. Aquí está el código para los dos botones restantes:

{existenteRecord && (
  
           Enfermo                 VAB        
)}

Para asegurarnos de que nuestros botones tengan los colores correctos, solo verificaremos que el registro tenga el estado "enfermo" o "vab", respectivamente. Si el estado del registro no coincide con el botón, nos aseguraremos de que no esté coloreado (el color de nuestro botón "secundario" es blanco).

const setSecondaryColor = (registro, estado) => {
  if (record.status! == status) {return 'secundario'}
  if (estado === 'enfermo') {devolver 'peligro'}
  if (status === 'vab') {return 'amarillo'}
}

Ponerse elegante con vuelcos

En este punto, los botones hicieron todo lo que necesitaba que hicieran (además de toda la lógica de solicitud de API que estoy omitiendo de esta publicación: estamos creando y actualizando registros con estos botones).

Pero, ¿cómo puede una niña estar satisfecha con sus botones si no hay efectos de desplazamiento? Necesitamos poder eliminar un registro de un día de alguna manera. En lugar de hacer una X y hacer que nuestros usuarios hagan clic en eso, ¿no sería mejor si pudieran hacer clic en uno de los botones existentes para eliminar el registro? Ya me lo imaginaba.

Agregué un evento onMouseOver y onMouseOut a mi botón "Disponible" / "Agregar":

const mouseOver = () => {
  if (existenteRecord) {
    this.setState ({buttonText: 'Eliminar'});
  }
};
const mouseOut = () => this.setState ({buttonText: buttonText ()});

Ahora, al pasar el mouse sobre el botón, cambiará a "Eliminar" si existe un registro (y de lo contrario permanecerá igual). Cuando pase el mouse, volverá a decir "Disponible". ¡Tan bonito, tan funcional!

Demostración del mouseover de la funcionalidad del botón

Me sorprendió cuánto pensamiento y esfuerzo tuvieron que dedicar a algo relativamente simple. Hacer que los botones sean del color correcto, tengan el texto correcto y hagan las cosas correctas es más complejo de lo que parece. De hecho, he mostrado estos botones a personas como mi esposo, que simplemente se encogen de hombros. Es una realidad: a nadie le gustarán tus botones tanto como a ti.