The Telescope PR
Overall this was the hardest pull request I made so far. I feel like I overstepped past my comfort zone for this PR, but with some help I was able to get the front-end portion done. To start I didn't really know that much about react so I had to learn as I worked on it. I felt a little embarrassed asking all these questions in the telescope slack, but without stepping out of comfort zone and asking for help there I don't think I would of had it done.
Issue: Add autocomplete to search for Authors
PR: Fix #1260 Added frontend support for autocomplete
My Original PR: Fix #1260: Added frontend support for autocomplete
Setting up Telescope
Setting up Telescope took some time to get it to work on my end. I actually had some extension conflicts so I had to uninstall some of my used extensions to fix this. After this it worked fine, and following the contributing/development docs I got it running.
The Work
At the beginning I tried to use a Material-ui autocomplete component, but that turned out to either be incompatible with Telescope of some other issue. After this and reaching out for help I made my own components to get the job done. First was main file SearchInput which when given a filter prop it would return either a PostSearchInput or AuthorSearchInput component back to the SearchBar. The reasoning between the two was because when searching for posts we did not need a data list tied to it.
function SearchInput({ text, filter, onChange }) {
const classes = useStyles();
return filter === 'author' ? (
<AuthorSearchInput
classes={classes}
value={text}
onChange={(event) => onChange(event.target.value)}
/>
) : (
<PostSearchInput
classes={classes}
value={text}
onChange={(event) => onChange(event.target.value)}
/>
);
}
Both AuthorSearchInput and PostSearchInput had similar structure but Author had a data list tied to it that you can see below:
function AuthorSearchInput({ text, onChange, classes }) {
return (
<>
<input
className={classes.input}
list="search-suggestions"
placeholder="How to Get Started in Open Source"
inputProps={{ 'aria-label': 'search telescope' }}
value={text}
onChange={onChange}
/>
<datalist id="search-suggestions"></datalist>
</>
);
}
Merge Conflicts Issues
I think at one point I may of pull master into my branch which caused a lot of issues down the line especially near the end. Reaching out for help I got advice and a guide on what todo to help fix this which helped a lot.
What did I learn?
Going through all this pain of jumping into something I had no idea how todo, I feel like I understand the project and how its code works a lot better now. And I guess I have a head start for my react class next semester.
Compared to all my other work in this class, I feel like release 0.3 was my biggest disappointment, I'm hoping to go into release 0.4 better and smarter to redeem myself here. First step is to start a lot earlier this time.
Thanks,
-Matt
Comments
Post a Comment