Skip to content
Permalink
Browse files

Convert the SetRep component from class-based to hook based state.

  • Loading branch information...
savannidgerinel committed Sep 20, 2019
1 parent 1daa6c8 commit c88a9f29ef469e78c9ae86498faccd0757a7788b
Showing with 63 additions and 108 deletions.
  1. +63 −108 client/src/components/Workout/SetRep.tsx
@@ -1,7 +1,7 @@
import { Option, Result } from "ld-ambiguity"
import _ from "lodash/fp"
import * as luxon from "luxon"
import React from "react"
import React, { useState } from "react"
import Select from "react-select"

import { classnames, ClassNames } from "../../classnames"
@@ -40,87 +40,55 @@ interface EditProps {
cancel: () => void
}

interface EditState {
time: Option<DateTimeTz>
activity: types.SetRepActivity
sets: Array<number>
}

export class SetRepRecordEdit extends React.Component<EditProps, EditState> {
constructor(props: EditProps) {
super(props)
this.state = {
time: props.uuid.isSome()
? Option.Some(props.record.date)
: Option.None(),
activity: props.record.activity,
sets: props.record.sets,
}
}

onSave = () => {
this.props
.save(
this.props.uuid,
new types.SetRepRecord(
this.props.record.date,
this.state.activity,
this.state.sets,
),
)
.then(result => (result.isOk() ? this.props.cancel() : null))
}

onChangeTime(inp: Option<DateTimeTz>) {
this.setState({ time: inp })
}

onChangeActivity(inp: { label: string; value: types.SetRepActivity }) {
this.setState({ activity: inp.value })
export const SetRepRecordEdit: React.SFC<EditProps> = ({
prefs,
uuid,
record,
save,
cancel,
}) => {
const [activity, setActivity] = useState(record.activity)
const [sets, setSets] = useState(record.sets)

const onSave = () => {
save(uuid, new types.SetRepRecord(record.date, activity, sets)).then(
result => (result.isOk() ? cancel() : null),
)
}

render = () => {
const { prefs, record } = this.props

return (
<div className="setrep-edit l-3-column">
<div className="activity">
<Select
style={{ width: "100%" }}
name="activity-selection"
defaultValue={{
label: this.state.activity.repr.tr(prefs.language),
value: this.state.activity,
}}
options={_.map((activity: types.SetRepActivity): {
value: types.SetRepActivity
label: string
} => ({
value: activity,
label: activity.repr.tr(prefs.language),
}))([types.Pushups, types.Situps])}
onChange={(evt: any) => this.onChangeActivity(evt)}
/>
</div>
<div className="sets">
<SetsEdit
sets={record.sets}
onChange={inp => {
console.log(`onChange ${inp}`)
this.setState({ sets: inp.unwrap() })
}}
prefs={prefs}
/>
</div>
<div>
<button onClick={this.onSave}>{i18n.Save.tr(prefs.language)}</button>
<button onClick={this.props.cancel}>
{i18n.Cancel.tr(prefs.language)}
</button>
</div>
return (
<div className="setrep-edit l-3-column">
<div className="activity">
<Select
style={{ width: "100%" }}
name="activity-selection"
defaultValue={{
label: activity.repr.tr(prefs.language),
value: activity,
}}
options={_.map((activity: types.SetRepActivity): {
value: types.SetRepActivity
label: string
} => ({
value: activity,
label: activity.repr.tr(prefs.language),
}))([types.Pushups, types.Situps])}
onChange={(inp: any) => setActivity(inp.value)}
/>
</div>
)
}
<div className="sets">
<SetsEdit
sets={record.sets}
onChange={inp => setSets(inp.unwrap())}
prefs={prefs}
/>
</div>
<div>
<button onClick={onSave}>{i18n.Save.tr(prefs.language)}</button>
<button onClick={cancel}>{i18n.Cancel.tr(prefs.language)}</button>
</div>
</div>
)
}

interface Props {
@@ -132,35 +100,22 @@ interface Props {
) => Promise<Result<null, string>>
}

interface State {
editing: boolean
}

class SetRepRecordComponent extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { editing: false }
}

cancel = () => this.setState({ editing: false })

render = () => {
const { prefs, record, save } = this.props
const { editing } = this.state
return editing ? (
<SetRepRecordEdit
prefs={prefs}
uuid={Option.Some(record.id)}
record={record.data}
save={save}
cancel={this.cancel}
/>
) : (
<div onClick={() => this.setState({ editing: true })}>
<SetRepRecordView prefs={prefs} record={record} />
</div>
)
}
const SetRepRecordComponent: React.SFC<Props> = ({ prefs, record, save }) => {
const [editing, setEditing] = useState(false)

return editing ? (
<SetRepRecordEdit
prefs={prefs}
uuid={Option.Some(record.id)}
record={record.data}
save={save}
cancel={() => setEditing(false)}
/>
) : (
<div onClick={() => setEditing(true)}>
<SetRepRecordView prefs={prefs} record={record} />
</div>
)
}

export default SetRepRecordComponent

0 comments on commit c88a9f2

Please sign in to comment.
You can’t perform that action at this time.