TL;DR....a simple thing i built while learning :-)

So I'm not a react dev as people here may already know (Long live PYTHON!!) but I've recently started to learn it and put some actual time into said learning.

Now, I've been building a personal website which allows users to search for items and I wanted to provide some form of auto-complete functionality. I thought what I put together was kinda neat so I wanted to share here. Full discloser this was clambered together by random articles online (sure how else would we learn??)

So firstly here's the codepen link if anyone wants to check it out running 

[codepen](https://codesandbox.io/s/async-dew-r6tlpe)

So for those of you too lazy to click the above link ;-) the code is really super basic.

We start off with a index.js file like so...:

```
import React from "react";
import { render } from "react-dom";
import Autocomplete from "./autocomplete";
import "./styles.css";

const App = () => {
  return (
    <div className="wrapper">
      <h1>React - Type as You search aka autocomplete</h1>
      <h2>Type as You Search</h2>
      <Autocomplete
        suggestions={[
          "London",
          "Lisbon",
          "Dublin",
          "Paris",
          "Manchester",
          "Sevile",
          "Marid",
          "New York",
          "Seattle",
          "Berlin",
          "Bern",
          "Braga",
          "Kyoto",
          "Tokyo",
          "Cork",
          "Liverpool"
        ]}
      />
    </div>
  );
};

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);
```

This is where we set out auto-complete options, now you could (and i will tie this to elastic-search later)

Next we add a file called automcomplete.js which manages the auto complete part (duh)

```
import { useState } from "react";

const AutoComplete = ({ suggestions }) => {
  const [filteredSuggestions, setFilteredSuggestions] = useState([]);
  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [input, setInput] = useState("");

  const onChange = (e) => {
    const userInput = e.target.value;

    // Filter our suggestions that don't contain the user's input
    const unLinked = suggestions.filter(
      (suggestion) =>
        suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

    setInput(e.target.value);
    setFilteredSuggestions(unLinked);
    setActiveSuggestionIndex(0);
    setShowSuggestions(true);
  };

  const onClick = (e) => {
    setFilteredSuggestions([]);
    setInput(e.target.innerText);
    setActiveSuggestionIndex(0);
    setShowSuggestions(false);
  };

  const onKeyDown = (e) => {
    // User pressed the enter key
    if (e.keyCode === 13) {
      setInput(filteredSuggestions[activeSuggestionIndex]);
      setActiveSuggestionIndex(0);
      setShowSuggestions(false);
    }
    // User pressed the up arrow
    else if (e.keyCode === 38) {
      if (activeSuggestionIndex === 0) {
        return;
      }

      setActiveSuggestionIndex(activeSuggestionIndex - 1);
    }
    // User pressed the down arrow
    else if (e.keyCode === 40) {
      if (activeSuggestionIndex - 1 === filteredSuggestions.length) {
        return;
      }

      setActiveSuggestionIndex(activeSuggestionIndex + 1);
    }
  };

  const SuggestionsListComponent = () => {
    return filteredSuggestions.length ? (
      <ul class="suggestions">
        {filteredSuggestions.map((suggestion, index) => {
          let className;

          // Flag the active suggestion with a class
          if (index === activeSuggestionIndex) {
            className = "suggestion-active";
          }

          return (
            <li className={className} key={suggestion} onClick={onClick}>
              {suggestion}
            </li>
          );
        })}
      </ul>
    ) : (
      <div class="no-suggestions">
        <span role="img" aria-label="tear emoji">
          😪
        </span>{" "}
        <em>Nothing found....our bad</em>
      </div>
    );
  };

  return (
    <>
      <input
        type="text"
        onChange={onChange}
        onKeyDown={onKeyDown}
        value={input}
      />
      {showSuggestions && input && <SuggestionsListComponent />}
    </>
  );
};

export default AutoComplete;
```
And lastly we sprinkle some CSS on the mix:

```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: verdana;
  line-height: 1.5;
  background: rgb(0, 214, 150);
  background: linear-gradient(
    180deg,
    hsla(133, 100%, 42%, 0.6) 0%,
    hsla(0, 0%, 98%, 1) 50%
  );
  height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 1rem;
}

.wrapper h2 {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

input {
  border: 1px solid hsla(218, 100%, 42%, 1);
  outline: none;
  padding: 0 0.5rem;
  width: 300px;
  height: 40px;
  border-radius: 5px;
}

.no-suggestions {
  color: #999;
  padding: 0.4rem;
  font-size: 0.9rem;
}

.suggestions {
  border: 1px solid hsla(218, 100%, 42%, 0.5);
  border-top-width: 0;
  list-style: none;
  margin-top: 0;
  max-height: 143px;
  overflow-y: auto;
  padding-left: 0;
  width: 300px;
}

.suggestions::-webkit-scrollbar {
  width: 0.2rem;
  height: 0rem;
  border-radius: 20px;
}

.suggestions::-webkit-scrollbar-thumb {
  background-color: hsla(218, 100%, 42%, 1);
}

.suggestions li {
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.suggestion-active,
.suggestions li:hover {
  background: linear-gradient(
    90deg,
    hsla(107, 42%, 9%, 0.623) 0%,
    hsla(0, 0%, 98%, 1) 200%
  );
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.suggestions li:not(:last-of-type) {
  border-bottom: 1px solid #999;
}
```

