Skip to content
This repository was archived by the owner on Sep 1, 2022. It is now read-only.

Soufiane AIT AKKACHE - Test #28

Open
soufDev wants to merge 34 commits into
base: master
Choose a base branch
from
Open

Soufiane AIT AKKACHE - Test #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
7a1538a
:sparkles: :art: add parcel & typescript replace webpack
soufDev Feb 14, 2020
da91de3
:sparkles: add tslint & tsconfig
soufDev Feb 14, 2020
8210669
:art: add components folder and put header there
soufDev Feb 14, 2020
7778ad1
:white_check_mark: :art: art react testing library config
soufDev Feb 14, 2020
b219184
:sparkles: :pencil2: add styled component config
soufDev Feb 14, 2020
651040a
:arrow_up: upgrade react version
soufDev Feb 14, 2020
85a0f7a
:sparkles: add activity Component
soufDev Feb 14, 2020
a7d5854
:fire: delete unsed styles
soufDev Feb 14, 2020
debd9ce
:sparkles: install redux deps
soufDev Feb 14, 2020
a4793e2
:pencil2: add styles to App comp
soufDev Feb 14, 2020
d5f6f37
:art: add new color
soufDev Feb 14, 2020
19af823
:sparkles: add redux config
soufDev Feb 14, 2020
23a7ea5
:sparkles: add TabContent Component
soufDev Feb 14, 2020
1d471c6
:sparkles: add fetchActivities to redux and App Comp
soufDev Feb 14, 2020
7451a7d
:sparkles: :white_check_mark: add ActivityList Comp and Unit Tests
soufDev Feb 14, 2020
f816ef5
:sparkles: add BlockActivities Comp
soufDev Feb 14, 2020
59771e7
:sparkles: add format date functions
soufDev Feb 14, 2020
cd03efd
:sparkles: :white_check_mark: add groupByDate and unit tests
soufDev Feb 14, 2020
74e5849
:white_check_mark: fix the failing test
soufDev Feb 14, 2020
0f49612
:sparkles: add selector for Activities
soufDev Feb 14, 2020
7049165
:sparkles: finalize ActivityFeed Component
soufDev Feb 14, 2020
9e384d1
:sparkles: add react-router
soufDev Feb 14, 2020
ccf29f8
:sparkles: add archiveIcon svg
soufDev Feb 14, 2020
e5d0073
:sparkles: add Routing file and Suspense for lazy loading
soufDev Feb 14, 2020
0167806
:art: :white_check_mark: add ActivityDetailHeader Comp and unit tests
soufDev Feb 14, 2020
6141fe0
:art: :white_check_mark: add ActivityDetailScreen Comp
soufDev Feb 14, 2020
6365024
:sparkles: add fetchActivityDetail api call
soufDev Feb 14, 2020
e8664f5
:sparkles: add fetchActivityDetail in redux side
soufDev Feb 14, 2020
62f4c57
:sparkles: add ActivityDetail Comp
soufDev Feb 14, 2020
d27290b
:sparkles: add ActivityDetail Comp to Routes file
soufDev Feb 14, 2020
d43f00a
:sparkles: add handleActivity api call
soufDev Feb 14, 2020
40b8dc9
:sparkles: add handleActivity in redux side
soufDev Feb 14, 2020
9a80373
:sparkles: add redux actions to ActivityDetailContainer
soufDev Feb 14, 2020
3d19bd2
:sparkles: add goToDetail handler in ActivityFeed
soufDev Feb 14, 2020
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
3 changes: 0 additions & 3 deletions .babelrc
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
dist
yarn-error.log
.cache
72 changes: 57 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,66 @@
"license": "MIT",
"private": false,
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
"dev": "concurrently -r 'tsc --noEmit --watch' 'npm start'",
"start": "parcel public/index.html -p 8080 --open",
"build": "parcel build public/index.html --no-source-maps",
"serve": "npm run build && npx serve dist",
"test": "jest"
},
"jest": {
"verbose": true,
"preset": "ts-jest",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"moduleNameMapper": {
".+\\.css$": "<rootDir>/src/styleMock.ts",
"\\.svg": "<rootDir>/src/svgrMock.ts"
},
"testMatch": [
"**/*.(test|spec).(ts|tsx|js)"
]
},
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1"
"date-fns": "^2.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "^5.0.1"
},
"devDependencies": {
"babel-core": "6.26.*",
"babel-loader": "7.1.*",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.*",
"css-loader": "2.1.*",
"html-loader": "0.5.*",
"html-webpack-plugin": "3.2.*",
"style-loader": "0.23.*",
"webpack": "4.29.*",
"webpack-cli": "3.2.*",
"webpack-dev-server": "3.1.*"
"@testing-library/jest-dom": "^5.1.1",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^8.1.0",
"@types/jest": "^25.1.2",
"@types/node": "^13.7.1",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@types/react-redux": "^7.1.7",
"@types/react-router-dom": "^5.1.3",
"@types/redux": "^3.6.0",
"@types/redux-thunk": "^2.1.0",
"@types/styled-components": "^4.4.3",
"concurrently": "^5.1.0",
"jest": "^25.1.0",
"jest-extended": "^0.11.5",
"jest-styled-components": "^7.0.0",
"parcel-bundler": "^1.12.4",
"prettier": "^1.19.1",
"ts-jest": "^25.2.0",
"tslint": "^6.0.0",
"tslint-config-airbnb": "^5.11.2",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.2.0",
"typescript": "^3.7.5"
}
}
17 changes: 9 additions & 8 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aircall Phone</title>
<head>
<title>Aircall Phone</title>

