KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use createFactories method in root

Best JavaScript code snippet using root

ControlPanel.js

Source:ControlPanel.js

1import React, { PureComponent } from 'react'2import PropTypes from 'prop-types'3import { connect } from 'react-redux'4import { bindActionCreators } from 'redux'5import _ from 'lodash'6import AppBar from '@material-ui/core/AppBar'7import Tabs from '@material-ui/core/Tabs'8import Tab from '@material-ui/core/Tab'9import Select from '@material-ui/core/Select'10import MenuItem from '@material-ui/core/MenuItem'11import TextField from '@material-ui/core/TextField'12import Button from '@material-ui/core/Button'13import Typography from '@material-ui/core/Typography'14import Input from '@material-ui/core/Input'15import InputLabel from '@material-ui/core/InputLabel'16import FormControl from '@material-ui/core/FormControl'17import Checkbox from '@material-ui/core/Checkbox'18import ListItemText from '@material-ui/core/ListItemText'19import { parse } from 'json2csv'20import CircularProgress from '@material-ui/core/CircularProgress'21import FactoryInfo from '../components/FactoryInfo'22import ShowOnly from '../components/ShowOnly'23import countries from '../data/countries.json'24import { DownloadCSV } from '../util/util'25import * as sourceActions from '../actions/source'26const defaultContainer = ({ children }) => <div className="control-panel">{ children }</div>27const TabContainer = props => <Typography component="div">{ props.children }</Typography>28const mapStateToProps = state => ({29  source: state.source30})31const mapDispatchToProps = dispatch => ({32  actions: bindActionCreators(sourceActions, dispatch)33})34TabContainer.propTypes = {35  children: PropTypes.node.isRequired36}37defaultContainer.propTypes = {38  children: PropTypes.node.isRequired39}40class ControlPanel extends PureComponent {41  state = {42    factories: [],43    factoriesRes: '',44    factoriesList: [],45    showFacroiesList: false,46    name: '',47    country: [],48    contributor: [],49    contributorType: [],50    tabValue: 1,51    sources: [],52    countries: [],53    isSpinning: false,54    totalFactories: 5434655  }56  componentDidMount() {57    const { factories, sharedSearch } = this.props58    fetch(`${process.env.REACT_APP_API_URL}/allsource`)59    .then(response => response.json())60    .then(data => {61      const sources = data.sources.filter(s => s.name).map(({ name, _id, uid, list, user_type }) => ({ name, _id, uid, list, user_type }))62      this.setState({ sources })63      this.props.actions.setSource(sources)64    })65    fetch(`${process.env.REACT_APP_API_URL}/allcountry`)66    .then(response => response.json())67    .then(data => {68      const countryNames = data.countries.map(s => {69        const cname = countries.find(c => c.code === s)70        return cname71      })72      .filter(co => co !== undefined)73      this.setState({74        countries: countryNames75      })76    })77    fetch(`${process.env.REACT_APP_API_URL}/totalFactories`)78    .then(response => response.json())79    .then(data => {80      if (data && data.total) {81        this.setState({82          totalFactories: data.total83        })84      }85    })86    if (factories.length) {87      this.setState({88        factories,89        factoriesRes: this.createfactoriesRes(factories),90        factoriesList: this.createfactoriesList(factories)91      })92    }93    if (Object.keys(sharedSearch).length) {94      this.handleSharedUrl(sharedSearch)95    }96  }97  onChildClear = () => this.props.onClearSelectedFac()98  onSelectFactory = id => this.props.onSelectFactory(id)99  // Sort countries alphabetically100  sortedCountries = () => this.state.countries.sort((a, b) => {101    const aName = a.names ? a.names[0] : a.name102    const bName = b.names ? b.names[0] : b.name103    return aName.toLowerCase().localeCompare(bName.toLowerCase())104  }).map(c => (105    <MenuItem value={ c.code } key={ c.code }>106      <Checkbox color="primary" checked={ this.state.country.indexOf(c.code) > -1 } />107      <ListItemText primary={ c.names ? c.names[0] : c.name } />108    </MenuItem>109  ))110  checkboxSources = () => this.state.sources111  .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))112  .map(c => (113    <MenuItem value={ c._id } key={ c._id }>114      <Checkbox color="primary" checked={ this.state.contributor.indexOf(c._id) > -1 } />115      <ListItemText primary={ c.name } className="notranslate" />116    </MenuItem>117  ))118  sourcesTypes = () => _.uniqBy(this.state.sources119  .filter(s => (s.user_type !== null && s.user_type !== undefined))120  .sort((a, b) => a.user_type.toLowerCase().localeCompare(b.user_type.toLowerCase())), 'user_type')121  .map(c => (122    <MenuItem value={ c.user_type } key={ c.user_type }>123      <Checkbox color="primary" checked={ this.state.contributorType.indexOf(c.user_type) > -1 } />124      <ListItemText primary={ c.user_type } className="notranslate" />125    </MenuItem>126  ))127  // If someone has pasted a url into the browser, search OAR with the provided128  // parameters129  handleSharedUrl = ({ name, contributor, country, factory }) => this.setState({130    name: name || '',131    contributor: (contributor && contributor.split(',')) ? contributor.split(',') : [],132    country: (country && country.split(',')) ? country.split(',') : [],133    tabValue: 1134  }, () => this.searchFactory({ preventDefault: () => {} }, factory))135  updateInputField = field => event => {136    const attribute = {}137    attribute[field] = event.target.value138    this.setState(attribute)139  }140  searchFactory = (e, specificFactory) => {141    e.preventDefault()142    const { name, country, contributor, contributorType } = this.state143    this.setState({ isSpinning: true })144    let url = `${process.env.REACT_APP_API_URL}/searchFactoryNameCountry?name=${name}&country=${country}`145    if (contributor && contributor.length > 0) {146      url += `&contributor=${contributor}`147      this.props.updateSearchButton(name, country, contributor)148    } else url += '&contributor='149    fetch(url)150    .then(results => results.json())151    .then(data => {152      if (!data || !Array.isArray(data) || !data.length || data.length <= 0) {153        this.setState({ factories: [], factoriesRes: this.createfactoriesRes([]), factoriesList: [], isSpinning: false })154        this.props.onUpdate([])155        return156      }157      // Use lodash includes instead because ie 11 doesn't support native .includes158      // Filter out factories that don't have searched key word in their name159      let factories = !name ? data : data.filter(f => _.includes(f.name.toLowerCase(), name.toLowerCase()) || _.includes(f.otherNames, name))160      // Filter out factories that don't have the contributors in their source161      if (contributor && contributor.length > 0) {162        // factories = factories.filter(f => f.source.some((s => _.includes(contributor, s._id))))163        factories = factories.filter(f => {164          const fSourceId = f.source.map(s => s._id)165          return _.difference(contributor, fSourceId).length === 0166        })167      }168      // Filter out factories that don't have contributor types, $and filter, has type A and type B for their sources[]169      if (contributorType && contributorType.length > 0) {170        factories = factories.filter(f => {171          if (!f.source || f.source.length <= 0) return false172          const fSourceTypes = f.source.map(s => s.user_type || null)173          return _.difference(contributorType, fSourceTypes).length === 0174        })175      }176      if (!factories && factories.length <= 0) {177        this.setState({ factories, factoriesRes: this.createfactoriesRes([]), factoriesList: [], isSpinning: false })178        this.props.onUpdate([])179        return180      }181      const factoriesRes = this.createfactoriesRes(factories)182      const factoriesList = this.createfactoriesList(factories)183      this.setState({ factories, factoriesRes, factoriesList, isSpinning: false }, () => {184        this.props.onUpdate(factories)185      })186      if (specificFactory) {187        this.props.setSpecificFactory(specificFactory)188      }189    })190  }191  createfactoriesRes = factories => {192    const { totalFactories } = this.state193    if (!factories.length) {194      return <div> There were no results for this search. </div>195    }196    if (!this.state.name && !this.state.contributor.length && !this.state.country.length && !this.state.contributorType.length) {197      return (198        <div className="control-panel__group">199          <h1 className="control-panel__heading">SEARCH RESULTS:</h1>200          <p className="helper-text">Your search criteria was too broad. Results are limited to { factories.length } Facilities of { totalFactories } Total Facilities.</p>201        </div>202      )203    }204    return (205      <div className="control-panel__group">206        <h1 className="control-panel__heading">SEARCH RESULTS:</h1>207        <p className="helper-text">Found { factories.length } Facilities of { totalFactories } Total Facilities.</p>208      </div>209    )210  }211  createfactoriesList = factories => {212    if (!factories || factories.length <= 0) return []213    if (process.env.REACT_APP_CLICKABLE_LIST) return factories.map((f, i) => <p className={ (i === factories.length - 1) ? 'notranslate link-underline cursor margin-bottom-64' : 'notranslate link-underline cursor' } role="presentation" onClick={ () => this.onSelectFactory(f.uniqueId) } key={ f.uniqueId }>{ f.name }</p>)214    return factories.map((f, i) => <p className={ (i === factories.length - 1) ? 'notranslate margin-bottom-64' : 'notranslate' } key={ f.uniqueId }>{ f.name }</p>)215  }216  handleTabChange = (event, tabValue) => this.setState({ tabValue })217  // Recursively flattens an array down to a deepness of 1218  flatten = array => array.reduce((acc, val) => (Array.isArray(val) ? acc.concat(this.flatten(val)) : acc.concat(val)), [])219  factoriesCSV = () => parse(this.props.factories, { fields: ['nameId', 'longitude', 'latitude', 'name', 'address'] })220  convertIdToName = ids => {221    const sources = this.state.sources.filter(s => ids.indexOf(s._id) > -1)222    return sources.map(s => s.name)223  }224  convertCodeToName = codes => {225    const filteredCountries = this.state.countries.filter(s => codes.indexOf(s.code) > -1)226    return filteredCountries.map(s => (s.name ? s.name : s.names[0]))227  }228  resetSearch = () => this.setState({229    name: '',230    contributor: [],231    contributorType: [],232    country: [],233    factories: [],234    factoriesRes: '',235    factoriesList: [],236    isSpinning: false,237    showFacroiesList: false238  }, () => {239    this.props.onUpdate([])240  })241  toggleList = () => {242    const { showFacroiesList } = this.state243    this.setState({ showFacroiesList: !showFacroiesList })244  }245  render() {246    const { selectedFactory, factories } = this.props247    const Container = defaultContainer248    const selectFac = selectedFactory ? factories.find(f => f.uniqueId === selectedFactory) : null249    const { tabValue, factoriesRes, factoriesList, showFacroiesList } = this.state250    return (251      <Container>252        <ShowOnly if={ !!selectedFactory }>253          <FactoryInfo info={ selectFac } onClearSelection={ this.onChildClear } />254        </ShowOnly>255        <ShowOnly if={ !selectedFactory }>256          <div className="panel-header">257            <h3 className="panel-header__title">Open Apparel Registry</h3>258            <p className="panel-header__subheading">The open map of global apparel factories.</p>259          </div>260          <AppBar position="static">261            <Tabs262              value={ tabValue }263              onChange={ this.handleTabChange }264              classes={{265                root: 'tabs',266                indicator: 'tabs-indicator-color'267              }}268            >269              <Tab label="Guide" className="tab-minwidth" />270              <Tab label="Search" className="tab-minwidth" />271            </Tabs>272          </AppBar>273          <ShowOnly if={ tabValue === 0 }>274            <TabContainer>275              <div className="control-panel__content">276                <p className="control-panel__body">277                  The Open Apparel Registry (OAR) is a tool to identify every278                  apparel facility worldwide. It is an open sourced, global279                  database of apparel (garments, footwear and accessories)280                  facility names and locations. The tool  normalizes uploaded281                  data - specifically facility names and addresses - submitted282                  by contributors such as brands, industry associations and283                  non-profits and assigns each facility a unique OAR ID number.284                  Each contributor is listed next to every facility it has submitted.285                </p>286                <p className="control-panel__body">287                  To contribute to the database, users must create an account.288                  Anyone can sign up and contribute. Users interested in browsing289                  the OAR are able to access it freely without creating an account.290                </p>291                <a href="http://info.openapparel.org/about" target="_blank" rel="noopener noreferrer" className="link-underline">Learn More</a>292              </div>293            </TabContainer>294          </ShowOnly>295          <ShowOnly if={ tabValue === 1 }>296            <TabContainer>297              <div className="control-panel__content">298                <form onSubmit={ this.searchFactory }>299                  <div className="form__field">300                    <InputLabel className="form__label">301                      Search a Facility Name302                    </InputLabel>303                    <TextField304                      id="name"305                      placeholder="Facility Name"306                      className="full-width margin-bottom-16 form__text-input"307                      value={ this.state.name }308                      onChange={ this.updateInputField('name') }309                    />310                  </div>311                  <FormControl style={{ width: '100%', marginBottom: '32px' }}>312                    <InputLabel313                      shrink={ false }314                      htmlFor="contributor"315                      style={{316                        fontSize: '16px',317                        fontWeight: 500,318                        color: '#000',319                        transform: 'translate(0, -8px) scale(1)'320                      }}321                    >322                      Filter by Contributor323                    </InputLabel>324                    <Select325                      multiple326                      value={ this.state.contributor }327                      onChange={ this.updateInputField('contributor') }328                      name="contributor"329                      className="full-width margin-top-16 margin-bottom-16 notranslate"330                      input={ <Input name="contributor" id="contributor" className="notranslate" /> }331                      renderValue={ selected => {332                        const selectedNames = this.convertIdToName(selected)333                        return selectedNames.join(', ')334                      } }335                      MenuProps={{336                        style: {337                          maxHeight: '50vh'338                        }339                      }}340                    >341                      { this.checkboxSources() }342                    </Select>343                  </FormControl>344                  <br />345                  <FormControl style={{ width: '100%', marginBottom: '32px' }}>346                    <InputLabel347                      shrink={ false }348                      htmlFor="contributor_type"349                      style={{350                        fontSize: '16px',351                        fontWeight: 500,352                        color: '#000',353                        transform: 'translate(0, -8px) scale(1)'354                      }}355                    >356                      Filter by Contributor Type357                    </InputLabel>358                    <Select359                      multiple360                      value={ this.state.contributorType }361                      onChange={ this.updateInputField('contributorType') }362                      name="contributorType"363                      className="full-width margin-top-16 margin-bottom-16 notranslate"364                      input={ <Input name="contributorType" id="contributorType" className="notranslate" /> }365                      renderValue={ selected => selected.join(', ') }366                      MenuProps={{367                        style: {368                          maxHeight: '50vh'369                        }370                      }}371                    >372                      { this.sourcesTypes() }373                    </Select>374                  </FormControl>375                  <br />376                  <FormControl style={{ width: '100%' }}>377                    <InputLabel378                      shrink={ false }379                      htmlFor="country"380                      style={{381                        fontSize: '16px',382                        fontWeight: 500,383                        color: '#000',384                        transform: 'translate(0, -8px) scale(1)'385                      }}386                    >387                      Filter by Country388                    </InputLabel>389                    <Select390                      multiple391                      value={ this.state.country }392                      onChange={ this.updateInputField('country') }393                      name="country"394                      className="full-width margin-top-16 margin-bottom-16"395                      input={ <Input name="country" id="country" /> }396                      renderValue={ selected => {397                        const selectedNames = this.convertCodeToName(selected)398                        return selectedNames.join(', ')399                      } }400                      MenuProps={{401                        style: {402                          maxHeight: '50vh'403                        }404                      }}405                    >406                      { this.sortedCountries() }407                    </Select>408                  </FormControl>409                  <br />410                  <div className="form__action">411                    <a className="control-link" href="mailto:info@openapparel.org?subject=Reporting an issue">412                      Report an issue413                    </a>414                    <div className="offset offset-right">415                      <Button416                        size="small"417                        variant="outlined"418                        onClick={ this.resetSearch }419                        disableRipple420                        color="primary"421                        className="outlined-button"422                      >423                        Reset424                      </Button>425                      { this.state.isSpinning426                        ? <CircularProgress size={ 30 } className="margin-left-16" />427                        : (428                          <Button429                            variant="contained"430                            size="small"431                            type="submit"432                            color="primary"433                            className="margin-left-16 blue-background"434                            style={{ boxShadow: 'none' }}435                          >436                            Search437                            {/* <Icon>search</Icon> */}438                          </Button>439                        )440                      }441                    </div>442                  </div>443                </form>444                { factoriesRes }445                <ShowOnly if={ this.state.factories.length > 0 }>446                  <div className="control-panel__action control-panel__action--center">447                    <div className="offset offset-right">448                      <Button449                        size="small"450                        variant="outlined"451                        color="primary"452                        onClick={ this.toggleList }453                        className="blue-color notranslate"454                        disableRipple455                      >456                        <ShowOnly if={ !showFacroiesList }>VIEW </ShowOnly>457                        <ShowOnly if={ showFacroiesList }>HIDE </ShowOnly>458                        FACILITY LIST459                      </Button>460                      <Button461                        className="blue-color margin-left-16"462                        size="small"463                        variant="outlined"464                        color="primary"465                        disableRipple466                        onClick={ () => DownloadCSV(this.factoriesCSV(), 'factories.csv') }467                      >468                        DOWNLOAD CSV469                      </Button>470                    </div>471                  </div>472                  <ShowOnly if={ showFacroiesList }>473                    <div className="control-panel__scroll">{ factoriesList }</div>474                  </ShowOnly>475                </ShowOnly>476              </div>477            </TabContainer>478          </ShowOnly>479          <ShowOnly if={ tabValue === 2 }>480            <TabContainer>481              <div className="padding-all" />482            </TabContainer>483          </ShowOnly>484        </ShowOnly>485      </Container>486    )487  }488}489ControlPanel.propTypes = {490  factories: PropTypes.array.isRequired,491  sharedSearch: PropTypes.object,492  onClearSelectedFac: PropTypes.func.isRequired,493  updateSearchButton: PropTypes.func.isRequired,494  onUpdate: PropTypes.func.isRequired,495  onSelectFactory: PropTypes.func.isRequired,496  setSpecificFactory: PropTypes.func.isRequired,497  selectedFactory: PropTypes.string,498  actions: PropTypes.object.isRequired499}500ControlPanel.defaultProps = {501  sharedSearch: {},502  selectedFactory: null503}...

sidebar.js

Source:sidebar.js

...4  // ReactJS5  const React = require("react");6  // Firebug.SDK7  const { createFactories } = require("reps/rep-utils");8  const { Tabs, TabPanel } = createFactories(require("reps/tabs"));9  // WebSockets Monitor10  const { DetailsTab } = createFactories(require("./details-tab"));11  const { PayloadTab } = createFactories(require("./payload-tab"));12  const { SocketIOTab } = createFactories(require("./socketio-tab"));13  const { SockJSTab } = createFactories(require("./sockjs-tab"));14  const { JSONTab } = createFactories(require("./json-tab"));15  const { WampTab } = createFactories(require("./wamp-tab"));16  const { MQTTTab } = createFactories(require("./mqtt-tab"));17  const { QueryStringTab } = createFactories(require("./query-string-tab"));18  /**19   * @template This template represents a list of packets displayed20   * inside the panel content.21   */22  let Sidebar = React.createClass({23  /** @lends Sidebar */24    displayName: "Sidebar",25    getInitialState: function () {26      return {27        tabActive: 1,28      };29    },30    onTabChanged: function (index) {31      this.setState({tabActive: index});...

app.js

Source:app.js

...5  const React = require("react");6  const { connect } = require("react-redux");7  // Firebug SDK8  const { createFactories } = require("reps/rep-utils");9  const { Splitter } = createFactories(require("reps/splitter"));10  const { Events } = require("reps/core/events");11  // WebSockets Monitor12  const { MainToolbar } = createFactories(require("../components/main-toolbar"));13  const { Sidebar } = createFactories(require("../components/sidebar"));14  const { FrameTable } = createFactories(require("../components/frame-table"));15  const { FrameList } = createFactories(require("../components/frame-list"));16  const { selectNextFrame, selectPrevFrame } = require("../actions/selection");17  // Shortcuts18  const { div } = React.DOM;19  /**20   * The top level application component responsible for rendering21   * the entire UI.22   */23  let App = React.createClass({24  /** @lends App */25    displayName: "App",26    componentDidMount: function () {27      key("up", this.onKeyUp);28      key("down", this.onKeyDown);29    },...

Using AI Code Generation

1var factories = require('root').createFactories(__dirname);2var factory = factories.create('User');3var user = factory.create();4var users = factory.createMany(10);5module.exports = function (factory) {6  factory.define('User')7    .sequence('id')8    .sequence('name', function (i) {9      return 'User ' + i;10    })11    .attr('email', '

Using AI Code Generation

1import React from 'react';2import ReactDOM from 'react-dom';3import {createFactories} from './rootComponent.jsx';4  {id: 1, name: 'Rajesh', age: 24},5  {id: 2, name: 'Suresh', age: 25},6  {id: 3, name: 'Mahesh', age: 26},7  {id: 4, name: 'Ganesh', age: 27},8  {id: 5, name: 'Ramesh', age: 28}9];10var factories = createFactories(data);11ReactDOM.render(12    {factories}13  document.getElementById('app')14);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.