billow | Query AWS data without API credentials | Runtime Evironment library

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";

export function App() {
  const schema = Yup.object({
    poster_type: Yup.string()
      .required()
      .oneOf(["image", "script"])
      .label("Poster Type"),
    image: Yup.mixed().when(["image_old", "poster_script"], {
      is: (poster_script, image_old) => {
        if (poster_script === "image" && image_old === "") {
          return true;
        }
      },
      then: (schema) =>
        schema
          .test("name", "Image is required", (value) => {
            return value !== undefined && value[0] && value[0].name !== "";
          })
          .test("fileSize", "File must be less than 2MB", (value) => {
            return value !== undefined && value[0] && value[0].size <= 2000000;
          })
          .test("type", "Only images are supported", (value) => {
            return (
              value !== undefined && value[0] && value[0].type.includes("image")
            );
          }),
      otherwise: (schema) => schema.nullable()
    })
  });

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = async (input) => {
    console.log("input", input);
  };

  // const item = {
  //   id: 12,
  //   image_old: "old_image.png"
  // };

  return (
    
      
        -- Select --
        Image
        Script
      
      
        {errors["poster_type"]?.message}
      

      
      
        {errors["image"]?.message}
      
      

      
    
  );
}

const CLIENT_ID = 'keECa1lpVtgABa1F';
const splash=document.querySelector('.splash');
const stuffjs=document.querySelector('.stuff');
var yourname;

/*function createMenuItem(name) {
  let inputname = document.createElement('input');
  inputname.placeholder = name;
  inputname.className='inputnamefield';
  return inputname;
}*/
/*function createButton(btnname){
  let btn = document.createElement('input');
  btn.type = 'submit';
  btn.className='submitbtn';
  return btn;
}*/
const inputnameagain=document.querySelector('.inputnamefield');
const buttoon=document.querySelector('.submitbtn');
buttoon.addEventListener('click',(e) => {
  setTimeout(()=>{
  yourname=inputboxstuff.value()
  },1);
});





/*document.addEventListener('DOMContentLoaded',(e)=>{
  setTimeout(()=>{
    splash.classList.add('display-none');
    
  },2000);
})
splash.addEventListener('mousedown',
(e)=>{
  setTimeout(()=>{
    splash.parentElement.removeChild(splash);
    
  },1);
})*/
 

const drone = new ScaleDrone(CLIENT_ID, {
  data: { // Will be sent out as clientData via events
    name: yourname,
    color: getRandomColor(),
  },
});

let members = [];

drone.on('open', error => {
  if (error) {
    return console.error(error);
  }
  console.log('Successfully connected to Scaledrone');

  const room = drone.subscribe('observable-room');
  room.on('open', error => {
    if (error) {
      return console.error(error);
    }
    console.log('Successfully joined room');
  });

  room.on('members', m => {
    members = m;
    updateMembersDOM();
  });

  room.on('member_join', member => {
    members.push(member);
    updateMembersDOM();
  });

  room.on('member_leave', ({id}) => {
    const index = members.findIndex(member => member.id === id);
    members.splice(index, 1);
    updateMembersDOM();
  });

  room.on('data', (text, member) => {
    if (member) {
      addMessageToListDOM(text, member);
    } else {
      // Message is from server
    }
  });
});

drone.on('close', event => {
  console.log('Connection was closed', event);
});

drone.on('error', error => {
  console.error(error);
});

function getRandomName() {
  const adjs = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "throbbing", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"];
  const nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"];
  return (
    adjs[Math.floor(Math.random() * adjs.length)] +
    "_" +
    nouns[Math.floor(Math.random() * nouns.length)]
  );
}

function getRandomColor() {
  return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}

//------------- DOM STUFF

const DOM = {
  membersCount: document.querySelector('.members-count'),
  membersList: document.querySelector('.members-list'),
  messages: document.querySelector('.messages'),
  input: document.querySelector('.message-form__input'),
  form: document.querySelector('.message-form'),
};

DOM.form.addEventListener('submit', sendMessage);

function sendMessage() {
  const value = DOM.input.value;
  if (value === '') {
    return;
  }
  DOM.input.value = '';
  drone.publish({
    room: 'observable-room',
    message: value,
  });
}

function createMemberElement(member) {
  const { name, color } = member.clientData;
  const el = document.createElement('div');
  el.appendChild(document.createTextNode(name));
  el.className = 'member';
  el.style.color = color;
  return el;
}

