{ "name": ".", "namenopath": ".", "files": [{ "content": "{\n \"name\": \"myFirstApp\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"dependencies\": {\n \"@capacitor/core\": \"3.1.2\",\n \"@ionic/react\": \"^5.5.0\",\n \"@ionic/react-router\": \"^5.5.0\",\n \"@testing-library/jest-dom\": \"^5.11.9\",\n \"@testing-library/react\": \"^11.2.5\",\n \"@testing-library/user-event\": \"^12.6.3\",\n \"@types/jest\": \"^26.0.20\",\n \"@types/node\": \"^12.19.15\",\n \"@types/react\": \"^16.14.3\",\n \"@types/react-dom\": \"^16.9.10\",\n \"@types/react-router\": \"^5.1.11\",\n \"@types/react-router-dom\": \"^5.1.7\",\n \"ionicons\": \"^5.4.0\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-router\": \"^5.2.0\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-scripts\": \"4.0.2\",\n \"typescript\": \"^4.1.3\",\n \"web-vitals\": \"^0.2.4\",\n \"workbox-background-sync\": \"^5.1.4\",\n \"workbox-broadcast-update\": \"^5.1.4\",\n \"workbox-cacheable-response\": \"^5.1.4\",\n \"workbox-core\": \"^5.1.4\",\n \"workbox-expiration\": \"^5.1.4\",\n \"workbox-google-analytics\": \"^5.1.4\",\n \"workbox-navigation-preload\": \"^5.1.4\",\n \"workbox-precaching\": \"^5.1.4\",\n \"workbox-range-requests\": \"^5.1.4\",\n \"workbox-routing\": \"^5.1.4\",\n \"workbox-strategies\": \"^5.1.4\",\n \"workbox-streams\": \"^5.1.4\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@capacitor/cli\": \"3.1.2\"\n },\n \"description\": \"An Ionic project\"\n}\n", "name": "package.json" }], "dirs": [{ "name": "./src", "namenopath": "src", "files": [{ "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.unregister();\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n", "name": "index.tsx" }, { "content": "import { Redirect, Route } from 'react-router-dom';\nimport { IonApp, IonRouterOutlet } from '@ionic/react';\nimport { IonReactRouter } from '@ionic/react-router';\n\nimport TodoPage from './pages/TodoPage';\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/react/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/react/css/normalize.css';\nimport '@ionic/react/css/structure.css';\nimport '@ionic/react/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/react/css/padding.css';\nimport '@ionic/react/css/float-elements.css';\nimport '@ionic/react/css/text-alignment.css';\nimport '@ionic/react/css/text-transformation.css';\nimport '@ionic/react/css/flex-utils.css';\nimport '@ionic/react/css/display.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\nconst App: React.FC = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default App;\n", "name": "App.tsx" }], "dirs": [{ "name": "./src/pages", "namenopath": "pages", "files": [], "dirs": [{ "name": "./src/pages/TodoPage", "namenopath": "TodoPage", "files": [{ "content": "import { useState, useEffect } from 'react';\nimport { IonPage, IonTitle, IonContent, IonList, IonItemDivider, IonToolbar, IonInput, IonGrid, IonRow, IonCol, IonItem, IonText, IonButton, IonFab, IonFabButton, IonModal } from '@ionic/react';\n\nconst Todo = () => {\n\n const [todoItems, updateTodoItems] = useState([{ title: 'Get groceries'}, {title: 'Fill up on gas' }]);\n const [showModal, setShowModal] = useState(false);\n const [newTodo, updateNewTodo] = useState('');\n\n function deleteTodo(index) {\n const todoItemsClone = Object.create(todoItems, []);\n\n todoItemsClone.splice(index,1);\n updateTodoItems(todoItemsClone);\n }\n\nfunction submitTodo() {\n const listOfTodosClone = Object.create(todoItems, []);\n const newTodoItem = {title: newTodo};\n\n listOfTodosClone.push(newTodoItem);\n updateTodoItems(listOfTodosClone);\n updateNewTodo('');\n setShowModal(false);\n}\n \n return (\n \n \n Todo App\n \n \n \n {todoItems.map((todoItem, index) => (\n \n \n \n \n \n \n {todoItem.title}\n \n \n deleteTodo(index)}>Delete\n \n \n \n \n \n \n ))}\n \n \n

This is modal content

\n \n \n updateNewTodo(e.detail.value)}>\n \n \n Add todo\n setShowModal(false)}>Close Modal \n \n setShowModal(true)}>\n \n \n \n );\n};\n\nexport default Todo;", "name": "index.jsx" }], "dirs": [] }] }] }] }