From 7369210133cb98107b85a8a9c06d9af351a1ae63 Mon Sep 17 00:00:00 2001
From: Abeer Eltanawy <abeer.eltanawy@gmail.com>
Date: Mon, 18 Sep 2023 16:27:49 -0700
Subject: [PATCH] Change the content of the fragments file

---
 .../{{cookiecutter.component_name}}.react.js  | 46 ++-----------------
 1 file changed, 5 insertions(+), 41 deletions(-)

diff --git a/{{cookiecutter.project_shortname}}/src/lib/fragments/{{cookiecutter.component_name}}.react.js b/{{cookiecutter.project_shortname}}/src/lib/fragments/{{cookiecutter.component_name}}.react.js
index f2f4718..19db65a 100644
--- a/{{cookiecutter.project_shortname}}/src/lib/fragments/{{cookiecutter.component_name}}.react.js
+++ b/{{cookiecutter.project_shortname}}/src/lib/fragments/{{cookiecutter.component_name}}.react.js
@@ -1,41 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {defaultProps, propTypes} from '../components/{{cookiecutter.component_name}}.react';
-
-/**
- * ExampleComponent is an example component.
- * It takes a property, `label`, and
- * displays it.
- * It renders an input with the property `value`
- * which is editable by the user.
- */
-const {{cookiecutter.component_name}} = (props) => {
-    const {id, label, setProps, value} = props;
-
-    return (
-        <div id={id}>
-            ExampleComponent: {label}&nbsp;
-            <input
-                value={value}
-                onChange={
-                    /*
-                        * Send the new value to the parent component.
-                        * setProps is a prop that is automatically supplied
-                        * by dash's front-end ("dash-renderer").
-                        * In a Dash app, this will update the component's
-                        * props and send the data back to the Python Dash
-                        * app server if a callback uses the modified prop as
-                        * Input or State.
-                        */
-                    e => setProps({ value: e.target.value })
-                }
-            />
-        </div>
-    );
-}
-
-
-{{cookiecutter.component_name}}.defaultProps = defaultProps;
-{{cookiecutter.component_name}}.propTypes = propTypes;
-
-export default {{cookiecutter.component_name}};
+{% if cookiecutter.component_type == "Function Component" -%}
+    {%- include 'cookiecutter_templates/FunctionComponent.react.js' -%}
+{%- else -%}
+    {%- include 'cookiecutter_templates/ClassComponent.react.js' -%}
+{%- endif -%}