Skip to content

Commit

Permalink
changed the api end points
Browse files Browse the repository at this point in the history
  • Loading branch information
@Quarantinex
Quarantinex committed Nov 25, 2021
1 parent efddd92 commit 4b90dce
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 67 deletions.
47 changes: 47 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@
"react-dom": "^17.0.2",
"react-paginate": "^8.0.0",
"react-scripts": "4.0.3",
"react-test-renderer": "^17.0.2",
"reactstrap": "^9.0.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test": "jest --watchAll",
"eject": "react-scripts eject"
},
"eslintConfig": {
Expand Down
135 changes: 72 additions & 63 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,47 +11,50 @@ export default class App extends Component {
super(props);
this.state = {
error: null,
pageNum: [],
offset: 0,
data: [],
completeData: [],
perPage: 25,
currentPage: 0,
DataisLoaded: false,
ticket: [],
tickets:0,
ticketView: false
};
this.handlePageClick = this.handlePageClick.bind(this);
this.handleTicket = this.handleTicket.bind(this);
}
receivedData() {
const tmp = this.state.completeData;
const slice = tmp.slice(this.state.offset, this.state.offset + this.state.perPage)
const postData = slice.map(pd => <React.Fragment>
<Card>
<Row>
<Col>
<Card.Body>
id: {pd.id} <br />
url: {pd.url} <br />
status: {pd.status} <br />
subject: {pd.subject} <br />
</Card.Body>
</Col>
<Col style={{textAlign:"right", marginTop:"auto", marginBottom:"auto", paddingRight:"30px"}}>
<Button variant="secondary" size="lg" value={pd.url} onClick={this.handleTicket} active>
View Ticket
</Button>
</Col>
</Row>
</Card>
<br />

</React.Fragment>)
this.setState({
pageCount: Math.ceil(tmp.length / this.state.perPage),
postData
})
const tmp = this.state.completeData;
const slice = tmp.slice(this.state.offset, this.state.offset + this.state.perPage)
debugger;
const postData = slice.map(pd => <React.Fragment>
<Card>
<Row>
<Col>
<Card.Body>
id: {pd.id} <br />
url: {pd.url} <br />
status: {pd.status} <br />
subject: {pd.subject} <br />
</Card.Body>
</Col>
<Col style={{textAlign:"right", marginTop:"auto", marginBottom:"auto", paddingRight:"30px"}}>
<Button variant="secondary" size="lg" value={pd.url} onClick={this.handleTicket} active>
View Ticket
</Button>
</Col>
</Row>
</Card>
<br />

</React.Fragment>)
this.setState({
pageCount: Math.ceil(this.state.tickets / this.state.perPage),
postData
})
}
handlePageClick = (e) => {
const selectedPage = e.selected;
Expand All @@ -74,54 +77,60 @@ export default class App extends Component {
.get( '/'+temp4, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}})
.then(res => {
const dat = res.data;
this.setState({ticket: dat.request, ticketView: true});
this.setState({ticket: dat.ticket, ticketView: true});
});
}

componentDidMount() {
axios
.get(`/api/v2/requests.json`, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}})
.then((res) => {
async componentDidMount() {
const [first, second] = await Promise.all([
axios
.get(`/api/v2/tickets.json`, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}}),
axios
.get(`/api/v2/tickets.json?page=2`, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}}),

]);

const data = res.data;
this.setState({completeData: data.requests})
const tmp = this.state.completeData;
const slice = tmp.slice(this.state.offset, this.state.offset + this.state.perPage)
const postData = slice.map(pd => <React.Fragment>
this.setState({
tickets: first.data.count,
completeData: first.data.tickets.concat(second.data.tickets)
})

const tmp = this.state.completeData;
const slice = tmp.slice(this.state.offset, this.state.offset + this.state.perPage)
const postData = slice.map(pd => <React.Fragment>

<Card>
<Row>
<Col>
<Card.Body>
id: {pd.id} <br />
url: {pd.url} <br />
status: {pd.status} <br />
subject: {pd.subject} <br />
</Card.Body>
</Col>
<Col style={{textAlign:"right", marginTop:"auto", marginBottom:"auto", paddingRight:"30px"}}>
<Button variant="secondary" size="lg" value={pd.url} onClick={this.handleTicket} active>
View Ticket
</Button>
</Col>
<Col>
<Card.Body>
id: {pd.id} <br/>
url: {pd.url} <br/>
status: {pd.status} <br/>
subject: {pd.subject} <br/>
</Card.Body>
</Col>
<Col style={{
textAlign: "right",
marginTop: "auto",
marginBottom: "auto",
paddingRight: "30px"
}}>
<Button variant="secondary" size="lg" value={pd.url} onClick={this.handleTicket}
active>
View Ticket
</Button>
</Col>
</Row>
</Card>

<br />
</React.Fragment>)
<br/>
</React.Fragment>)

this.setState({
DataisLoaded: true,
pageCount: Math.ceil(tmp.length / this.state.perPage),
postData
})
},
(error) => {
this.setState({
isLoaded: true,
error
});
});
this.setState({
DataisLoaded: true,
pageCount: Math.ceil(this.state.tickets / this.state.perPage),
postData
})
}
render() {
if (this.state.error) {
Expand Down
11 changes: 8 additions & 3 deletions src/App.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
test('render navbar', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
expect(screen.getByText('Zendesk Coding Challenge')).toBeInTheDocument();
});

test('render cards', () => {
render(<App />);
expect(screen.get);
});

0 comments on commit 4b90dce

Please sign in to comment.