Giters

iteria-app / lowcode

React Lowcode - prototype, develop and maintain internal apps easier

Home Page:https://iteria.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Template for form inputs (prepare for graphql mutation)

jozef-slezak opened this issue · comments

commented

Goal:

  • refactoring of existing code: instead of typescript factory that create AST use templates + refactoring rules
  • read template into AST and apply refactoring rules (using a script)

Templates

Read info/background from #138.

Let's have multiple templates and preserve existing logic using them:

  • Template for input string
  • Template for integer
  • Template for decimal
  • Template for date
  • Template for time
  • Template for date time
function StringInputTemplate({value, handleChange, error})
<TextField 
      label={T('label')} 
      placeholder={T('placeholder')} 
      value={value} 
      onChange={handleChange}
      error={error}
      helperText={error}
/>

Refactoring rules:

  • try to replace translation T('label') if not missing with real messageID and T('messageID') with a particular translation framework (react-intl and potentially react-i18n)
  • try to replace translation T('placeholder') if not missing with real messageID and T('messageID') with a particular translation framework (react-intl and potentially react-i18n)
  • inline all prop value occurences with for example value={formik.values.email} (in case of using formik)
  • inline all prop handleChange with for example onChange={formik.handleChange} (in case of using formik)
  • inline all prop errorwith for example error={formik.touched.email && Boolean(formik.errors.email)} and in this case also helperText={formik.touched.email && formik.errors.email}

https://codesandbox.io/s/github/formik/formik/tree/master/examples/with-material-ui?from-embed

Next steps will be:

  • template detail page that queries graphql by PK
  • introduce graphql mutation in the template