function updateMembersDOM() {
  DOM.membersCount.innerText = `${members.length} users in room:`;
  DOM.membersList.innerHTML = '';
  members.forEach(member =>
    DOM.membersList.appendChild(createMemberElement(member))
  );
}

function createMessageElement(text, member) {
  const el = document.createElement('div');
  el.appendChild(createMemberElement(member));
  el.appendChild(document.createTextNode(text));
  el.className = 'message';
  return el;
}

function addMessageToListDOM(text, member) {
  const el = DOM.messages;
  const wasTop = el.scrollTop === el.scrollHeight - el.clientHeight;
  el.appendChild(createMessageElement(text, member));
  if (wasTop) {
    el.scrollTop = el.scrollHeight - el.clientHeight;
  }
}

          } />
          } />   

          }>
            } />
          

import "./Gallery.scss";
import { Link } from "react-router-dom";

const Gallery = ({ datas, clickEvent }) => {
  return (
    
      {datas.map((data, index) => {
        return (
          
            
              
            
          
        );
      })}
    
  );
};

export default Gallery;

import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import "./Paint.scss";
import Modal from "../Modal/Modal";

const Paint = ({ datas }) => {
  let { urlPath } = useParams();
  const paint = datas.find((data) => data.urlPath === urlPath);

  const nextSlide = datas.indexOf(paint) + 1;
  const prevSlide = datas.indexOf(paint) - 1;

  const [showModal, setShowModal] = useState(false);

  const handleModal = () => {
    setShowModal(!showModal);
  };

  const color1 = "#000";
  const color2 = "#ccc";

  const indexPaint = datas.indexOf(paint) + 1;
  const datasLenght = datas.length;

  const blackLineWidth = Math.round((indexPaint * 100) / datasLenght);
  const greyLineWidth = 100 - blackLineWidth;

  return (
    
      {paint ? (
        <>
          
            
              
                
                  View Image
                
              
              {showModal && (
                
              )}
              
                
                  {paint.name}
                  
{paint.artist.name}
                
                
                  
                
              
            
            
              
                {paint.year}
              
              
                
{paint.description}
                
                  Got to source
                
              
            
          
          
          
            
              {paint.name}
              
                {paint.artist.name}
              
            
            
              
                {prevSlide <= -1 ? (
                  
                ) : (
                  
                )}
              
              
                {nextSlide >= 15 ? (
                  
                ) : (
                  
                )}
              
            
          
        
      ) : (
        
{urlPath} is not a planet
      )}
    
  );
};

export default Paint;

import data from "./data.json";
import "./App.scss";
import { Switch, Route } from "react-router-dom";
import Menu from "./components/Menu/Menu";
import Gallery from "./components/Gallery/Gallery";
import Paint from "./components/Paint/Paint";
import { useState } from "react";

const App = () => {
  data.forEach((d) => {
    d["urlPath"] = d.name.replace(/\s/g, "-");
  });

  const [slideShow, setSlideShow] = useState(true);

  const handleSlideShow = () => {
    setSlideShow(!slideShow);
  };

  return (
    
      
        
        
          
            
          
          
            
          
        
      
    
  );
};

export default App;