And BOOM there we have it...that's it, thats all there is.

Anyway hope you enjoyed this tid bit...comments / feedback below :-)

M.




TL;DR....a simple thing i built while learning :-)

So I'm not a react dev as people here may already know (Long live PYTHON!!) but I've recently started to learn it and put some actual time into said learning.

Now, I've been building a personal website which allows users to search for items and I wanted to provide some form of auto-complete functionality. I thought what I put together was kinda neat so I wanted to share here. Full discloser this was clambered together by random articles online

Software Engineer

Matt White

### Proud to present my first Twitter bot....in Java no less

So firstly I want to mention @ZacharySpielberger for this one. Zach built what I thought was a great, fun API to give back data on the TV show Bob's Burgers. A few people in the comments section mentioned you could build a Twitter bot....So I did! 

First things first, my inspiration for this project? Well, as I said above, I thought Zach's project was awesome and fun and I've always wanted to use the Twitter API's / SDK to build a bot but I've never had an idea of what to build. Alas, here we are :-D 

**Some notes**......I'm not a Java Dev by trade, I'm a Front end guy at heart but I've been learning some Spring / Java on the side. There is a lot of bad code in there, but I'll improve on it over time (*notice the lack of unit tests...yeah me too...funny that eh?*)

### The basic's of the code..

For anyone learning Spring or those interested in using the SDK of Twitter, it's really easy. Firstly you'll need to head over to the Twitter Developer centre and create an account. Once you've done this, you'll need to create a new "Application" and get the keys....I won't cover this in any detail as there is so many docs on this part. But you'll need your keys to configure your twitter SDK client.

** The Goal**
I wanted to put together some Spring code, that I could run as a cloud function in GCP which would at a specified time, post 3 random facts to Twitter about the show bob's burger

**The strategy:**

As stated, I'm going to use ZacharySpielberger API which can be seen here:  https://thefullstack.network/u/ZacharySpielberger/project/bob-s-burgers-api

In my head, I wanted to keep this code small but also in some decent logical order so I came up with the following:

- Service Layer to manage posting the "content" directly to Twitter
- Service Layer to query ZacharySpielberger's API
- Configuration separation of the Twitter SDK away from any service layers
- A "Cron" scheduler....in built that would post at my desired intervals 


