Skip to content

Commit ed8f4f8

Browse files
samuelcolvinsamuelcolvin
committed
animated load lists
1 parent b84dadc commit ed8f4f8

File tree

8 files changed

+59
-14
lines changed

8 files changed

+59
-14
lines changed

‎config-overrides.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ module.exports = function override (config, env) {
5151
config.plugins.splice(2, 0,
5252
new HtmlWebpackPlugin({
5353
inject: true,
54-
template: path.resolve(__dirname, 'public', 'simple.html'),
55-
filename: 'simple.html'
54+
template: path.resolve(__dirname, 'public', 'simple/index.html'),
55+
filename: 'simple/index.html'
5656
})
5757
)
5858
}

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<body>
2727
<main>
2828
<p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
29-
<p><a href="/simple.html">view simple socket panel</a></p>
29+
<p><a href="/simple/">view simple socket panel</a></p>
3030
<p>mode defined by options:</p>
3131
<div id="socket1"></div>
3232
<p>Grid mode:</p>

‎public/simple.html‎ renamed to ‎public/simple/index.html‎

File renamed without changes.

‎src/components/contractors/Contractors.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,12 @@ class Contractors extends Component {
7575
})
7676
const contractors = await this.props.root.requests.get('contractors', args)
7777
this.props.config.event_callback('updated_contractors', contractors)
78-
this.setState({
78+
this.setState({contractors: []})
79+
setTimeout(() => this.setState({
7980
contractors,
81+
got_contractors: true,
8082
more_pages: contractors.length === this.props.config.pagination,
81-
got_contractors: true
82-
})
83+
}), 0)
8384
}
8485

8586
get_contractor_details (con) {
@@ -102,14 +103,19 @@ class Contractors extends Component {
102103
const DisplayComponent = this.props.config.mode === 'grid' ? Grid : List
103104
return (
104105
<div className="tcs-app tcs-contractors">
105-
<If v={this.props.config.subject_filter}>
106+
<If v={this.state.got_contractors && this.props.config.subject_filter}>
106107
<SelectSubjects get_text={this.props.root.get_text}
107108
contractors={this.state.contractors}
108109
subjects={this.state.subjects}
109110
selected_subject={this.state.selected_subject}
110111
subject_change={this.subject_change}/>
111112
</If>
112113
<DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
114+
<If v={this.state.got_contractors && this.state.contractors.length === 0}>
115+
<div className="tcs-no-contractors">
116+
{this.props.root.get_text('no_tutors_found')}
117+
</div>
118+
</If>
113119

114120
<If v={this.state.page > 1 || this.state.more_pages}>
115121
<div className="tcs-pagination">

‎src/components/contractors/List.js‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,45 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import {Link} from 'react-router-dom'
33
import {Location, Markdown} from '../shared/Tools'
44
import Stars from './Stars'
55

6+
class AnimateLink extends Component {
7+
constructor (props) {
8+
super(props)
9+
this.state = {show: false}
10+
}
11+
12+
async componentDidMount () {
13+
setTimeout(() => this.setState({show: true}), this.props.delay || 0)
14+
}
15+
16+
render () {
17+
const extra_classes = this.props.className ? this.props.className + ' ' : ''
18+
return (
19+
<Link to={this.props.to} className={extra_classes + 'tcs-animate-entry' + (this.state.show ? ' show' : '')}>
20+
{this.props.children}
21+
</Link>
22+
)
23+
}
24+
}
25+
626
export const Grid = ({contractors, root}) => (
727
<div className="tcs-flex">
828
{contractors.map((contractor, i) => (
9-
<div key={i} className="tcs-col">
10-
<Link to={root.url(contractor.link)} className="tcs-item tcs-box">
29+
<AnimateLink key={i} delay={i * 50} to={root.url(contractor.link)} className="tcs-col">
30+
<div className="tcs-item tcs-box">
1131
<img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
1232
<h3 className="tcs-name">{contractor.name}</h3>
13-
</Link>
14-
</div>
33+
</div>
34+
</AnimateLink>
1535
))}
1636
</div>
1737
)
1838

1939
export const List = ({contractors, root}) => (
2040
<div className="tcs-list">
2141
{contractors.map((contractor, i) => (
22-
<Link key={i} to={root.url(contractor.link)} className="tcs-item">
42+
<AnimateLink key={i} delay={i * 80} to={root.url(contractor.link)} className="tcs-item">
2343
<div className="tcs-image-col tcs-box">
2444
<img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
2545
<button className="tcs-button">
@@ -46,7 +66,7 @@ export const List = ({contractors, root}) => (
4666
<span>{contractor.town}</span>
4767
</div>
4868
</div>
49-
</Link>
69+
</AnimateLink>
5070
))}
5171
</div>
5272
)

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const STRINGS = {
4141
review_hours: '({hours} hours)',
4242
previous: 'Previous',
4343
next: 'Next',
44+
no_tutors_found: 'No more tutors found',
4445
}
4546

4647
const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']

‎src/styles/contractors.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,21 @@
4545
}
4646
}
4747

48+
.tcs-animate-entry {
49+
opacity: 0;
50+
transition: all .5s ease;
51+
&.show {
52+
opacity: 1;
53+
}
54+
}
55+
56+
.tcs-no-contractors {
57+
display: flex;
58+
justify-content: center;
59+
color: #aaa;
60+
padding: 0 0 8px;
61+
}
62+
4863
$pagination-radius: 4px;
4964
.tcs-pagination {
5065
display: flex;

‎src/styles/list.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ $box-height: 186px;
1010
display: grid;
1111
grid-template-columns: $dft-image-size auto 180px;
1212
//border: 1px dashed black;
13+
&:last-child {
14+
border-bottom: none;
15+
}
1316
}
1417
.tcs-button {
1518
width: 100%;

0 commit comments

Comments
 (0)