69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | } />
83 |
84 |
85 | )}
86 |
87 | );
88 | }
89 | export default App;
90 |
--------------------------------------------------------------------------------
/code-of-conduct.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at deveroalex@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version].
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/src/assets/css/DetailPage.css:
--------------------------------------------------------------------------------
1 | .detailpage {
2 | display: flex;
3 | flex-direction: column;
4 | height: 100%;
5 | grid-column: 2;
6 | padding-left: 2px;
7 | background-image: url("../images/grey-wp.jpg");
8 | background-repeat: repeat;
9 | color: white;
10 | min-height: 1000px;
11 | }
12 |
13 | .detailHead {
14 | border-bottom: 2px solid white;
15 | border-top: 1px solid white;
16 | background-color: #1a3643;
17 | opacity: 0.6;
18 | }
19 |
20 | .detail-img {
21 | height: 100px;
22 | }
23 |
24 | h1 {
25 | display: flex;
26 | justify-content: center;
27 | opacity: 1;
28 | }
29 |
30 | button {
31 | padding: 10px;
32 | border-radius: 5px;
33 | border: 1px solid grey;
34 | background-color: white;
35 | }
36 |
37 | /* .oneDetail {
38 | margin: 10px;
39 | max-width: 300px;
40 | max-height: 450px;
41 | background-color: white;
42 | border-radius: 10px;
43 | box-shadow: 0px 0px 20px rgba(0,0,0, .5);
44 | display: flex;
45 | flex-direction: column;
46 | box-sizing: border-box;
47 | min-width: 150px;
48 | min-height: 150px;
49 | order: 4;
50 | flex: 1 ;
51 | flex-grow: 0;
52 | flex-shrink: 1;
53 | flex-basis: auto;
54 | justify-content: center;
55 | align-items: center;
56 | padding: 2em 0em;
57 | }
58 |
59 | img {
60 | margin-top: .5em;
61 | justify-self: center ;
62 | align-self: center;
63 | border-radius: inherit;
64 | /* width: 300px;
65 | height: 300px }*/
66 |
67 | .oneUIBox {
68 | margin: 10px;
69 | max-width: 228px;
70 | max-height: 600px;
71 | background-color: white; /* #c3d3d0; */
72 | border-radius: 10px;
73 |
74 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
75 | display: flex;
76 | flex-direction: column;
77 | box-sizing: border-box;
78 | min-width: 150px;
79 |
80 | min-height: 200px;
81 | order: 4;
82 | flex: 1;
83 | flex-grow: 0;
84 | flex-shrink: 1;
85 | flex-basis: auto;
86 | justify-content: center;
87 | align-items: center;
88 | padding: 2em 0em;
89 | }
90 | h2 {
91 | overflow: hidden;
92 | white-space: nowrarp;
93 | text-overflow: ellipsis;
94 | max-width: 250px;
95 | min-width: 200px;
96 | border-radius: inherit;
97 | text-decoration: none;
98 | background: #cfd8dc;
99 | font: 14px/1 sans-serif;
100 | color: black;
101 | padding: 1.2em 1em;
102 | /*padding: 0.5rem 1rem; */
103 | border-radius: 4px;
104 | }
105 |
106 | img {
107 | margin-top: 2em;
108 | justify-self: center;
109 | align-self: center;
110 | border-radius: inherit;
111 | }
112 |
113 | .detailList {
114 | overflow: hidden;
115 | white-space: nowrarp;
116 | text-overflow: ellipsis;
117 | max-width: 250px;
118 | min-width: 100px;
119 | border-radius: inherit;
120 | text-decoration: none;
121 | background: #cfd8dc;
122 | font: 14px/1 sans-serif;
123 | color: black;
124 | padding: 20px;
125 | /*padding: 0.5rem 1rem; */
126 | border-radius: 4px;
127 | }
128 |
129 | button {
130 | max-width: 200px;
131 | max-height: 100px;
132 | margin-bottom: 5px;
133 | border-radius: 10px;
134 | background-color: white;
135 | font-family: "Courier New", Courier, monospace;
136 | text-decoration-color: blue;
137 | }
138 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | // Import parts of electron to use
4 | const {
5 | app,
6 | BrowserWindow,
7 | ipcMain,
8 | dialog
9 | } = require("electron");
10 | const path = require("path");
11 | const url = require("url");
12 |
13 | // Keep a global reference of the window object, if you don't, the window will
14 | // be closed automatically when the JavaScript object is garbage collected.
15 | let mainWindow;
16 |
17 | // Keep a reference for dev mode
18 | let dev = false;
19 |
20 | // Broken:
21 | // if (process.defaultApp || /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || /[\\/]electron[\\/]/.test(process.execPath)) {
22 | // dev = true
23 | // }
24 |
25 | if (
26 | process.env.NODE_ENV !== undefined &&
27 | process.env.NODE_ENV === "development"
28 | ) {
29 | dev = true;
30 | }
31 |
32 | // Temporary fix broken high-dpi scale factor on Windows (125% scaling)
33 | // info: https://github.com/electron/electron/issues/9691
34 | if (process.platform === "win32") {
35 | app.commandLine.appendSwitch("high-dpi-support", "true");
36 | app.commandLine.appendSwitch("force-device-scale-factor", "1");
37 | }
38 |
39 | // Choose directory
40 | ipcMain.on("choose_app_dir", async (event) => {
41 | const directory = await dialog.showOpenDialog(mainWindow, {
42 | properties: ["openDirectory"],
43 | });
44 | console.log(directory);
45 | if (!directory) return;
46 | event.sender.send("app_dir_selected", directory.filePaths[0]);
47 | });
48 |
49 | function createWindow() {
50 | // Create the browser window.
51 | mainWindow = new BrowserWindow({
52 | width: 1024,
53 | height: 768,
54 | show: false,
55 | webPreferences: {
56 | nodeIntegration: true,
57 | },
58 | });
59 |
60 | // and load the index.html of the app.
61 | let indexPath;
62 |
63 | if (dev && process.argv.indexOf("--noDevServer") === -1) {
64 | indexPath = url.format({
65 | protocol: "http:",
66 | host: "localhost:8080",
67 | pathname: "index.html",
68 | slashes: true,
69 | });
70 | } else {
71 | indexPath = url.format({
72 | protocol: "file:",
73 | pathname: path.join(__dirname, "dist", "index.html"),
74 | slashes: true,
75 | });
76 | // indexPath = url.format({
77 | // protocol: "http:",
78 | // host: "localhost:8080",
79 | // pathname: "index.html",
80 | // slashes: true,
81 | // });
82 | }
83 | console.log('here', indexPath)
84 |
85 | mainWindow.loadURL(indexPath);
86 |
87 | // and load the index.html of the app.
88 | // mainWindow.loadURL(`file://${__dirname}/build/index.html`);
89 |
90 | // Don't show until we are ready and loaded
91 | mainWindow.once("ready-to-show", () => {
92 | mainWindow.show();
93 |
94 | // Open the DevTools automatically if developing
95 | // if (dev) {
96 | // const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
97 |
98 | // installExtension(REACT_DEVELOPER_TOOLS)
99 | // .catch(err => console.log('Error loading React DevTools: ', err))
100 | // mainWindow.webContents.openDevTools()
101 | // }
102 | });
103 |
104 | // Emitted when the window is closed.
105 | mainWindow.on("closed", function () {
106 | // Dereference the window object, usually you would store windows
107 | // in an array if your app supports multi windows, this is the time
108 | // when you should delete the corresponding element.
109 | mainWindow = null;
110 | });
111 | }
112 |
113 | // This method will be called when Electron has finished
114 | // initialization and is ready to create browser windows.
115 | // Some APIs can only be used after this event occurs.
116 | app.on("ready", createWindow);
117 |
118 | // Quit when all windows are closed.
119 | app.on("window-all-closed", () => {
120 | // On macOS it is common for applications and their menu bar
121 | // to stay active until the user quits explicitly with Cmd + Q
122 | if (process.platform !== "darwin") {
123 | app.quit();
124 | }
125 | });
126 |
127 | app.on("activate", () => {
128 | // On macOS it's common to re-create a window in the app when the
129 | // dock icon is clicked and there are no other windows open.
130 | if (mainWindow === null) {
131 | createWindow();
132 | }
133 | });
134 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | ## Osiris
17 | An Electron based desktop application for generating components and storing them in a UI library.
18 |
19 | __________
20 |
21 |
22 |
23 | ## Table of Contents
24 |
25 | * [About the Project](#about-the-project)
26 | * [Built With](#built-with)
27 | * [Usage](#usage)
28 | * [Getting Started](#getting-started)
29 | * [Prerequisites](#prerequisites)
30 | * [Installation](#installation)
31 | * [Contributing](#contributing)
32 | * [Contact](#contact)
33 | * [Authors](#authors)
34 | * [License](#license)
35 |
36 |
37 |
38 |
39 | ## About The Project
40 |
41 | Osiris is an all-in-one UI Component Library + Generator + Page Builder for developers and designers. Create and store custom, reusable components in React or Vue. Then, dynamically inject the components and manipulate their hierarchy. Finally, download the code for further development.
42 |
43 | ### Built With
44 | * [Electron](https://www.electronjs.org/)
45 | * [React](https://reactjs.org/)
46 | * [PostgreSQL](https://www.postgresql.org/)
47 | * [Node](https://nodejs.org/en/)
48 | * [Webpack](https://webpack.js.org/)
49 | * [AWS](https://aws.amazon.com/)
50 |
51 |
52 | ## Usage
53 |
54 | _______
55 |
56 |
57 | **UI Generator and Library Features**: Create custom components in React or Vue. Store your custom components securely in our UI Library powered by AWS S3
58 |
59 |
60 |
61 | _______
62 |
63 |
64 | **Build Page: Style and Add to Build**: Easily build a React or Vue page by controlling the hierarchy of your custom components stored in your library. Customize your components by adding CSS and text
65 |
66 |
67 |
68 | ________
69 |
70 |
71 | **Build Page: Hierarchy & Download Code to Vue or React**: Edit the hierarchy with simple arrow buttons. Choose to build your React page with/without State or Hooks. You can also build a Vue page with or without State. Lastly, download your custom page directly to your computer!
72 |
73 |
74 |
75 | _______
76 |
77 |
78 |
79 | ## Getting Started
80 |
81 | To get a local copy up and running follow these steps.
82 |
83 | ### Prerequisite Accounts
84 |
85 | * ElephantSQL:
86 | https://www.elephantsql.com/
87 |
88 | * AWS S3 Bucket with Amplify:
89 | https://docs.amplify.aws/lib/storage/getting-started/q/platform/js
90 |
91 | ### Installation
92 |
93 | 1. Clone the repo
94 | ```sh
95 | git clone https://github.com/oslabs-beta/Osiris.git
96 | ```
97 | 2. Install NPM packages
98 | ```sh
99 | npm install
100 | ```
101 | ### Connect Osiris Electron App to SQL Database with ElephantSQL
102 |
103 | 1. SQL Script
104 | ```sh
105 | CREATE TABLE individual_ui (id SERIAL PRIMARY KEY, organization_id VARCHAR, image VARCHAR, tags VARCHAR, react_code VARCHAR, file_name VARCHAR, type VARCHAR, description VARCHAR);
106 | ```
107 |
108 | 2. Add pgkeys.js to /src and include the following:
109 | ```sh
110 | export const PG_URI = ''
111 | ```
112 | ### Initialize AWS-Amplify to your project
113 |
114 | 1. Navigate to Osiris Root folder
115 |
116 | 2. Install Amplify folder following these steps:
117 |
118 | https://docs.amplify.aws/start/getting-started/installation/q/integration/react
119 | https://docs.amplify.aws/lib/storage/getting-started/q/platform/android#initialize-amplify-storage
120 |
121 | ### Run
122 |
123 | 1. Run the electron app
124 | ```sh
125 | npm start
126 | ```
127 |
128 |
129 |
130 | ### Contributing
131 |
132 | Contributions are what make the open source community such an amazing place to be, learn, inspire, and create. Any contributions you make are **greatly appreciated**.
133 |
134 | 1. Fork the Project
135 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
136 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
137 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
138 | 5. Open a Pull Request
139 |
140 |
141 |
142 | ## Contact
143 |
144 | Website: [https://osirisdev.io](https://osirisdev.io/)
145 |
146 | Github Link: [https://github.com/oslabs-beta/Osiris/](https://github.com/oslabs-beta/Osiris/)
147 |
148 | Twitter: [@osiris_io](https://twitter.com/osiris_io)
149 |
150 |
151 | ## Authors
152 |
153 | * [@Wayne Wilcox](https://github.com/LovelaceDink)
154 | * [@Eelan Tung](https://github.com/cupofjoy)
155 | * [@Cameron Fitz](https://github.com/cameronleefitz)
156 | * [@Jehovany Cruz](https://github.com/howaboutjeho)
157 | * [@Garrett Lee](https://github.com/geewailee)
158 |
159 |
160 | ## License
161 |
162 | Distributed under the MIT License. See `LICENSE` for more information.
163 |
--------------------------------------------------------------------------------
/src/containers/CodeDisplayContainer.jsx:
--------------------------------------------------------------------------------
1 | // import '../assets/css/TopContainer.css';
2 | import React, { useState, useEffect } from "react";
3 | import BuildItem from "../components/BuildItem.jsx";
4 | import createFiles from "../utils/createFiles.js";
5 | import componentRender from "../utils/componentRender.js";
6 | import vueComponentRender from "../utils/vueComponentRender.js";
7 | import { Context } from "../context/MyProvider.js";
8 | const IPC = require("electron").ipcRenderer;
9 |
10 | const CodeDisplayContainer = (props) => {
11 | const [DLFileName, setDLFileName] = useState("");
12 | const [selectedState, setSelectedState] = useState("noState");
13 | const [path, setPath] = useState("");
14 | const [codeStr, setCodeStr] = useState("");
15 |
16 | const { globalState, dispatch } = React.useContext(Context);
17 | let { items } = props;
18 |
19 | useEffect(() => {
20 | if (props.items !== undefined) {
21 | renderCode(props.items);
22 | }
23 | }, [props.items]);
24 |
25 | function clear() {
26 | dispatch({
27 | type: "clearCode",
28 | });
29 | setDLFileName("");
30 | setSelectedState("noState");
31 | setPath("");
32 | setCodeStr("");
33 | }
34 |
35 | function handleDownload() {
36 | let codeStr = renderCode(items);
37 | createFiles(codeStr, path, DLFileName, selectedState, globalState.language);
38 | alert("File Downloaded! Osiris is pieced together again, thank you!");
39 | clear();
40 | }
41 |
42 | function onChangeDL(e) {
43 | setDLFileName(e.target.value);
44 | }
45 |
46 | function languageDropDown(e) {
47 | dispatch({type: 'change_language', payload: e.target.value});
48 | renderCode(items, selectedState, e.target.value);
49 | }
50 | function handleDropDown(e) {
51 | setSelectedState(e.target.value);
52 | renderCode(items, e.target.value);
53 | }
54 |
55 | function pickDirectory(e) {
56 | IPC.on("app_dir_selected", (event, path) => {
57 | setPath(path);
58 | });
59 | IPC.send("choose_app_dir");
60 | }
61 |
62 | function renderCode(
63 | items,
64 | stateSelection = selectedState,
65 | language = globalState.language
66 | ) {
67 | let code = "";
68 |
69 | items.forEach((item) => {
70 | //base case, not nested
71 | if (Array.isArray(item)) {
72 | code += handleNested(item, code);
73 | } else {
74 | //close type tag
75 | code += `\n\t\t${item.react_code}`;
76 | }
77 | });
78 |
79 | if (language === "react") {
80 | const reactCode = componentRender(code, stateSelection, DLFileName);
81 | setCodeStr(reactCode);
82 | return reactCode;
83 | }
84 | if (language === "vue") {
85 | const vueCode = vueComponentRender(code, stateSelection, DLFileName);
86 | setCodeStr(vueCode);
87 | return vueCode;
88 | }
89 | }
90 |
91 | function handleNested(items) {
92 | let openingHalf = "\n\t\t
";
93 | let closingHalf = "\n\t\t
";
94 | let counter = 0;
95 | // loop through each item
96 | for (let i = 1; i < items.length; i += 1) {
97 | if (items[i].type === "div") {
98 | openingHalf += "\n\t\t\t
29 | 
57 | 
14 |
15 |
16 | ## Osiris
17 | An Electron based desktop application for generating components and storing them in a UI library.
18 |
19 | __________
20 |
21 |
22 |
23 | ## Table of Contents
24 |
25 | * [About the Project](#about-the-project)
26 | * [Built With](#built-with)
27 | * [Usage](#usage)
28 | * [Getting Started](#getting-started)
29 | * [Prerequisites](#prerequisites)
30 | * [Installation](#installation)
31 | * [Contributing](#contributing)
32 | * [Contact](#contact)
33 | * [Authors](#authors)
34 | * [License](#license)
35 |
36 |
37 |
38 |
39 | ## About The Project
40 |
41 | Osiris is an all-in-one UI Component Library + Generator + Page Builder for developers and designers. Create and store custom, reusable components in React or Vue. Then, dynamically inject the components and manipulate their hierarchy. Finally, download the code for further development.
42 |
43 | ### Built With
44 | * [Electron](https://www.electronjs.org/)
45 | * [React](https://reactjs.org/)
46 | * [PostgreSQL](https://www.postgresql.org/)
47 | * [Node](https://nodejs.org/en/)
48 | * [Webpack](https://webpack.js.org/)
49 | * [AWS](https://aws.amazon.com/)
50 |
51 |
52 | ## Usage
53 |
54 | _______
55 |
56 |
57 | **UI Generator and Library Features**: Create custom components in React or Vue. Store your custom components securely in our UI Library powered by AWS S3
58 |
59 | 
60 |
61 | _______
62 |
63 |
64 | **Build Page: Style and Add to Build**: Easily build a React or Vue page by controlling the hierarchy of your custom components stored in your library. Customize your components by adding CSS and text
65 |
66 | 
67 |
68 | ________
69 |
70 |
71 | **Build Page: Hierarchy & Download Code to Vue or React**: Edit the hierarchy with simple arrow buttons. Choose to build your React page with/without State or Hooks. You can also build a Vue page with or without State. Lastly, download your custom page directly to your computer!
72 |
73 | 
74 |
75 | _______
76 |
77 |
78 |
79 | ## Getting Started
80 |
81 | To get a local copy up and running follow these steps.
82 |
83 | ### Prerequisite Accounts
84 |
85 | * ElephantSQL:
86 | https://www.elephantsql.com/
87 |
88 | * AWS S3 Bucket with Amplify:
89 | https://docs.amplify.aws/lib/storage/getting-started/q/platform/js
90 |
91 | ### Installation
92 |
93 | 1. Clone the repo
94 | ```sh
95 | git clone https://github.com/oslabs-beta/Osiris.git
96 | ```
97 | 2. Install NPM packages
98 | ```sh
99 | npm install
100 | ```
101 | ### Connect Osiris Electron App to SQL Database with ElephantSQL
102 |
103 | 1. SQL Script
104 | ```sh
105 | CREATE TABLE individual_ui (id SERIAL PRIMARY KEY, organization_id VARCHAR, image VARCHAR, tags VARCHAR, react_code VARCHAR, file_name VARCHAR, type VARCHAR, description VARCHAR);
106 | ```
107 |
108 | 2. Add pgkeys.js to /src and include the following:
109 | ```sh
110 | export const PG_URI = '";
93 | let closingHalf = "\n\t\t";
94 | let counter = 0;
95 | // loop through each item
96 | for (let i = 1; i < items.length; i += 1) {
97 | if (items[i].type === "div") {
98 | openingHalf += "\n\t\t\t";
99 | closingHalf = "\n\t\t\t" + closingHalf;
100 | counter++;
101 | } else {
102 | if (counter === 0) {
103 | openingHalf += `\n\t\t\t${items[i].react_code}`;
104 | } else {
105 | openingHalf += `\n\t\t\t\t${items[i].react_code}`;
106 | }
107 | }
108 | }
109 |
110 | return openingHalf + closingHalf;
111 | }
112 |
113 | return (
114 |
115 |
164 | );
165 | };
166 |
167 | export default CodeDisplayContainer;
168 |
--------------------------------------------------------------------------------
/src/containers/Generator.jsx:
--------------------------------------------------------------------------------
1 | import '../assets/css/Generator.css';
2 | import React, { useState } from 'react';
3 | import { withRouter } from 'react-router-dom';
4 | import { Storage } from 'aws-amplify';
5 | import { Context } from '../context/MyProvider.js';
6 | import { Pool } from 'pg';
7 | import { PG_URI } from '../pgKeys';
8 | const pool = new Pool({ connectionString: PG_URI });
9 |
10 | function Generator(props) {
11 | const { dispatch } = React.useContext(Context);
12 | // initial state for generator:
13 | // htmlTags, buttonText, placeholder - compiled into react code
14 | // file only for handleFileChange
15 | const [ userData, setUserData ] = useState({
16 | htmlTags: 'div',
17 | searchTags: '',
18 | reactCode: '',
19 | description: '',
20 | fileName: '',
21 | buttonText: '',
22 | placeholder: '',
23 | image: '',
24 | s3file: '',
25 | fontColor: '',
26 | fontWeight: '',
27 | fontFamily: '',
28 | fontStyle: '',
29 | });
30 |
31 | // uploading files
32 | function handleFileChange(e) {
33 | const file = e.target.files[0];
34 | const reader = new FileReader();
35 | const imgtag = document.getElementById('imageupload');
36 | imgtag.title = file.name;
37 |
38 | reader.onload = function(event) {
39 | imgtag.src = event.target.result;
40 | };
41 |
42 | reader.readAsDataURL(file);
43 | setUserData({
44 | ...userData,
45 | s3file: file
46 | });
47 | }
48 |
49 | // typed input updating state
50 | function handleChange(e) {
51 | setUserData({
52 | ...userData,
53 | [e.target.name]: e.target.value
54 | });
55 | }
56 |
57 | //
58 | async function handleClick(e) {
59 | e.preventDefault();
60 | try {
61 | let image = await Storage.put(`${userData.fileName}.jpg`, userData.s3file);
62 |
63 | const { htmlTags, buttonText, placeholder, searchTags, description, fileName } = userData;
64 |
65 | let reactCode;
66 |
67 | switch (htmlTags) {
68 | case 'button':
69 | reactCode = `<${htmlTags} style={}>`;
70 | break;
71 | case 'input':
72 | reactCode = `<${htmlTags} placeholder=${placeholder}>`;
73 | break;
74 | case 'h1':
75 | reactCode = `<${htmlTags} style={}>`;
76 | break;
77 | case 'h2':
78 | reactCode = `<${htmlTags} style={}>`;
79 | break;
80 | case 'h3':
81 | reactCode = `<${htmlTags} style={}>`;
82 | break;
83 | case 'p':
84 | reactCode = `<${htmlTags} style={}>`;
85 | break;
86 | case 'ul':
87 | reactCode = `<${htmlTags} style={}>`;
88 | break;
89 | case 'li':
90 | reactCode = `<${htmlTags} style={}>`;
91 | break;
92 | case 'img':
93 | reactCode = `<${htmlTags} alt='' src='' style={}/>`;
94 | break;
95 | default:
96 | reactCode = `<${htmlTags}>`;
97 | break;
98 | }
99 |
100 | // send new data to database
101 | pool
102 | .query(
103 | 'INSERT INTO individual_ui(tags, react_code, file_name, type, description) VALUES($1, $2, $3, $4, $5 )',
104 | [ searchTags, reactCode, fileName, htmlTags, description ]
105 | )
106 | .then((data) => {
107 | // update the global state/Context
108 | pool.query('SELECT * FROM individual_ui').then((data) => {
109 | let item = data.rows[data.rows.length - 1]; // just added item
110 | Storage.get(`${item.file_name}.jpg`).then((url) => {
111 | item.url = url;
112 | dispatch({
113 | type: 'generator_add_details',
114 | payload: {
115 | item: item
116 | }
117 | });
118 | props.history.push('/detailPage');
119 | });
120 | });
121 | })
122 | .catch((err) => console.log(err));
123 | } catch (err) {
124 | console.warn(err);
125 | }
126 | }
127 |
128 | return (
129 |
116 |
121 |