Smart-Mirror | Raspberry powered mirror which can display news

└── root
   ├── api (node)
      ├── node_modules
   ├── client
      ├── node_modules
   ├── modules
      ├── moduleName
         ├── index.tsx
         ├── helper.ts
         ├── types.ts

import { useTheme } from '@mui/styles'
import React, { useEffect, useState } from 'react'

import Socket from 'socket'
import { Theme } from 'theme'

import useStyles from './styles'
import { AlertType } from './types'

const Alert = () => {
  const [alerts, setAlerts] = useState<Array<AlertType>>([])
  const theme: Theme = useTheme()
  const classes = useStyles(theme)

  useEffect(() => {
    const io = Socket('alert')
    let timeout: number
    io.on('SEND_ALERT', (alert: AlertType) => {
      setAlerts([...alerts, alert])
      timeout = window.setTimeout(() => {
        setAlerts(alerts.filter((a: AlertType) => a !== alert))
      }, alert.duration * 1000)
    })

    return () => {
      window.clearTimeout(timeout)
      io.disconnect()
    }
  }, [])

  return alerts.length ? (
    <div className={classes.container}>
      {alerts.map(({ message }: AlertType, index: number) => (
        <div className={classes.alert} key={`${message[0]}-${index}`}>
          <div className={classes.content}>{message}</div>
        </div>
      ))}
    </div>
  ) : null
}

export default Alert

import { Request, Response, Router } from 'express'
import { Namespace, Socket } from 'socket.io'
import { AlertType } from './types'

const router = Router()

const AlertRouter = (io: Namespace) => {
  router.get('/', (req: Request, res: Response) =>
    res.status(200).json({ message: 'Hello world!' })
  )

  io.on('connection', (client: Socket) => {
    client.on('SEND_ALERT', (alert: AlertType) => io.emit('SEND_ALERT', alert))
  })

  return router
}

export default AlertRouter

export interface AlertType {
  message: string
  duration: number
}

      weather.iconId = function geticonClass() {
    let prefix = data.weather[0].icon.endsWith("d")
      ? "wi-owm-day-"
      : "wi-owm-night-";
    return `${prefix}${data.weather[0].id}`;
  };

  iconElement.classList.add(weather.iconId());

function clearIcon() {
var element = element.(document.getElementById("current-weather-icon i")),
element.removeClass();
};