<meta charset="utf-8">
<meta property="description" name="description" content="">
</head>
<body>
<div id="app"></div>
</body>
<meta charset="utf-8" />
<meta property="description" name="description" content="" />
</head>
<body>
<div id="app"></div>
<script src="../src/index.tsx"></script>
</body>
</html>
17 changes: 0 additions & 17 deletions src/App.jsx
View file
Open in desktop

This file was deleted.

21 changes: 21 additions & 0 deletions src/App.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { default as styled } from "./StyledComponents";

export const StyledText = styled.div`
font-size: 40px;
color: red;
`;

export const StyledContainer = styled.div`
width: 376px;
height: 666px;
z-index: 100;
background: white;
border-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.9);
`;

export const StyledContainerView = styled.div`
padding: 20px 20px 0 20px;
background-color: ${props => props.theme.lightGrey};
height: 100%;
`;
15 changes: 15 additions & 0 deletions src/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from "react";
import { render } from "@testing-library/react";
import { App } from "./App";
import { Provider } from "react-redux";
import { default as store } from "./Redux";

const Container = (
<Provider store={store}>
<App />
</Provider>
);
test("should render without crashing", () => {
const { container } = render(Container);
expect(container.firstChild).toBeInTheDocument();
});
33 changes: 33 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from "react";

import { Header, TabContent } from "./components";
import { IRootState } from "./types";
import { StyledContainer, StyledContainerView } from "./App.styled";
import { useSelector, useDispatch } from "react-redux";
import { fetchActivitiesAction } from "./Redux/Actions";
import { Routes } from "./Routes";

export const App = () => {
const isLoading = useSelector((state: IRootState) => state.entity.isLoading);
const error = useSelector((state: IRootState) => state.entity.error);
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(fetchActivitiesAction());
}, []);
return (
<StyledContainer>
<Header />
<StyledContainerView>
<React.Suspense fallback={<h1>Loading...</h1>}>
<TabContent isVisible={isLoading}>
<h1>Loading...</h1>
</TabContent>
<TabContent isVisible={error !== null}>
<h1>Error occur</h1>
</TabContent>
<Routes />
</React.Suspense>
</StyledContainerView>
</StyledContainer>
);
};
25 changes: 0 additions & 25 deletions src/Header.jsx
View file
Open in desktop

This file was deleted.

80 changes: 80 additions & 0 deletions src/Redux/Actions/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import * as constants from "../Constants";

import { IActivity, TDispatch, TAction } from "../../types";
import {
fetchActivities,
fetchActivityDetail,
handleActivity
} from "../../api";

export const fetchActivitiesRequest = (): TAction => ({
type: constants.FETCH_ACTIVITIES_REQUEST
});

export const fetchActivitiesError = (error: string): TAction => ({
payload: error,
type: constants.FETCH_ACTIVITIES_ERROR
});

export const fetchActivitiesSuccess = (payload: IActivity[]): TAction => ({
payload,
type: constants.FETCH_ACTIVITIES_SUCCESS
});

export const fetchActivitiesAction = () => (dispatch: TDispatch) => {
dispatch(fetchActivitiesRequest());
return fetchActivities()
.then((payload: IActivity[]) => dispatch(fetchActivitiesSuccess(payload)))
.catch(error => dispatch(fetchActivitiesError(error.message)));
};

export const fetchActivityDetailRequest = (): TAction => ({
type: constants.FETCH_ACTIVITY_DETAIL_REQUEST
});

export const fetchActivityDetailError = (error: string): TAction => ({
payload: error,
type: constants.FETCH_ACTIVITY_DETAIL_ERROR
});

export const fetchActivityDetailSuccess = (payload: IActivity): TAction => ({
payload,
type: constants.FETCH_ACTIVITY_DETAIL_SUCCESS
});

export const fetchActivityDetailAction = (id: string) => (
dispatch: TDispatch
) => {
dispatch(fetchActivityDetailRequest());
return fetchActivityDetail(id)
.then((response: IActivity) =>
dispatch(fetchActivityDetailSuccess(response))
)
.catch((error: Error) => dispatch(fetchActivityDetailError(error.message)));
};

export const archiveActivity = (payload: number): TAction => ({
payload,
type: constants.ARCHIVE_ACTIVITY
});

export const resetActivity = (payload: number): TAction => ({
payload,
type: constants.RESET_ACTIVITY
});

export const archiveActivityAction = (id: string, isArchived: boolean) => (
dispatch: TDispatch
) => {
return handleActivity(id, isArchived).then((response: IActivity) => {
dispatch(archiveActivity(response.id));
});
};

export const resetActivityAction = (id: string, isArchived: boolean) => (
dispatch: TDispatch
) => {
return handleActivity(id, isArchived).then((response: IActivity) => {
dispatch(resetActivity(response.id));
});
};
10 changes: 10 additions & 0 deletions src/Redux/Constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export const FETCH_ACTIVITIES_ERROR = "FETCH_ACTIVITIES_ERROR";
export const FETCH_ACTIVITIES_REQUEST = "FETCH_ACTIVITIES_REQUEST";
export const FETCH_ACTIVITIES_SUCCESS = "FETCH_ACTIVITIES_SUCCESS";

export const FETCH_ACTIVITY_DETAIL_REQUEST = "FETCH_ACTIVITY_DETAIL_REQUEST";
export const FETCH_ACTIVITY_DETAIL_ERROR = "FETCH_ACTIVITY_DETAIL_ERROR";
export const FETCH_ACTIVITY_DETAIL_SUCCESS = "FETCH_ACTIVITY_DETAIL_SUCCESS";

export const ARCHIVE_ACTIVITY = "ARCHIVE_ACTIVITY";
export const RESET_ACTIVITY = "RESET_ACTIVITY";
Loading