def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ListItem(props):
return el(
'li',
None,
el(
'button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item']),
'className': 'deleteBtn'
}, "Delete"),
el(
'button', {
'type': 'button',
'onClick': lambda: handleEdit(props['item']),
'className': 'editBtn'
}, "Edit"),
props['item'],
)
def ListItems():
return [
el(ListItem, {
'key': item,
'item': item
}) for item in listItems
]
return el(
'form',
{'onSubmit': handleSubmit},
el(
'label', {
'htmlFor': 'editBox',
'className': 'adding' if len(editItem) == 0 else 'editing'
}, "Add Item: " if len(editItem) == 0 else "Edit Item: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newItem
}),
el('input', {
'type': 'submit',
'className': 'submitBtn'
}),
el('ol', None, el(ListItems, None)),
)
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ItemVu(props):
return el(ListItem, {'dense': True},
el(Button,
{'variant': 'contained',
'color': 'secondary',
'size': 'small',
'style': {'marginRight': '0.5rem'},
'onClick': lambda: handleDelete(props['item']),
},
"Delete"
),
el(Button,
{'variant': 'contained',
'color': 'primary',
'size': 'small',
'style': {'marginRight': '0.5rem'},
'onClick': lambda: handleEdit(props['item']),
},
"Edit"
),
el(Typography, {'variant': 'body1'}, props['item'])
)
def ListItemsVu():
return [el(ItemVu, {'key': item, 'item': item}) for item in listItems]
if len(editItem) == 0:
editColor = 'secondary'
editLabel = "Add Item:"
else:
editColor = 'primary'
editLabel = "Edit Item:"
return el(Box, None,
el('form', {'onSubmit': handleSubmit},
el(InputLabel,
{'htmlFor': 'editBox', 'color': editColor},
editLabel
),
el(Input, {'id': 'editBox',
'onChange': handleChange,
'value': newItem
}
),
el(Button, {'type': 'submit',
'variant': 'contained',
'style': {'marginLeft': '0.5rem'}
}, "Submit"),
),
el(List, None,
el(ListItemsVu, None)
),
)
def App():
users, setUsers = useState([])
userID, setUserID = useState("")
firstName, setFirstName = useState("")
lastName, setLastName = useState("")
username, setUsername = useState("")
def handleChange(event):
target = event['target']
setUserID(target['value'])
setFirstName("")
setLastName("")
setUsername("")
def getUser():
def _getUser(data):
user_info = data if data else {}
if len(user_info) > 0:
setFirstName(user_info['FirstName'])
setLastName(user_info['LastName'])
setUsername(user_info['Username'])
else:
setFirstName("")
setLastName("")
setUsername("")
if len(userID) > 0:
fetch(f"/api/user/{userID}", _getUser)
def getUsers():
def _getUsers(data):
user_list = data if data else []
user_list.sort(key=lambda user: user[1])
setUsers(user_list)
setUserID("")
fetch("/api/users", _getUsers)
useEffect(getUser, [userID])
useEffect(getUsers, [])
return el(Box, {'key': 'App', 'style': {'width': '200px'}},
el(Box, {'alignItems': 'center'},
el(StyledTextField, {'label': "Select User",
'value': userID,
'onChange': handleChange,
'select': True,
'SelectProps': {'native': True},
'autoFocus': True,
},
el('option', {'key': '', 'value': ''}), # Blank row
el(UserVu, {'users': users}),
),
),
el(StyledTextField, {'label': 'First Name',
'value': firstName,
'disabled': True,
}
),
el(StyledTextField, {'label': 'Last Name',
'value': lastName,
'disabled': True,
}
),
el(StyledTextField, {'label': 'Username',
'value': username,
'disabled': True,
}
),
),
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ItemVu(props):
item = props['item']
current_theme = useTheme()
specialColor = current_theme['palette']['special']['main']
button_style = {'margin': '0 0.5rem 0 0'}
return el(ListItem, {'dense': True},
el(Button,
{'color': 'secondary',
'style': button_style,
'onClick': lambda: handleDelete(item)
},
el('span', {'className': 'material-icons'}, 'delete'),
"Delete"
),
el(Button,
{'color': 'primary',
'style': button_style,
'onClick': lambda: handleEdit(item)
},
el('span', {'className': 'material-icons'}, 'edit'),
"Edit"
),
el(Typography, {'style': {'color': specialColor}}, item)
)
def ListItemsVu():
return [el(ItemVu, {'key': item, 'item': item}) for item in listItems]
if len(editItem) == 0:
editColor = 'secondary'
editLabel = "Add Item:"
else:
editColor = 'primary'
editLabel = "Edit Item:"
return el(ThemeProvider, {'theme': theme},
el(Container, {'maxWidth': 'sm'},
el(AppBar, {'position': 'static',
'style': {'marginBottom': '0.5rem'}
},
el(Box, {'width': '100%', 'marginLeft': '0.5rem'},
el(Typography, {'variant': 'h6'}, "React to Python")
)
),
el(Paper, {'elevation': 2},
el('form', {'onSubmit': handleSubmit,
'style': {'marginLeft': '1rem'}
},
el(TextField, {'InputLabelProps': {'color': editColor},
'label': editLabel,
'value': newItem,
'onChange': handleChange,
'autoFocus': True
}
),
el(Button, {'type': 'submit',
'size': 'medium'
}, "Submit"),
),
el(List, None,
el(ListItemsVu, None)
),
)
)
)
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ListItem(props):
return el(
'li',
None,
el(
'button', {
'type': 'button',
'onClick': lambda: handleDelete(props['item']),
'style': {
'color': 'darkred',
'marginRight': '5px',
'width': '60px'
}
}, "Delete"),
el(
'button', {
'type': 'button',
'onClick': lambda: handleEdit(props['item']),
'style': {
'color': 'blue',
'marginRight': '5px',
'width': '60px'
}
}, "Edit"),
props['item'],
)
def ListItems():
return [
el(ListItem, {
'key': item,
'item': item
}) for item in listItems
]
if len(editItem) == 0:
editStyle = {'color': 'darkgreen'}
else:
editStyle = {'color': 'blue'}
return el(
'form',
{
'onSubmit': handleSubmit,
'style': {
'fontFamily': 'Arial, sans-serif'
}
},
el('label', {
'htmlFor': 'editBox',
'style': editStyle
}, "Add Item: " if len(editItem) == 0 else "Edit Item: "),
el('input', {
'id': 'editBox',
'onChange': handleChange,
'value': newItem
}),
el(
'input', {
'type': 'submit',
'style': {
'margin': '10px',
'color': 'darkgreen',
'width': '60px'
}
}),
el('ol', None, el(ListItems, None)),
)
def App():
newItem, setNewItem = useState("")
editItem, setEditItem = useState("")
listItems, setListItems = useState([])
def handleSubmit(event):
event.preventDefault()
new_list = list(listItems) # Make a copy
if len(editItem) > 0: # In edit mode
new_list[new_list.index(editItem)] = newItem
else: # In add mode
new_list.append(newItem) # Add the new item
setListItems(new_list) # Update our state
setNewItem("") # Clear the new item value
setEditItem("") # Clear the edit item value
def handleChange(event):
target = event['target']
setNewItem(target['value'])
def handleDelete(item):
new_list = list(listItems) # Make a copy
new_list.remove(item) # Remove the specified item
setListItems(new_list) # Update our state
def handleEdit(item):
setNewItem(item) # Set the new item value
setEditItem(item) # Set the edit item value
def ListItem(props):
return el('li', {'className': 'list-group-item p-1'},
el('button',
{'onClick': lambda: handleDelete(props['item']),
'className': 'btn btn-danger btn-sm mr-2'
},
"Delete"
),
el('button',
{'onClick': lambda: handleEdit(props['item']),
'className': 'btn btn-primary btn-sm mr-2'
},
"Edit"
),
props['item'],
)
def ListItems():
return [el(ListItem, {'key': item, 'item': item}) for item in listItems]
if len(editItem) == 0:
editClass = 'text-success'
else:
editClass = 'text-primary'
return el('div', {'className': 'container m-1'},
el('form', {'onSubmit': handleSubmit,
'className': 'form-inline col-10 my-2'
},
el('label',
{'htmlFor': 'editBox', 'className': editClass},
"Add Item: " if len(editItem) == 0 else "Edit Item: "
),
el('input', {'id': 'editBox',
'onChange': handleChange,
'value': newItem,
'className': 'form-control ml-2'
}
),
el('input', {'type': 'submit',
'className': 'btn btn-success ml-2'
}
),
),
el('ul', {'className': 'list-group col-10 ml-2'},
el(ListItems, None)
),
)