truelogic_code_challenge.js

import * as React from 'react'
import styled from 'styled-components'
import "./styles.css";

/**
 * *Step 1:*
 * - Render a list of items (*ul*) from the given *API endpoint*.
 * - Create **<List />** and **<ListItem />** components. *(List renders ListItems)*.
 * - Each *ListItem* needs to render the **id**, **title** and an **image** with the **thumbnailUrl**.
 */

/**
 * *Step 2:*
 * - Add the needed code to *toggle* the **image** when the user clicks on the **title**.
 * - The image must start *hidden*.
 */

/**
 * *Tips:*
 * - You can use *axios* or native *fetch*.
 * - You can use *react hooks* if you want.
 * - If you want, you can use *emotion*, *styled-components* or just raw *css* to style your components.
 * **All the dependencies described above have already been added to this challenge**
 */

/**
 * *API Endpoint:*
 * https://jsonplaceholder.typicode.com/photos?id=1&id=2&id=3&id=4&id=5&id=6&id=7&id=9&id=9&id=10
 */

 /**
  * albumId: 1
id: 1
title: "accusamus beatae ad facilis cum similique qui sunt"
url: "https://via.placeholder.com/600/92c952"
thumbnailUrl: "https://via.placeholder.com/150/92c952"
  */

const List = styled.ul`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 12px;
  
`
const StyledListItem = styled.li`
align-items: center;
background-color: magenta;
  display: flex;
  padding: 12px 16px;
  margin-bottom: 12px;
  
  p:first-child {
    font-size: 18px;
    font-weight: 600;
    margin-right: 12px;
  }

  p:nth-child(2) {
    font-style: italic;
    font-size: 18px;
    margin-right: 12px;
  }

  img {
    display: ${props => props.show ? 'block' : 'none'};
  }
`
const ListItem = ({ children}) => {
  const [state, setState ] = React.useState(false)
  return <StyledListItem onClick={() => setState(!state)} show={state}>{children}</StyledListItem>
}


export default function App() {
  const [state, setState] = React.useState({ data: null, error: false, loading: true, message: null })
  
  React.useEffect(() => {
    const apiCall = async () => {
      try {
        const res = await fetch('https://jsonplaceholder.typicode.com/photos?id=1&id=2&id=3&id=4&id=5&id=6&id=7&id=9&id=9&id=10')
  
        return await res.json()
      } catch (error) {
        throw new Error(error)
      }
    }

    apiCall().then(data => {
      setState({
        ...state,
        data,
        loading: false,
      })
    }).catch(err => {
      setState({
        ...state,
        error: true,
        message: err
      })
    })
  }, [state])
  return (
    <div className="App">
      {state.error && <h1>{state.message}</h1>}
      {state.loading && <h1>Loading...</h1>}
      {state.data && (
        <List>
          {state.data.map(item => (
            <ListItem key={item.id}>
              <p>{item.id}</p>
              <p>{item.title}</p>
              <img alt={item.title} src={item.thumbnailUrl} />
            </ListItem>
          ))}
        </List>
      )}
      
    </div>
  );
}