Skip to content
This repository has been archived by the owner on Jan 24, 2019. It is now read-only.

Discover View #1622

Merged
merged 15 commits into from
May 5, 2015
Merged

Discover View #1622

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7cc277a
WIP
thisandagain Apr 29, 2015
1d884df
Merge branch 'v1' into 1508
thisandagain Apr 30, 2015
c30f6c3
Merge branch 'v1' into 1508
thisandagain May 1, 2015
8526353
Initial mockup of discover view. Re GH-1508
thisandagain May 1, 2015
e4c8ef3
WIP
thisandagain May 1, 2015
b3b8817
Merge branch 'v1' into 1508
thisandagain May 4, 2015
0f1f26c
Merge branch 'v1' into 1508
thisandagain May 4, 2015
1dba02e
Style fixes and add ImageLoader react component
thisandagain May 4, 2015
26b3559
Use calc
thisandagain May 4, 2015
137bbd3
Remove unused items from state
thisandagain May 4, 2015
f4f0ad0
Moar calc
thisandagain May 4, 2015
6c80c68
Use integer for version in mock dataset
thisandagain May 4, 2015
d410b48
Resolve merge conflicts
thisandagain May 5, 2015
5e433c9
Update readme
thisandagain May 5, 2015
afca9bb
s/ImageLoader/<ImageLoader>
thisandagain May 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 25 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@ To run and develop in a web browser without testing on device, simply run
npm start
```

## Contact Us
IRC: `#webmaker` on `irc.mozilla.org`