[
  {
    "name": "Starry Night",
    "year": 1889,
    "description": "Although The Starry Night was painted during the day in Van Gogh's ground-floor studio, it would be inaccurate to state that the picture was painted from memory. The view has been identified as the one from his bedroom window, facing east, a view which Van Gogh painted variations of no fewer than twenty-one times, including The Starry Night. \"Through the iron-barred window,\" he wrote to his brother, Theo, around 23 May 1889, \"I can see an enclosed square of wheat ... above which, in the morning, I watch the sun rise in all its glory.\"",
    "source": "https://en.wikipedia.org/wiki/The_Starry_Night",
    "artist": {
      "image": "./assets/starry-night/artist.jpg",
      "name": "Vincent Van Gogh"
    },
    "images": {
      "thumbnail": "./assets/starry-night/thumbnail.jpg",
      "hero": {
        "small": "./assets/starry-night/hero-small.jpg",
        "large": "./assets/starry-night/hero-large.jpg"
      },
      "gallery": "./assets/starry-night/gallery.jpg"
    }
  },
  {
    "name": "Girl with a Pearl Earring",
    "year": 1665,
    "description": "The painting is a tronie, the Dutch 17th-century description of a 'head' that was not meant to be a portrait. It depicts a European girl wearing an exotic dress, an oriental turban, and what was thought to be a very large pearl as an earring. In 2014, Dutch astrophysicist Vincent Icke raised doubts about the material of the earring and argued that it looks more like polished tin than pearl on the grounds of the specular reflection, the pear shape and the large size of the earring.",
    "source": "https://en.wikipedia.org/wiki/Girl_with_a_Pearl_Earring",
    "artist": {
      "image": "./assets/girl-with-pearl-earring/artist.jpg",
      "name": "Johannes Vermeer"
    },
    "images": {
      "thumbnail": "./assets/girl-with-pearl-earring/thumbnail.jpg",
      "hero": {
        "small": "./assets/girl-with-pearl-earring/hero-small.jpg",
        "large": "./assets/girl-with-pearl-earring/hero-large.jpg"
      },
      "gallery": "./assets/girl-with-pearl-earring/gallery.jpg"
    }
  },
  {
    "name": "Guernica",
    "year": 1937,
    "description": "The scene occurs within a room where, on the left, a wide-eyed bull stands over a grieving woman holding a dead child in her arms. In the center of the room a horse falls in agony with a large gaping hole in its side, as if it had just been run through by a spear or javelin. The horse appears to be wearing chain mail armor, decorated with vertical tally marks arranged in rows. A dead and dismembered soldier lies under the horse. The hand of his severed right arm grasps a shattered sword, from which a flower grows.",
    "source": "https://en.wikipedia.org/wiki/Guernica_(Picasso)",
    "artist": {
      "image": "./assets/guernica/artist.jpg",
      "name": "Pablo Picasso"
    },
    "images": {
      "thumbnail": "./assets/guernica/thumbnail.jpg",
      "hero": {
        "small": "./assets/guernica/hero-small.jpg",
        "large": "./assets/guernica/hero-large.jpg"
      },
      "gallery": "./assets/guernica/gallery.jpg"
    }
  },
  {
    "name": "Penitent Magdalene",
    "year": 1625,
    "description": "Penitent Magdalene is a painting by the Italian artist Artemisia Gentileschi. It hangs in Seville Cathedral. It has probably been in the cathedral since the late 17th century. The painting's first home was the collection of Fernando Enriquez Afan de Ribera, from 1626 to 1637. She returned to the subject later in the 1620s in Mary Magdalene as Melancholy.",
    "source": "https://en.wikipedia.org/wiki/Penitent_Magdalene_(Artemisia_Gentileschi)",
    "artist": {
      "image": "./assets/penitent-magdalene/artist.jpg",
      "name": "Artemisia Gentileschi"
    },
    "images": {
      "thumbnail": "./assets/penitent-magdalene/thumbnail.jpg",
      "hero": {
        "small": "./assets/penitent-magdalene/hero-small.jpg",
        "large": "./assets/penitent-magdalene/hero-large.jpg"
      },
      "gallery": "./assets/penitent-magdalene/gallery.jpg"
    }
  },
  {
    "name": "The Storm on the Sea of Galilee",
    "year": 1633,
    "description": "The painting, in vertical format, shows a close-up view of Christ's disciples struggling frantically against the heavy storm to regain control of their fishing boat. A huge wave beats the bow and rips the sail. One of the disciples is seen vomiting over the side. Another one, looking directly out at the viewer, is a self-portrait of the artist. Only Christ, depicted on the right, remains calm.",
    "source": "https://en.wikipedia.org/wiki/The_Storm_on_the_Sea_of_Galilee",
    "artist": {
      "image": "./assets/the-storm-on-the-sea-of-galilee/artist.jpg",
      "name": "Rembrandt"
    },
    "images": {
      "thumbnail": "./assets/the-storm-on-the-sea-of-galilee/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-storm-on-the-sea-of-galilee/hero-small.jpg",
        "large": "./assets/the-storm-on-the-sea-of-galilee/hero-large.jpg"
      },
      "gallery": "./assets/the-storm-on-the-sea-of-galilee/gallery.jpg"
    }
  },
  {
    "name": "The Great Wave off Kanagawa",
    "year": 1831,
    "description": "The Great Wave off Kanagawa (Japanese: 神奈川沖浪裏, Hepburn: Kanagawa-oki Nami Ura, lit. \"Under the Wave off Kanagawa\"), also known as The Great Wave or simply The Wave, is a woodblock print by the Japanese ukiyo-e artist Hokusai. It was published sometime between 1829 and 1833 in the late Edo period as the first print in Hokusai's series Thirty-six Views of Mount Fuji. The image depicts an enormous wave threatening three boats off the coast in the Sagami Bay (Kanagawa Prefecture) while Mount Fuji rises in the background.",
    "source": "https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa",
    "artist": {
      "image": "./assets/the-great-wave-off-kanagawa/artist.jpg",
      "name": "Hokusai"
    },
    "images": {
      "thumbnail": "./assets/the-great-wave-off-kanagawa/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-great-wave-off-kanagawa/hero-small.jpg",
        "large": "./assets/the-great-wave-off-kanagawa/hero-large.jpg"
      },
      "gallery": "./assets/the-great-wave-off-kanagawa/gallery.jpg"
    }
  },
  {
    "name": "Van Gogh Self-portrait",
    "year": 1889,
    "description": "This self-portrait was one of about 32 produced over a 10-year period, and these were an important part of his work as a painter; he painted himself because he often lacked the money to pay for models. He took the painting with him to Auvers-sur-Oise, near Paris, where he showed it to Dr. Paul Gachet, who thought it was \"absolutely fanatical\". Art historians are divided as to whether this painting or Self-portrait without beard is Van Gogh's final self-portrait. The art historians Ingo F. Walther and Jan Hulsker consider this to be the last.",
    "source": "https://en.wikipedia.org/wiki/Van_Gogh_self-portrait_(1889)",
    "artist": {
      "image": "./assets/van-gogh-self-portrait/artist.jpg",
      "name": "Vincent Van Gogh"
    },
    "images": {
      "thumbnail": "./assets/van-gogh-self-portrait/thumbnail.jpg",
      "hero": {
        "small": "./assets/van-gogh-self-portrait/hero-small.jpg",
        "large": "./assets/van-gogh-self-portrait/hero-large.jpg"
      },
      "gallery": "./assets/van-gogh-self-portrait/gallery.jpg"
    }
  },
  {
    "name": "The Sleeping Gypsy",
    "year": 1897,
    "description": "The Sleeping Gypsy (French: La Bohémienne endormie) is an 1897 oil painting by French Naïve artist Henri Rousseau (1844–1910). It is a fantastical depiction of a lion musing over a sleeping woman on a moonlit night. Rousseau first exhibited the painting at the 13th Salon des Indépendants, and tried unsuccessfully to sell it to the mayor of his hometown, Laval. Instead, it entered the private collection of a Parisian charcoal merchant where it remained until 1924, when it was discovered by the art critic Louis Vauxcelles.",
    "source": "https://en.wikipedia.org/wiki/The_Sleeping_Gypsy",
    "artist": {
      "image": "./assets/the-sleeping-gypsy/artist.jpg",
      "name": "Henri Rousseau"
    },
    "images": {
      "thumbnail": "./assets/the-sleeping-gypsy/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-sleeping-gypsy/hero-small.jpg",
        "large": "./assets/the-sleeping-gypsy/hero-large.jpg"
      },
      "gallery": "./assets/the-sleeping-gypsy/gallery.jpg"
    }
  },
  {
    "name": "Lady with an Ermine",
    "year": 1489,
    "description": "The Lady with an Ermine (Italian: Dama con l'ermellino [ˈdaːma kon lermelˈliːno]; Polish: Dama z gronostajem) is a portrait painting widely attributed to the Italian Renaissance artist Leonardo da Vinci. Dated to c. 1489–1491, the work is painted in oils on a panel of walnut wood. Its subject is Cecilia Gallerani, a mistress of Ludovico Sforza (\"Il Moro\"), Duke of Milan; Leonardo was painter to the Sforza court at the time of its execution. It is one of only four surviving portraits of women painted by Leonardo, the others being Ginevra de' Benci, La Belle Ferronnière and the Mona Lisa",
    "source": "https://en.wikipedia.org/wiki/Lady_with_an_Ermine",
    "artist": {
      "image": "./assets/lady-with-an-ermine/artist.jpg",
      "name": "Leonardo da Vinci"
    },
    "images": {
      "thumbnail": "./assets/lady-with-an-ermine/thumbnail.jpg",
      "hero": {
        "small": "./assets/lady-with-an-ermine/hero-small.jpg",
        "large": "./assets/lady-with-an-ermine/hero-large.jpg"
      },
      "gallery": "./assets/lady-with-an-ermine/gallery.jpg"
    }
  },
  {
    "name": "The Night Café",
    "year": 1888,
    "description": "The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles. Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut. The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.",
    "source": "https://en.wikipedia.org/wiki/The_Night_Caf%C3%A9",
    "artist": {
      "image": "./assets/the-night-cafe/artist.jpg",
      "name": "Vincent Van Gogh"
    },
    "images": {
      "thumbnail": "./assets/the-night-cafe/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-night-cafe/hero-small.jpg",
        "large": "./assets/the-night-cafe/hero-large.jpg"
      },
      "gallery": "./assets/the-night-cafe/gallery.jpg"
    }
  },
  {
    "name": "The Basket of Apples",
    "year": 1893,
    "description": "The Basket of Apples (French: Le panier de pommes) is a still life oil painting by French artist Paul Cézanne, which he created c. 1893. The painting is particularly remarkable for its creative composition, which rejected realistic representation in favour of distorting objects to create multiple perspectives. This approach eventually influenced other art movements, including Fauvism and Cubism. It belongs to the Helen Birch Bartlett Memorial Collection of the Art Institute of Chicago.",
    "source": "https://en.wikipedia.org/wiki/The_Basket_of_Apples",
    "artist": {
      "image": "./assets/the-basket-of-apples/artist.jpg",
      "name": "Paul Cézanne"
    },
    "images": {
      "thumbnail": "./assets/the-basket-of-apples/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-basket-of-apples/hero-small.jpg",
        "large": "./assets/the-basket-of-apples/hero-large.jpg"
      },
      "gallery": "./assets/the-basket-of-apples/gallery.jpg"
    }
  },
  {
    "name": "The Boy in the Red Vest",
    "year": 1889,
    "description": "Cézanne painted four oil portraits of this Italian boy in the red vest, all in different poses, which allowed him to study the relationship between the figure and space. The most famous of the four, and the one commonly referred to by this title, is the one which depicts the boy in a melancholic seated pose with his elbow on a table and his head cradled in his hand. It is currently held in Zürich, Switzerland. The other three portraits, of different poses, are in museums in the US",
    "source": "https://en.wikipedia.org/wiki/The_Boy_in_the_Red_Vest",
    "artist": {
      "image": "./assets/the-boy-in-the-red-vest/artist.jpg",
      "name": "Paul Cézanne"
    },
    "images": {
      "thumbnail": "./assets/the-boy-in-the-red-vest/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-boy-in-the-red-vest/hero-small.jpg",
        "large": "./assets/the-boy-in-the-red-vest/hero-large.jpg"
      },
      "gallery": "./assets/the-boy-in-the-red-vest/gallery.jpg"
    }
  },
  {
    "name": "Arnolfini Portrait",
    "year": 1434,
    "description": "It is considered one of the most original and complex paintings in Western art, because of its beauty, complex iconography, geometric orthogonal perspective, and expansion of the picture space with the use of a mirror. According to Ernst Gombrich \"in its own way it was as new and revolutionary as Donatello's or Masaccio's work in Italy. A simple corner of the real world had suddenly been fixed on to a panel as if by magic ... For the first time in history the artist became the perfect eye-witness in the truest sense of the term\".",
    "source": "https://en.wikipedia.org/wiki/Arnolfini_Portrait",
    "artist": {
      "image": "./assets/arnolfini-portrait/artist.jpg",
      "name": "Jan van Eyck"
    },
    "images": {
      "thumbnail": "./assets/arnolfini-portrait/thumbnail.jpg",
      "hero": {
        "small": "./assets/arnolfini-portrait/hero-small.jpg",
        "large": "./assets/arnolfini-portrait/hero-large.jpg"
      },
      "gallery": "./assets/arnolfini-portrait/gallery.jpg"
    }
  },
  {
    "name": "Mona Lisa",
    "year": 1503,
    "description": "The Mona Lisa (/ˌmoʊnə ˈliːsə/; italian: La Gioconda [la dʒoˈkonda] or Monna Lisa [ˈmɔnna ˈliːza]) is a half-length portrait painting by Italian artist Leonardo da Vinci. Considered an archetypal masterpiece of the Italian Renaissance, it has been described as \"the best known, the most visited, the most written about, the most sung about, the most parodied work of art in the world\". The painting's novel qualities include the subject's enigmatic expression, the monumentality of the composition, the subtle modelling of forms, and the atmospheric illusionism.",
    "source": "https://en.wikipedia.org/wiki/Mona_Lisa",
    "artist": {
      "image": "./assets/mona-lisa/artist.jpg",
      "name": "Leonardo da Vinci"
    },
    "images": {
      "thumbnail": "./assets/mona-lisa/thumbnail.jpg",
      "hero": {
        "small": "./assets/mona-lisa/hero-small.jpg",
        "large": "./assets/mona-lisa/hero-large.jpg"
      },
      "gallery": "./assets/mona-lisa/gallery.jpg"
    }
  },
  {
    "name": "The Swing",
    "year": 1767,
    "description": "The painting depicts an elegant young woman on a swing. A smiling young man, hiding in the bushes on the left, watches her from a vantage point that allows him to see up into her billowing dress, where his arm is pointed with hat in hand. A smiling older man, who is nearly hidden in the shadows on the right, propels the swing with a pair of ropes. The older man appears to be unaware of the young man. As the young lady swings high, she throws her left leg up, allowing her dainty shoe to fly through the air.",
    "source": "https://en.wikipedia.org/wiki/The_Swing_(Fragonard)",
    "artist": {
      "image": "./assets/the-swing/artist.jpg",
      "name": "Jean-Honoré Fragonard"
    },
    "images": {
      "thumbnail": "./assets/the-swing/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-swing/hero-small.jpg",
        "large": "./assets/the-swing/hero-large.jpg"
      },
      "gallery": "./assets/the-swing/gallery.jpg"
    }
  }
]

