tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use object IDs instead of array indices as keys

Browse Source
This commit is contained in:
Tanner Collin 2020-01-18 01:36:53 +00:00
parent cb8ac3cf63
commit 08bd52704b
9 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webclient/src/Admin.js
View File

@ -185,8 +185,8 @@ export function AdminMemberCards(props) {
<Header size='small'>Current Cards</Header>
{cards.length ?
cards.map((x, i) =>
<AdminCardDetail key={i} card={x} {...props} />
cards.map(x =>
<AdminCardDetail key={x.id} card={x} {...props} />
)
:
<p>None</p>

4
webclient/src/Cards.js
View File

@ -28,8 +28,8 @@ export function Cards(props) {
</Table.Header>
<Table.Body>
{user.cards.map((x, i) =>
<Table.Row key={i}>
{user.cards.map(x =>
<Table.Row key={x.id}>
<Table.Cell>{x.card_number}</Table.Cell>
<Table.Cell>{x.notes}</Table.Cell>
<Table.Cell>{x.last_seen_at}</Table.Cell>

6
webclient/src/Classes.js
View File

@ -25,8 +25,8 @@ function ClassTable(props) {
<Table.Body>
{classes.length ?
classes.map((x, i) =>
<Table.Row key={i}>
classes.map(x =>
<Table.Row key={x.id}>
<Table.Cell>{x.course_name}</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.id}>
@ -182,7 +182,7 @@ export function ClassDetail(props) {
{(isAdmin(user) || clazz.instructor === user.id) &&
<Segment padded>
<InstructorClassAttendance clazz={clazz} {...props} />
<InstructorClassAttendance clazz={clazz} refreshClass={refreshClass} {...props} />
</Segment>
}

8
webclient/src/Courses.js
View File

@ -40,8 +40,8 @@ export function Courses(props) {
<Table.Body>
{courses.length ?
courses.map((x, i) =>
<Table.Row key={i}>
courses.map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/courses/'+x.id}>{x.name}</Link>
</Table.Cell>
@ -115,8 +115,8 @@ export function CourseDetail(props) {
<Table.Body>
{course.sessions.length ?
course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).slice(0,10).map((x, i) =>
<Table.Row key={i}>
course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).slice(0,10).map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/classes/'+x.id}>
{moment.utc(x.datetime).local().format('ll')}

4
webclient/src/Home.js
View File

@ -81,8 +81,8 @@ function MemberInfo(props) {
<BasicTable>
<Table.Body>
{lastTrans.length ?
lastTrans.map((x, i) =>
<Table.Row key={i}>
lastTrans.map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
</Table.Cell>

7
webclient/src/InstructorClasses.js
View File

@ -8,7 +8,7 @@ import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Ico
import { BasicTable, staticUrl, requester } from './utils.js';
function AttendanceRow(props) {
const { student, token } = props;
const { student, token, refreshClass } = props;
const [training, setTraining] = useState(student);
const [error, setError] = useState(false);
@ -17,6 +17,7 @@ function AttendanceRow(props) {
requester('/training/'+training.id+'/', 'PATCH', token, data)
.then(res => {
setTraining(res);
refreshClass();
setError(false);
})
.catch(err => {
@ -74,8 +75,8 @@ export function InstructorClassAttendance(props) {
<Header size='small'>Mark Attendance</Header>
{clazz.students.length ?
clazz.students.map((x, i) =>
<p><AttendanceRow key={i} student={x} {...props} /></p>
clazz.students.map(x =>
<p><AttendanceRow key={x.id} student={x} {...props} /></p>
)
:
<p>No students yet.</p>

4
webclient/src/Members.js
View File

@ -50,8 +50,8 @@ export function Members(props) {
{response ?
<Item.Group unstackable divided>
{response.results.length ?
response.results.map((x, i) =>
<Item key={i} as={Link} to={'/members/'+x.member.id}>
response.results.map(x =>
<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
<Item.Content verticalAlign='top'>
<Item.Header>{x.member.preferred_name} {x.member.last_name}</Item.Header>

4
webclient/src/Training.js
View File

@ -25,8 +25,8 @@ export function Training(props) {
</Table.Header>
<Table.Body>
{user.training.map((x, i) =>
<Table.Row key={i}>
{user.training.map(x =>
<Table.Row key={x.id}>
<Table.Cell>{x.session.course_name}</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>

4
webclient/src/Transactions.js
View File

@ -24,8 +24,8 @@ export function Transactions(props) {
<Table.Body>
{user.transactions.length ?
user.transactions.slice().reverse().map((x, i) =>
<Table.Row key={i}>
user.transactions.slice().reverse().map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
</Table.Cell>