text: import React, { useState, useEffect } from "react";
  import socketio from "socket.io-client";
  import {
    SafeAreaView,
    ScrollView,
    AsyncStorage,
    Image,
    StyleSheet,
    TouchableOpacity,
    Alert,
  } from "react-native";
  
  import SpotList from "../components/SpotList";
  import logo from "../assets/logo.png";
  
  export default function List({ navigation }) {
    const [techs, setTechs] = useState([]);
  
    useEffect(() => {
      AsyncStorage.getItem("user").then((user_id) => {
        const socket = socketio("http://192.168.31.227:3333", {
          query: { user_id },
        });
  
        socket.on("booking_response", (booking) => {
          Alert.alert(
            `Sua reserva em ${booking.spot.company} em ${booking.date} foi ${
              booking.approved === true ? "APROVADA." : "REJEITADA."
            }`
          );
        });
      });
    }, []);
  
    useEffect(() => {
      AsyncStorage.getItem("techs").then((storageTechs) => {
        const techsArray = storageTechs.split(",").map((tech) => tech.trim());
  
        setTechs(techsArray);
      });
    }, []);
  
    function handleLogout() {
      AsyncStorage.removeItem("user");
  
      navigation.navigate("Login");
    }
  
    return (
      <SafeAreaView style={styles.container}>
        <TouchableOpacity onPress={handleLogout}>
          <Image source={logo} style={styles.logo} />
        </TouchableOpacity>
  
        <ScrollView>
          {techs.map((tech) => (
            <SpotList key={tech} tech={tech} />
          ))}
        </ScrollView>
      </SafeAreaView>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    logo: {
      height: 32,
      resizeMode: "contain",
      alignSelf: "center",
      marginTop: 50,
    },
  });
  