import React, { useState } from 'react';

const App = () => {
  const [dragOver, setDragOver] = useState(false);

  const preventDefaults = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };

  const onDragEnter = (event) => {
    preventDefaults(event);
    console.log('ENTER');
    if (!dragOver) {
      setDragOver(true);
    }
  };

  const onDragLeave = (event) => {
    preventDefaults(event);
    console.log('LEAVE');
    setDragOver(false);
  };

  return (
    
      
    
  );
};

export default App;

    
            <----- 'img-fluid' tells image to take width of its container
            sizes="XXXX" //<--- I am not sure what sizes to put here???
              />
        
        
            ....etc....
        
    

import { useState } from "react";

//the change is reflected in the ImageEditor component
const ImageEditor = ({ yourState }) => (
  
State in the ImageEditor = {yourState}
);

//ImageTile changes the state through the setYourState method
const ImageTile = ({ yourState, setYourState }) => (
   setYourState("World!")}>
    Change State from the ImageTile
  
);

//App is the parent component and contains both image editor and tile
const App = () => {
  //the state which holds the image ID is declared in the parent
  const [imageId, setImageId] = useState("Hello");
  return (
    
      
      
    
  );
};

export default App;

import Messages from "./Messages";
import Input from "./Input"
import { useState } from 'react';
import './App.css';

