Skip to content

✨ Add all github languages#267

Draft
saglaniharsh wants to merge 1 commit into
ohbarye:masterfrom
saglaniharsh:master
Draft

✨ Add all github languages#267
saglaniharsh wants to merge 1 commit into
ohbarye:masterfrom
saglaniharsh:master

Conversation

@saglaniharsh

Copy link
Copy Markdown

FIX #10
I've added all the github languages on this page

But as your todo suggests, it would be better if we implement autocomplete combo box.
I tried a lot ( I have no experience in TypeScript and react ) but I couldn't figure out what the errors were.

Steps I took:

  1. Upgrade material core and include ``material lab``` for autocomplete
  2. Since we upgraded material core we need to change the syntax of StyleRulesCallback something like this:
import {
  StyleRulesCallback,
  Theme
} from "@material-ui/core/styles";
  .
  .
  .

const styles: StyleRulesCallback<Theme,Props> = _ => ({
  .
  .
  .
});
  1. Make a function return all the languages in a group as github shows
export function Grouped() {
  function handleInputChange(event,value){
    console.log(event); // required as we need value and it will throw error that event is not read
    window.location.href = `/?language=${value.value}`;
  }

  return (
    <Autocomplete
      id="language"
      options={languageOptions}
      groupBy={option => option.type}
      getOptionLabel={option => option.name}
      style={{ width: 300 }}
      onChange={handleInputChange}
      renderInput={params => <TextField {...params} label="Select Language" variant="outlined" />}
    />
  );
}
  1. Instead of <FormGroup> use {this.Grouped()}

this is supposed to be it but I faced a lot of problems.

Problems I faced:

  1. dependency issue of material lab and material core
  2. implementing inputProps property in Autocomplete as in MenuItem
  3. changing syntax of StylesRulesCallback
  4. setting value of Autocomplete to language passed
  5. This error that I couldn't figure out
  Overload 1 of 2, '(props: Pick<PropsWithChildren<Props>, "language" | "children" | "fetchedRepositoryCount" | "totalRepositoryCount"> & StyledComponentProps<string> & Props, context?: any): ReactElement<...> | Component<...>', gave the following error.
16:23:26.613
    Property 'classes' is missing in type '{ language: string; fetchedRepositoryCount: number; totalRepositoryCount: number; }' but required in type 'Props'.
16:23:26.613
  Overload 2 of 2, '(props: PropsWithChildren<Pick<PropsWithChildren<Props>, "language" | "children" | "fetchedRepositoryCount" | "totalRepositoryCount"> & StyledComponentProps<string> & Props>, context?: any): ReactElement<...> | Component<...>', gave the following error.
16:23:26.613
    Property 'classes' is missing in type '{ language: string; fetchedRepositoryCount: number; totalRepositoryCount: number; }' but required in type 'Props'.
16:23:26.613
    81 |   return (
16:23:26.613
    82 |     <Paper elevation={1} className={classes.paper}>
16:23:26.613
  > 83 |       <Header
16:23:26.613
       |        ^
16:23:26.613
    84 |         language={language}
16:23:26.613
    85 |         fetchedRepositoryCount={repositories.length}
16:23:26.613
    86 |         totalRepositoryCount={repositoryCount}

@vercel

vercel Bot commented Mar 7, 2020

Copy link
Copy Markdown

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click on the icon next to each commit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enable to select all languages that GitHub recognize

1 participant