mirror of
https://github.com/aelve/guide.git
synced 2024-12-23 04:42:24 +03:00
[GD-11] add a component for displaying categories data
This commit is contained in:
parent
26cf0f4cfd
commit
52fc6624ad
@ -1,19 +1,8 @@
|
|||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { CategoryChild, Home } from './components/index';
|
import { CategoryChild, Home, NoMatch } from './components/index';
|
||||||
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
|
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||||
|
|
||||||
class NoMatch extends Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>Not Found</h1>
|
|
||||||
<p><Link to="/">Go home</Link></p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
5
front/src/components/Category.js
Normal file
5
front/src/components/Category.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
class Category extends Component {
|
||||||
|
|
||||||
|
}
|
@ -1,10 +1,28 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import * as T from '../types';
|
||||||
|
import { fetchData } from '../utils/index';
|
||||||
|
|
||||||
|
function extractUid(link : string) {
|
||||||
|
const lastOccur = link.lastIndexOf('-');
|
||||||
|
return link.slice(lastOccur + 1);
|
||||||
|
}
|
||||||
|
|
||||||
class CategoryChild extends Component {
|
class CategoryChild extends Component {
|
||||||
|
state: {
|
||||||
|
cat: T.Cat;
|
||||||
|
};
|
||||||
|
componentWillMount() {
|
||||||
|
this.setState({ cat: [] });
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
var uid = extractUid(this.props.match.params.uid);
|
||||||
|
|
||||||
|
fetchData('http://localhost:8080/haskell/api/category/'+uid)
|
||||||
|
.then(data => this.setState({cat: data}))
|
||||||
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<h1>hi</h1>
|
<h1>{ this.state.cat.title }</h1>)
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10,8 +10,8 @@ class GrandCategory extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const renderBigCatLink = cat => {
|
const renderBigCatLink = cat => {
|
||||||
return(
|
return(
|
||||||
<span>
|
<span key={cat.uid}>
|
||||||
<a key={cat.uid} href={cat.link}>{cat.title}</a>
|
<a href={cat.link}>{cat.title}</a>
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
@ -25,8 +25,8 @@ class GrandCategory extends Component {
|
|||||||
|
|
||||||
const renderSmallCatLink = cat => {
|
const renderSmallCatLink = cat => {
|
||||||
return(
|
return(
|
||||||
<span>
|
<span key={cat.uid}>
|
||||||
<a key={cat.uid} href={cat.link}>{cat.title}</a>
|
<a href={cat.link}>{cat.title}</a>
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
a {white-space: nowrap;}
|
a {white-space: nowrap;}
|
||||||
`}</style>
|
`}</style>
|
||||||
@ -37,7 +37,7 @@ class GrandCategory extends Component {
|
|||||||
const grand = this.props.val;
|
const grand = this.props.val;
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<div className="GrandCategory" key={grand.title}>
|
<div className="GrandCategory">
|
||||||
<h1>{grand.title}</h1>
|
<h1>{grand.title}</h1>
|
||||||
|
|
||||||
<div className="finished">
|
<div className="finished">
|
||||||
|
@ -2,18 +2,7 @@ import React, { Component } from 'react';
|
|||||||
import { GrandCategory } from './GrandCategory';
|
import { GrandCategory } from './GrandCategory';
|
||||||
import { Tiles } from './Tiles';
|
import { Tiles } from './Tiles';
|
||||||
import { GrandCategoryT } from '../types';
|
import { GrandCategoryT } from '../types';
|
||||||
|
import { fetchData } from '../utils/index';
|
||||||
function checkStatus(response) {
|
|
||||||
if (response.status >= 200 && response.status < 300) {
|
|
||||||
return response;
|
|
||||||
} else {
|
|
||||||
throw new Error(response.statusText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseJSON(response) {
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
class Home extends Component {
|
class Home extends Component {
|
||||||
state: {
|
state: {
|
||||||
@ -23,19 +12,14 @@ class Home extends Component {
|
|||||||
this.setState({ categories: [] });
|
this.setState({ categories: [] });
|
||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
fetch('http://localhost:8080/haskell/api/all-categories')
|
fetchData('http://localhost:8080/haskell/api/all-categories')
|
||||||
.then(checkStatus).then(parseJSON)
|
.then(data => this.setState({categories: data}))
|
||||||
.then(data => {
|
|
||||||
this.setState({ categories: data });
|
|
||||||
}).catch(function(error) {
|
|
||||||
console.log('request failed', error);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Tiles space="1em">
|
<Tiles space="1em">
|
||||||
{this.state.categories.map(grand => {
|
{this.state.categories.map(grand => {
|
||||||
return <GrandCategory val={grand} />;
|
return <GrandCategory key={grand.title} val={grand} />;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</Tiles>
|
</Tiles>
|
||||||
|
17
front/src/components/NoMatch.js
Normal file
17
front/src/components/NoMatch.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
class NoMatch extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Not Found</h1>
|
||||||
|
<p><Link to="/">Go home</Link></p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
NoMatch
|
||||||
|
}
|
@ -2,10 +2,12 @@ import { GrandCategory } from './GrandCategory';
|
|||||||
import { Tiles } from './Tiles';
|
import { Tiles } from './Tiles';
|
||||||
import { CategoryChild } from './CategoryChild';
|
import { CategoryChild } from './CategoryChild';
|
||||||
import { Home } from './Home';
|
import { Home } from './Home';
|
||||||
|
import { NoMatch } from './NoMatch';
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
GrandCategory,
|
GrandCategory,
|
||||||
Tiles,
|
Tiles,
|
||||||
CategoryChild,
|
CategoryChild,
|
||||||
Home
|
Home,
|
||||||
|
NoMatch
|
||||||
}
|
}
|
@ -3,11 +3,50 @@ export type Category = {
|
|||||||
uid : string,
|
uid : string,
|
||||||
link : string,
|
link : string,
|
||||||
title : string
|
title : string
|
||||||
};
|
};
|
||||||
|
|
||||||
export type GrandCategoryT = {
|
export type GrandCategoryT = {
|
||||||
title : string,
|
title : string,
|
||||||
finished : Array<Category>,
|
finished : Array<Category>,
|
||||||
wip : Array<Category>,
|
wip : Array<Category>,
|
||||||
stubs : Array<Category>
|
stubs : Array<Category>
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export type Description = {
|
||||||
|
text : string,
|
||||||
|
html : string
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Valoration = {
|
||||||
|
uid : string,
|
||||||
|
content : Description,
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Kind = {
|
||||||
|
tag : string,
|
||||||
|
hackageName : string
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Note = {
|
||||||
|
text : string,
|
||||||
|
pros : Array<Valoration>,
|
||||||
|
cons : Array<Valoration>
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Item = {
|
||||||
|
ecosystem : Description,
|
||||||
|
group_ : string,
|
||||||
|
kind : Kind,
|
||||||
|
created : string,
|
||||||
|
link : string,
|
||||||
|
uid : string,
|
||||||
|
consDeleted : Array<String>,
|
||||||
|
name : string,
|
||||||
|
prosDeleted : Array<String>,
|
||||||
|
notes : Note,
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Cat = {
|
||||||
|
title : string,
|
||||||
|
items : Array<Item>
|
||||||
|
};
|
||||||
|
25
front/src/utils/fetchData.js
Normal file
25
front/src/utils/fetchData.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
|
||||||
|
function checkStatus(response) {
|
||||||
|
if (response.status >= 200 && response.status < 300) {
|
||||||
|
return response;
|
||||||
|
} else {
|
||||||
|
throw new Error(response.statusText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseJSON(response) {
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchData(url : string) : Promise<any> {
|
||||||
|
return fetch(url)
|
||||||
|
.then(checkStatus)
|
||||||
|
.then(parseJSON)
|
||||||
|
.catch(function(error) {
|
||||||
|
console.log('request failed', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
fetchData
|
||||||
|
}
|
5
front/src/utils/index.js
Normal file
5
front/src/utils/index.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { fetchData } from './fetchData';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
fetchData
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user