const initialState = {
  messages: [
    {
      text: "This is a test message!",
      member: {
        color: "blue",
        username: "bluemoon"
      }
    }
  ],
  member: {
    username: randomName(),
    color: randomColor()
  }
}

function randomName() {
  const adjectives = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "throbbing", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"];
  const nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"];
  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
  const noun = nouns[Math.floor(Math.random() * nouns.length)];
  return adjective + noun;
};

function randomColor() {
  return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
};

function App() {
  const [state, setState] = useState(initialState);
  
  const onSendMessage = message => { 
    const messages = state.messages
    messages.push({
      text: message,
      member: state.member
    })
    this.setState({messages: messages})
  }

  return (
    
      
        My Chat App
      
      
      
    
  );
}

export default App;

import {Component} from "react";
import React from "react";
    
import {Component} from "react";
import React from "react";

class Messages extends Component {
  renderMessage(message, index) {
    const { member, text } = message;
    const { currentMember } = this.props;
    const messageFromMe = member.id === currentMember.id;
    const className = messageFromMe
      ? "Messages-message currentMember"
      : "Messages-message";
    return (
      

        
        
          {member.username}
          {text}
        
      
    );
  }

  render() {
    const { messages } = this.props;
    return (
      
  

   
        {messages.map((m, index) => this.renderMessage(m, index))}
      
  
    );
  }
}

export default Messages;

import {Component} from "react";
import React from "react";

class Input extends Component {
  state = {
    text: ""
  }

  onChange(e) {
    this.setState({text: e.target.value});
  }

  onSubmit(e) {
    e.preventDefault();
    this.setState({text: ""});
    this.props.onSendMessage?.(this.state.text);
  }
  
  render() {
    return (
      
         this.onSubmit(e)}>
           this.onChange(e)}
            value={this.state.text}
            type="text"
            placeholder="Enter your message and press ENTER"
            autofocus="true"
          />
          Send
        
      
    );
  }
}

export default Input;

  
    
      
        
          
            Hover Image