** The code (IT'S LIVES!!!) **
Yup first a snippet of my service Layer for fetching the data from the real bob's burger API

```java
  @Autowired
    public BurgerService(RestTemplateBuilder restTemplateBuilder) {
        RestTemplate restTemplateWithErrorHandler = restTemplateBuilder
                .errorHandler(new RestTemplateResponseErrorHandler())
                .build();
    }

    /**
     * Method to fetch a random character from the bobs burger API and post it to twitter
     * @throws IOException -- Exception thrown if we cannot create a local copy of the Character image -> This is inherited from the Twitter Service
     * @throws TwitterException --  Exception thrown if we post to Twitter -> This is inherited from the Twitter Service
     */
    public void fetchRandomCharacter() throws IOException, TwitterException {
        //Firstly lets fetch all characters from the show:
        ResponseEntity<Character[]> allCharacterResponse = restTemplateWithErrorHandler.exchange(
                bobsBurgerApi + "/characters/",
                HttpMethod.GET, null, Character[].class);
        long totalNumberOfCharacters = 0;

        if (allCharacterResponse.getBody() != null && allCharacterResponse.getBody().length > 0) {
            totalNumberOfCharacters = Arrays.stream(allCharacterResponse.getBody()).count();
        }

        Random random = new Random();
        int randomCharacterIndex = random.ints(1, Math.toIntExact(totalNumberOfCharacters))
                .findFirst()
                .getAsInt();

        //Now lets pick a random one from the Stream Array, and we'll request that
        ResponseEntity<Character> characterResponse = restTemplateWithErrorHandler.exchange(
                bobsBurgerApi + "/characters/" + randomCharacterIndex,
                HttpMethod.GET, null, Character.class);

        if(characterResponse.getBody() != null) {
            ObjectMapper mapper = new ObjectMapper();
            Character character =  mapper.convertValue(characterResponse.getBody(), Character.class);
            twitterService.postGuessTheCharacter(character.getName(), character.getImage(), character.getOccupation(), character.getFirstEpisode());
        }
    }
```

There's nothing fancy here, basically make a request to get all the characters of the show in this case...then pic one at random and get all the Details on said character

Now, on to the Tweety bird Service Layer. The below snippet shows a method in the Twitter Post Service layer which manages the actual crafting of the tweet and the post...

```java
  @Autowired
    private Twitter twitter;

    /**
     * Method to Post a Character to Twitter
     * @param characterName -- The Name of character to post
     * @param characterImageUrl -- The image of the character to go with the post
     * @param characterOccupation -- The occupation of the character
     * @param firstAppeared -- When the character first appeared
     * @throws TwitterException -- Twitter expection, thrown if unable to post
     * @throws IOException -- IO Exception should we not be able to download the image
     */
    public void postGuessTheCharacter(String characterName, String characterImageUrl, String characterOccupation, String firstAppeared) throws TwitterException, IOException {

        logger.info("Generating text for tweet");
        String statusMessage = "Can you guess this character??? " +
                "They first appeared in Episode " + firstAppeared + "as a " + characterOccupation + "...........................thats right its "+ characterName;

        URL url = new URL(characterImageUrl);
        File destination = new File(characterImageUrl.substring(characterImageUrl.lastIndexOf("/") + 1));

        logger.info("Copying the Image so we can post it to Twitter");
        FileUtils.copyURLToFile(url, destination);

        File imageToPost = new File(destination.getAbsolutePath());

        long[] mediaIds = new long[1];
        UploadedMedia media = twitter.uploadMedia(imageToPost);
        mediaIds[0] = media.getMediaId();

        logger.info("Creating new StatusUpdate Object");
        StatusUpdate statusUpdate = new StatusUpdate(statusMessage);
        statusUpdate.setMediaIds(mediaIds);
        postStatusUpdateToTwitter(statusUpdate);
    }

    /**
     * Method to Post Tweet to Twitter
     * @param statusUpdate -- Status Update Object
     */
    private void postStatusUpdateToTwitter(StatusUpdate statusUpdate) {
        try {
            logger.info("Attempting to Post new StatusUpdate Object");
            twitter.updateStatus(statusUpdate);
            logger.info("Posted new StatusUpdate Object");
        } catch (TwitterException e) {
            logger.error("Unable to Post to Twitter {}", e.getErrorMessage());
        }
    }

```


Ok, almost there, now all I needed to do was configure the Twitter SDK which is super easy:

```java

@Configuration
public class TwitterBotConfig {

    @Value("${twitter.auth-api-key}")
    private String twitterApiKey;

    @Value("${twitter.auth-api-secret}")
    private String twitterApiSecret;

    @Value("${twitter.auth-api-access-token-secret}")
    private String twitterAccessTokenSecret;

    @Value("${twitter.auth-api-access-token}")
    private String twitterAccessToken;

    @Bean
    public Twitter twitter() {
        ConfigurationBuilder cb = new ConfigurationBuilder();
        cb.setOAuthConsumerKey(twitterApiKey);
        cb.setOAuthConsumerSecret(twitterApiSecret);
        cb.setOAuthAccessTokenSecret(twitterAccessTokenSecret);
        cb.setOAuthAccessToken(twitterAccessToken);
        TwitterFactory tf = new TwitterFactory(cb.build());
        return tf.getInstance();
    }
}
```

And the last step.....

Now, as I said I wanted this bot to post every hour three facts or trivia to Twitter. With a Spring scheduler this is super easy (see below)

```java
    @Autowired
    BurgerService burgerService;

    @Scheduled(fixedRate = 5000)
    public void postRandomStore() throws IOException, TwitterException {
        burgerService.fetchRandomStore();
    }

    @Scheduled(fixedRate = 6000)
    public void postRandomCharacter() throws IOException, TwitterException {
        burgerService.fetchRandomCharacter();
    }

    @Scheduled(fixedRate = 7000)
    public void postRandomEpisodeFact() throws IOException, TwitterException {
        burgerService.fetchRandomEpisodeFact();
    }
```

And thats it...super super easy.

Let me know what you think and any ideas on what I could / should do next with it.





### Proud to present my first Twitter bot....in Java no less

So firstly I want to mention @ZacharySpielberger for this one. Zach built what I thought was a great, fun API to give back data on the TV show Bob's Burgers. A few people in the comments section mentioned you could build a Twitter bot....So I did! 

First things first, my inspiration for this project? Well, as I said above, I thought Zach's project was awesome and fun and I've always wanted to use the Twitter API's / SDK to build a bo

Matt White

React Auto-complete boom!

Bob's Burger Twitter Bot

Saying hello! 👋

Matt White

React Auto-complete boom!

Bob's Burger Twitter Bot

Saying hello! 👋