<commit_before>// @flow
import CSSModel from './CSSModel';
import HTMLModel from './HTMLModel';
import { tags } from '../html-support/tags';
import { globalIncludesMap } from '../fileSupport';
import { saveTextToFile } from '../fileSupport';

export default class ComponentModel {
   constructor(cssModel: CSSModel) {
     this._cssModel = cssModel;
     this._children = [];
   }

   set name(name: string) {
     this._name = name;
   }

   get name(): string {
     return this._name;
   }

   set htmlModel(htmlModel: HTMLModel) {
     this._htmlModel = htmlModel;
   }

   get childern(): Array<ComponentModel> {
     return this._children;
   }

   get htmlModel(): HTMLModel {
     return this._htmlModel;
   }

   get cssModel(): CSSModel {
     return this._cssModel;
   }

   addChild(component: ComponentModel) {
     this._children.push(component);
   }

   reactTemplate(name: string, content: string, cssPath: string, additionalFilePaths: Array<string>): string {
     // Build file imports
     let otherImports: string = '';
     if (additionalFilePaths && additionalFilePaths.length > 0) {
       const first = `import '${additionalFilePaths[0]}';`;
       otherImports = additionalFilePaths.reduce((first, second) => first + `import ${second.replace('./', '')} from '${second}';`, '');
     }

     otherImports += `import '${cssPath}';`;

     return `
     import React from 'react';
     ${otherImports}

     class ${name} extends React.Component {
       render() {
         return (
           ${content}
         );
       }
     }

     module.exports = ${name};
     `;
   }

   childReactTemplate(name: string): string {
     return `
      <${name} />
     `;
   }

   generate(fromParent: bool = false): string {
     if (this._htmlModel) {
        return this._htmlModel.generate();
     }

     // This needs to be called before child.generate
     this.registerComponentFilePaths();

     // Generate the react component
     let childContent: string = "";
     const additionalFilePaths: Array<string> = [];
     for (const child of this._children) {
       if (child.name) {
         const childFilePath = globalIncludesMap[child.name];
         additionalFilePaths.push(childFilePath);
       }
       childContent += child.generate(true);
     }

     // Wrap content in a div if there is more than one child
     if (this._children.length > 1) {
       let htmlModel = new HTMLModel(tags.div, [], childContent);
       childContent = htmlModel.generate();
     }

     // CSS file path
     const relativeStyleDirectory = globalIncludesMap['relativeStyleDirectory'];
     // TODO: add back once we can create folder
     // const cssFilePath = `${relativeStyleDirectory}/${this._name}`;
     const cssFilePath = `./${this._name}.css`;

     const reactContent = this.reactTemplate(this._name, childContent, cssFilePath, additionalFilePaths);
     const cssContent = this._cssModel.generate();

     console.log(reactContent);
     console.log(cssContent);

     const projectDirectory = globalIncludesMap.projectDirectory;<commit_msg>Added classname<commit_after>// @flow
import CSSModel from './CSSModel';
import HTMLModel from './HTMLModel';
import { tags } from '../html-support/tags';
import { globalIncludesMap } from '../fileSupport';
import { saveTextToFile } from '../fileSupport';

export default class ComponentModel {
   constructor(cssModel: CSSModel) {
     this._cssModel = cssModel;
     this._children = [];
   }

   set name(name: string) {
     this._name = name;
   }

   get name(): string {
     return this._name;
   }

   set htmlModel(htmlModel: HTMLModel) {
     this._htmlModel = htmlModel;
   }

   get childern(): Array<ComponentModel> {
     return this._children;
   }

   get htmlModel(): HTMLModel {
     return this._htmlModel;
   }

   get cssModel(): CSSModel {
     return this._cssModel;
   }

   addChild(component: ComponentModel) {
     this._children.push(component);
   }

   reactTemplate(name: string, content: string, cssPath: string, additionalFilePaths: Array<string>): string {
     // Build file imports
     let otherImports: string = '';
     if (additionalFilePaths && additionalFilePaths.length > 0) {
       const first = `import '${additionalFilePaths[0]}';`;
       otherImports = additionalFilePaths.reduce((first, second) => first + `import ${second.replace('./', '')} from '${second}';`, '');
     }

     otherImports += `import '${cssPath}';`;

     return `
     import React from 'react';
     ${otherImports}

     class ${name} extends React.Component {
       render() {
         return (
           ${content}
         );
       }
     }

     module.exports = ${name};
     `;
   }

   childReactTemplate(name: string): string {
     return `
      <${name} />
     `;
   }

   generate(fromParent: bool = false): string {
     if (this._htmlModel) {
        return this._htmlModel.generate();
     }

     // This needs to be called before child.generate
     this.registerComponentFilePaths();

     // Generate the react component
     let childContent: string = "";
     const additionalFilePaths: Array<string> = [];
     for (const child of this._children) {
       if (child.name) {
         const childFilePath = globalIncludesMap[child.name];
         additionalFilePaths.push(childFilePath);
       }
       childContent += child.generate(true);
     }

     // Wrap content in a div if there is more than one child
     if (this._children.length > 1) {
       let htmlModel = new HTMLModel(tags.div, [this._name], childContent);
       childContent = htmlModel.generate();
     }

     // CSS file path
     const relativeStyleDirectory = globalIncludesMap['relativeStyleDirectory'];
     // TODO: add back once we can create folder
     // const cssFilePath = `${relativeStyleDirectory}/${this._name}`;
     const cssFilePath = `./${this._name}.css`;

     const reactContent = this.reactTemplate(this._name, childContent, cssFilePath, additionalFilePaths);
     const cssContent = this._cssModel.generate();

     console.log(reactContent);
     console.log(cssContent);

     const projectDirectory = globalIncludesMap.projectDirectory;
{'fraction_non_alphanumeric': 0.12751786874593893, 'fraction_numerical': 0.0009746588693957114, 'mean_word_length': 2.784265519360787, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1050124', 'n_tokens_mistral': 1745, 'n_tokens_neox': 1695, 'n_words': 427}