Forum: [https://groups.google.com/forum/#!forum/mozilla.webmaker](https://groups.google.com/forum/#!forum/mozilla.webmaker)

---

## Adding New Pages or Components

There are a few standards to bear in mind when adding new pages or components to the project.
Expand All @@ -58,8 +65,23 @@ Component markup should contain a top-level class name that corresponds to its f

File names are hyphenated lowercase. For example: `section-2.jsx`.

## Contact Us
IRC: `#webmaker` on `irc.mozilla.org`
## Network Assets

Forum: [https://groups.google.com/forum/#!forum/mozilla.webmaker](https://groups.google.com/forum/#!forum/mozilla.webmaker)
Webmaker for Android attempts to use network resources as sparingly as possible. In addition, it is important to cover failure and loading states gracefully at all times. To this end, we have a few React components and libraries included in the project to help make this easier:

#### API Requests
The `./lib/api.js` module is the primary way in which you should interact with api.webmaker.org. This module uses Android's `SharedPreferences` API to cache API requests by default thus reducing network requests. If you need to bypass the cache, you can send `useCache: false` to the module:

```js
var api = require('./lib/api.js');

api({
uri: '/discover',
useCache: false
}, function (err, results) {
// do stuff!
});
```

#### Loading Images
Any time you are loading images over the network, we recommend that you use the `ImageLoader` react component. This gives you access to important events like loading and error states as well as a hook for providing a loading animation. Full documentation can be found here: https://github.com/hzdg/react-imageloader
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small nit: let's use <ImageLoader> to make it clear that it's not a library or the like, but an actual component

6 changes: 2 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,19 @@
"main": "index.js",
"scripts": {
"start": "npm run build && npm-run-all --parallel webserver watch:**",

"build": "npm-run-all build:**",
"build:clean": "rimraf app/src/main/assets/www/ && mkdirp app/src/main/assets/www/",
"build:static": "mkdirp www_src/static/ && mkdirp app/src/main/assets/ && ncp www_src/static/ app/src/main/assets/www/",
"build:js": "webpack",
"build:css": "npm run watch:css -- --no-watch",
"build:html": "node ./npm_tasks/bin/build-html",

"test": "npm-run-all test:**",
"test:mocha": "mocha -R spec npm_tasks/tests",
"test:lint": "jsxhint --harmony --config .jshintrc \"www_src/**/*.{js,jsx}\"",

"watch:static": "watch \"npm run build:static\" www_src/static",
"watch:js": "npm run build:js -- -d --watch",
"watch:css": "autoless --source-map --autoprefix \"last 2 versions, android >= 4.2\" www_src app/src/main/assets/www",
"watch:html": "watch \"npm run build:html\" www_src/html",

"webserver": "live-server ./app/src/main/assets/www --port=4242"
},
"repository": {
Expand Down Expand Up @@ -64,6 +60,8 @@
"lodash.defaults": "3.1.1",
"react": "0.13.1",
"react-hammerjs": "0.2.2",
"react-imageloader": "1.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's also add a short section in the README.md here along the lines of "dependencies for common tasks" so people don't reinvent the wheel all the time, and have a quick place to find out what we use for which purpose

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree. 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added.

"react-loadermixin": "1.0.4",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not used?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ImageLoader is used in discover.jsx. LoaderMixin is a dependency of the image loader.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a dep. bug in image-loader. Filed hzdg/react-imageloader#13

"xhr": "2.0.1"
}
}
60 changes: 30 additions & 30 deletions www_src/pages/discover/discover.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
var React = require('react');
var render = require('../../lib/render.jsx');
var Binding = require('../../lib/binding.jsx');
var React = require('react/addons');
var ImageLoader = require('react-imageloader');

var api = require('../../lib/api.js');
var ProjectSnapshot = require('../../components/project-snapshot/project-snapshot.jsx');
var render = require('../../lib/render.jsx');
var Link = require('../../components/link/link.jsx');

var Discover = React.createClass({
mixins: [Binding],
componentWillMount: function () {
api({
uri: '/c0645e6953e9949f8e5c/raw/'
}, function (err, body) {
console.dir(err);
console.dir(body);
});
mixins: [],
getInitialState: function () {
this.list = require('./mock.json');

return {
list: this.list
};
},
render: function () {
return (
<div id="discover">
<ProjectSnapshot
url="/map/123"
href="/pages/map"
thumbnail="../../img/toucan.svg"
title="The Birds of the Amazon"/>
var cards = this.state.list.map( project => {
return (
<Link url={"/map/" + project.id} href="/pages/map" key={project.id} className="card">
<div className="thumbnail">
<ImageLoader src={project.thumbnail[480]}>
// @todo Show image error icon / graphic
</ImageLoader>
</div>

<ProjectSnapshot
url="/map/123"
href="/pages/map"
thumbnail="../../img/toucan.svg"
title="More birds"/>
<div className="meta">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might be worth turning this into a <Metadata> component. Right now we're using title and author only, but we probably want to extend that later on with additional things like date posted, likes, etc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might be worth creating a <Metadata> component here. Right now it's only author/title, but I can see date posted, views, etc. also ending up in there.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

filed #1656 as followup

<div className="title">{project.title}</div>
<div className="author">{project.author.username}</div>
</div>
</Link>
);
});

<ProjectSnapshot
url="/map/123"
href="/pages/map"
thumbnail="../../img/toucan.svg"
title="Cool stuff, yo"/>
return (
<div id="discover">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ideally, we don't rely on id anymore, since React components don't come with a uniqueness guarantee. Can we say something like className="discover page" instead, and then tap into that as CSS namespace?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup! Sounds good. I was following the pattern we were using in a few other views but totally agree.

{cards}
</div>
);
}
});

// Render!
render(Discover);
45 changes: 44 additions & 1 deletion www_src/pages/discover/discover.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,46 @@
#discover {
padding: 20px;
display: block;
position: relative;

width: 100%;
height: 100%;
padding: 20px 0;

.card {
display: block;
position: relative;

width: calc(100% - 10px);
margin: 0 auto 20px auto;

color: @slate;
text-decoration: none;
background-color: white;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);

.thumbnail {
padding: 6px 0 0 0;

img {
display: block;
position: relative;

width: calc(100% - 4px);
margin: 0 auto;
background: #efefef;
}
}

.meta {
width: calc(100% - 2px);
margin: 6px auto;
padding: 2px 0 10px 10px;
font-size: 1.2rem;
}

.author {
color: @blue;
font-size: 1rem;
}
}
}
126 changes: 126 additions & 0 deletions www_src/pages/discover/mock.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
[
{
"id": 1,
"version": 1,
"title": "The Birds of the Amazon",
"featured": true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No description? Might be valuable information to have for the discover view.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not included in design spec.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:pitchforks:

"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"thumbnail": {
"480": "https://webmaker-app-mock.s3.amazonaws.com/tucker_000.jpg"
},
"author": {
"id": 1234,
"username": "billmurray",
"locale": {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this feels like being specific in a way that is going to break the moment a country stops existing. Which has kind of happend lots of times in the last 20 years. Just keeping the locale a single code string feels much safer.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not being used at the moment, but included to keep consistency with @cadecairos API design. I'll keep as to maintain some continuity but we have lots of opportunities to modify this before launch.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, this feels like the API design might be too specific, in that case. Worth looking at there.

"language": "en",
"country": "US"
},
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"permissions": {
"staff": false,
"moderator": false
}
}
},
{
"id": 2,
"version": 1,
"title": "Something else",
"featured": true,
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"thumbnail": {
"480": "https://webmaker-app-mock.s3.amazonaws.com/tucker_000.jpg"
},
"author": {
"id": 1234,
"username": "billmurray",
"locale": {
"language": "en",
"country": "US"
},
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"permissions": {
"staff": false,
"moderator": false
}
}
},
{
"id": 3,
"version": 1,
"title": "Something else",
"featured": true,
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"thumbnail": {
"480": "https://webmaker-app-mock.s3.amazonaws.com/tucker_000.jpg"
},
"author": {
"id": 1234,
"username": "billmurray",
"locale": {
"language": "en",
"country": "US"
},
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"permissions": {
"staff": false,
"moderator": false
}
}
},
{
"id": 4,
"version": 1,
"title": "Something else",
"featured": true,
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"thumbnail": {
"480": "https://webmaker-app-mock.s3.amazonaws.com/tucker_000.jpg"
},
"author": {
"id": 1234,
"username": "billmurray",
"locale": {
"language": "en",
"country": "US"
},
"history": {
"created_at": "2015-04-20T16:11:13.961Z",
"updated_at": "2015-04-20T16:11:13.961Z",
"deleted_at": null
},
"permissions": {
"staff": false,
"moderator": false
}
}
}
]