Skip to content

Commit

Permalink
♻️ add getProjects module (#2118)
Browse files Browse the repository at this point in the history
* 🚧 add getProjects module

* 🚧 improve getProjects module

* 🔥 remove APP.getProjects method

* 🚧 use the new getProjects function

* 🚧 add getMateCatDomain module

* 🚧 add getMatecatApiDomain module

* 🚧 switch to fetch

* Fix rebase

* add fetch for jest

* add tests
  • Loading branch information
cloud-walker committed Jul 22, 2021
1 parent 9deb928 commit 093b14f
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 109 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"lint-staged": ">=10",
"msw": "^0.30.0",
"node-sass": "^6.0.0",
"prettier": "^2.2.1"
"prettier": "^2.2.1",
"whatwg-fetch": "^3.6.2"
}
}
21 changes: 0 additions & 21 deletions public/js/cat_source/es6/ajax_utils/projectsAjax.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,6 @@ if (!window.API) {
}

window.API.PROJECTS = {
/**
* Retrieve Projects. Passing filters is possible to retrieve projects
*/
getProjects: function (team, searchFilter, page) {
var pageNumber = page ? page : searchFilter.currentPage
var data = {
id_team: team.id,
page: pageNumber,
filter: !$.isEmptyObject(searchFilter.filter) ? 1 : 0,
}

// Filters
data = $.extend(data, searchFilter.filter)

return $.ajax({
data: data,
type: 'POST',
xhrFields: {withCredentials: true},
url: getMatecatApiDomain() + '?action=getProjects',
})
},
getProject: function (id) {
return $.ajax({
async: true,
Expand Down
39 changes: 39 additions & 0 deletions public/js/cat_source/es6/api/getProjects/getProjects.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import _ from 'lodash'

import {getMatecatApiDomain} from '../../utils/getMatecatApiDomain'

/**
* Fetch the project list based on:
*
* - the given team
* - the given page
*
* @param {number} param.page
* @param {object} param.searchFilter
* @param {object} param.team
* @returns {Promise<object>}
*/
export const getProjects = ({
searchFilter,
team,
page = searchFilter.currentPage,
}) => {
const data = {
id_team: team.id,
page,
filter: _.isEmpty(searchFilter.filter) ? 0 : 1,
...searchFilter.filter,
}

const formData = new FormData()

Object.keys(data).forEach((key) => {
formData.append(key, data[key])
})

return fetch(`${getMatecatApiDomain()}?action=getProjects`, {
method: 'POST',
credentials: 'include',
body: formData,
}).then((res) => res.json())
}
45 changes: 45 additions & 0 deletions public/js/cat_source/es6/api/getProjects/getProjects.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import {rest} from 'msw'

import {getProjects} from '.'
import {mswServer} from '../../../../../mocks/mswServer'

test('works properly with empty filter', async () => {
const payload = {fake: 'data'}

mswServer.use(
rest.post('*.ajax.localhost', (req, res, ctx) => {
return res(ctx.status(200), ctx.json(payload))
}),
)

global.config = {
enableMultiDomainApi: true,
ajaxDomainsNumber: 20,
}

const data = await getProjects({searchFilter: {}, team: {}})

expect(data).toEqual(payload)
})

test('works properly with full filter', async () => {
const payload = {fake: 'data'}

mswServer.use(
rest.post('*.ajax.localhost', (req, res, ctx) => {
return res(ctx.status(200), ctx.json(payload))
}),
)

global.config = {
enableMultiDomainApi: true,
ajaxDomainsNumber: 20,
}

const data = await getProjects({
searchFilter: {filter: {foo: 'bar'}},
team: {},
})

expect(data).toEqual(payload)
})
1 change: 1 addition & 0 deletions public/js/cat_source/es6/api/getProjects/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './getProjects'
181 changes: 94 additions & 87 deletions public/js/cat_source/es6/components/projects/Dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import Immutable from 'immutable'
import _ from 'lodash'

import ProjectsContainer from './ProjectsContainer'
import ManageActions from '../../actions/ManageActions'
import TeamsActions from '../../actions/TeamsActions'
Expand All @@ -11,6 +12,8 @@ import ManageConstants from '../../constants/ManageConstants'
import TeamConstants from '../../constants/TeamConstants'
import DashboardHeader from './Header'
import Header from '../header/Header'
import {getProjects} from '../../api/getProjects'

class Dashboard extends React.Component {
constructor() {
super()
Expand Down Expand Up @@ -38,31 +41,30 @@ class Dashboard extends React.Component {
this.getTeamStructure(selectedTeam).done(() => {
TeamsActions.selectTeam(selectedTeam)
ManageActions.checkPopupInfoTeams()
API.PROJECTS.getProjects(selectedTeam, this.Search).done((response) => {
if (
typeof response.errors != 'undefined' &&
response.errors.length &&
response.errors[0].code === 401
) {
//Not Logged or not in the team
window.location.reload()
} else if (
typeof response.errors != 'undefined' &&
response.errors.length &&
response.errors[0].code === 404
) {
this.selectPersonalTeam()
} else if (
typeof response.errors != 'undefined' &&
response.errors.length
) {
window.location = '/'
} else {
this.setState({showProjects: true})
ManageActions.renderProjects(response.data, selectedTeam, teams)
ManageActions.storeSelectedTeam(selectedTeam)
}
})
getProjects({team: selectedTeam, searchFilter: this.Search}).then(
(res) => {
if (
typeof res.errors != 'undefined' &&
res.errors.length &&
res.errors[0].code === 401
) {
//Not Logged or not in the team
window.location.reload()
} else if (
typeof res.errors != 'undefined' &&
res.errors.length &&
res.errors[0].code === 404
) {
this.selectPersonalTeam()
} else if (typeof res.errors != 'undefined' && res.errors.length) {
window.location = '/'
} else {
this.setState({showProjects: true})
ManageActions.renderProjects(res.data, selectedTeam, teams)
ManageActions.storeSelectedTeam(selectedTeam)
}
},
)
})
setTimeout(function () {
CatToolActions.showHeaderTooltip()
Expand All @@ -81,27 +83,24 @@ class Dashboard extends React.Component {
this.Search.filter = {}
this.Search.currentPage = 1

API.PROJECTS.getProjects(selectedTeam, this.Search).done((response) => {
getProjects({team: selectedTeam, searchFilter: this.Search}).then((res) => {
if (
typeof response.errors != 'undefined' &&
response.errors.length &&
response.errors[0].code === 401
typeof res.errors != 'undefined' &&
res.errors.length &&
res.errors[0].code === 401
) {
//Not Logged or not in the team
window.location.reload()
} else if (
typeof response.errors != 'undefined' &&
response.errors.length &&
response.errors[0].code === 404
typeof res.errors != 'undefined' &&
res.errors.length &&
res.errors[0].code === 404
) {
this.selectPersonalTeam()
} else if (
typeof response.errors != 'undefined' &&
response.errors.length
) {
} else if (typeof res.errors != 'undefined' && res.errors.length) {
window.location = '/'
} else {
ManageActions.renderProjects(response.data, selectedTeam, teams)
ManageActions.renderProjects(res.data, selectedTeam, teams)
ManageActions.storeSelectedTeam(selectedTeam)
}
})
Expand Down Expand Up @@ -130,47 +129,48 @@ class Dashboard extends React.Component {

renderMoreProjects = () => {
this.Search.currentPage = this.Search.currentPage + 1
API.PROJECTS.getProjects(this.state.selectedTeam, this.Search).done(
(response) => {
const projects = response.data
if (projects.length > 0) {
ManageActions.renderMoreProjects(projects)
} else {
ManageActions.noMoreProjects()
}
},
)

getProjects({
team: this.state.selectedTeam,
searchFilter: this.Search,
}).then((res) => {
const projects = res.data

if (projects.length > 0) {
ManageActions.renderMoreProjects(projects)
} else {
ManageActions.noMoreProjects()
}
})
}

refreshProjects = () => {
if (this.Search.currentPage === 1) {
const {selectedTeam} = this.state
API.PROJECTS.getProjects(this.state.selectedTeam, this.Search).done(
(response) => {
if (
typeof response.errors != 'undefined' &&
response.errors.length &&
response.errors[0].code === 401
) {
//Not Logged or not in the team
window.location.reload()
} else if (
typeof response.errors != 'undefined' &&
response.errors.length &&
response.errors[0].code === 404
) {
this.selectPersonalTeam()
} else if (
typeof response.errors != 'undefined' &&
response.errors.length
) {
window.location = '/'
} else if (selectedTeam.id === this.state.selectedTeam.id) {
const projects = response.data
ManageActions.updateProjects(projects)
}
},
)
getProjects({
team: this.state.selectedTeam,
searchFilter: this.Search,
}).then((res) => {
if (
typeof res.errors != 'undefined' &&
res.errors.length &&
res.errors[0].code === 401
) {
//Not Logged or not in the team
window.location.reload()
} else if (
typeof res.errors != 'undefined' &&
res.errors.length &&
res.errors[0].code === 404
) {
this.selectPersonalTeam()
} else if (typeof res.errors != 'undefined' && res.errors.length) {
window.location = '/'
} else if (selectedTeam.id === this.state.selectedTeam.id) {
const projects = res.data
ManageActions.updateProjects(projects)
}
})
} else {
//Todo: refactoring with prommises
let total_projects = []
Expand All @@ -181,10 +181,14 @@ class Dashboard extends React.Component {
}
for (let i = 1; i <= this.Search.currentPage; i++) {
requests.push(
API.PROJECTS.getProjects(this.state.selectedTeam, this.Search, i),
getProjects({
team: this.state.selectedTeam,
searchFilter: this.Search,
page: i,
}),
)
}
$.when.apply(this, requests).done(function () {
Promise.all(requests).then(function () {
let results = requests.length > 1 ? arguments : [arguments]
for (let i = 0; i < results.length; i++) {
onDone(results[i][0])
Expand Down Expand Up @@ -314,18 +318,21 @@ class Dashboard extends React.Component {
if (!_.isEmpty(this.Search.filter)) {
this.Search.currentPage = 1
}
API.PROJECTS.getProjects(this.state.selectedTeam, this.Search).done(
(response) => {
const projects = response.data
ManageActions.renderProjects(
projects,
this.state.selectedTeam,
this.state.teams,
false,
true,
)
},
)

getProjects({
team: this.state.selectedTeam,
searchFilter: this.Search,
}).then((res) => {
const projects = res.data

ManageActions.renderProjects(
projects,
this.state.selectedTeam,
this.state.teams,
false,
true,
)
})
}

//********* Modals **************//
Expand Down
2 changes: 2 additions & 0 deletions setupFiles.jest.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'whatwg-fetch'

global.$ = require('./public/api/dist/lib/jquery-3.3.1.min.js')
global.jQuery = $

Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7921,6 +7921,11 @@ whatwg-encoding@^1.0.5:
dependencies:
iconv-lite "0.4.24"

whatwg-fetch@^3.6.2:
version "3.6.2"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==

whatwg-mimetype@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
Expand Down

0 comments on commit 093b14f

Please sign in to comment.