https://github.com/drapegnik/search-wikipedia-links

https://github.com/drapegnik/search-wikipedia-links

Last synced: 11 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/drapegnik/search-wikipedia-links
• Owner: Drapegnik
• Created: 2022-04-19T21:46:32.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-05-06T19:59:49.000Z (about 3 years ago)
• Last Synced: 2025-04-05T22:44:02.528Z (over 1 year ago)
• Language: JavaScript
• Homepage: search-wikipedia-links.vercel.app
• Size: 936 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# search-wikipedia-links

## task

As an user, I should be able to:

- search Wikipedia links with a search term

- re-run my search at any time

- keep a distinct history list of my last five search terms + the time when the last search happened

![](https://codesignal.s3.amazonaws.com/uploads/1639800404400/Screen_Shot_2021-12-17_at_8.06.25_PM.png)

## initial code

```jsx

// Import State hook

const { useState } = React;

/*

As an user, I should be able:

  # to search Wikipedia links with a search term

  # to keep a distinct history list of my last five search terms + the time when the last search happened

**/

const WikepediaLinksView = () => {

  const [searchTerm, setSearchTerms] = useState('');

  const [fetchedAt, setFetchedAt] = useState(new Date());

  const [links, setLinks] = useState([]);

  const fetchData = () => {

    const urlSearch =

      'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=' + searchTerm;

    fetch(urlSearch, { mode: 'cors' })

      .then(response => response.json())

      .then(response => {

        setFetchedAt(new Date());

        setLinks(response[1]);

      });

  };

  return (

    


      


         {

            setSearchTerms(e.target.value);

          }}

        />

         fetchData()}>Search

      

      


        


          
Your Wikipedia links (fetched at {fetchedAt.toISOString()}):

          


            {links.map(l => (

              <>

                {l} 


              >

            ))}

          

          
Previous search term:

          


        

      

    

  );

};


// Render React element into the DOM

const rootElement = document.getElementById('root');

ReactDOM.render(, rootElement);

```

## demo

[![](https://res.cloudinary.com/dzsjwgjii/image/upload/v1650409253/wikilinks.png)](https://search-wikipedia-links.vercel.app/)