Merge pull request #559 from awibox/development

Replacing tigerspack with material

Author: awibox

.github/workflows/nodejs.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x]
     steps:
     - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-app-template",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "The template that will help you quickly start developing your project using React.",
   "repository": {
     "type": "git",
@@ -21,6 +21,9 @@
   "author": "awibox",
   "license": "MIT",
   "dependencies": {
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/material": "^5.10.0",
     "axios": "^0.27.2",
     "classnames": "^2.2.6",
     "font-awesome": "^4.7.0",
@@ -35,8 +38,7 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.2.0",
     "redux-thunk": "^2.3.0",
-    "reselect": "^4.1.6",
-    "tigerspack": "^0.1.19"
+    "reselect": "^4.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",

src/actions/reposActions.js

@@ -11,6 +11,11 @@ export const getReposSuccess = (repos) => ({
   payload: repos,
 });
 
+export const clearRepos = () => async (dispatch) => {
+  dispatch(getError([]));
+  dispatch(getReposSuccess([]));
+};
+
 export const getReposAction = (user) => async (dispatch) => {
   try {
     const { data } = await trackPromise(axios.get(`${gitHubApiUrl}/${END_POINT}/${user}/repos`));

src/components/AuthorInfo/AuthorInfo.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 // Components
-import { Button, Card } from 'tigerspack';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
 // Styles
 import styles from './AuthorInfo.scss';
 
@@ -23,13 +24,13 @@ export default class AuthorInfo extends Component {
   render() {
     const { author } = this.props;
     return (
-      <Card theme={'light'} className={styles.authorInfo}>
+      <Card className={styles.authorInfo}>
         <div className={styles.logo} style={{ backgroundImage: `url(${author.get('avatar_url')})` }} />
         <div className={styles.title}>{author.get('name')}</div>
         <div className={styles.titleVersion}>{author.get('location')}</div>
         <div className={styles.infoText}>{author.get('bio')}</div>
         <div className={styles.button}>
-          <Button icon={<i className="fa fa-github"/>} onClick={() => this.buttonClick(author.get('html_url'))}>
+          <Button variant="contained" startIcon={<i className="fa fa-github"/>} onClick={() => this.buttonClick(author.get('html_url'))}>
             Github page
           </Button>
         </div>

src/components/AuthorInfo/AuthorInfo.test.js.snap

@@ -1,11 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AuthorInfo should render correctly 1`] = `
-<Card
+<ForwardRef(Card)
   className="authorInfo"
-  indent={15}
-  padding={15}
-  theme="light"
 >
   <div
     className="logo"
@@ -33,17 +30,17 @@ exports[`AuthorInfo should render correctly 1`] = `
   <div
     className="button"
   >
-    <Button
-      icon={
+    <ForwardRef(Button)
+      onClick={[Function]}
+      startIcon={
         <i
           className="fa fa-github"
         />
       }
-      indent={0}
-      onClick={[Function]}
+      variant="contained"
     >
       Github page
-    </Button>
+    </ForwardRef(Button)>
   </div>
-</Card>
+</ForwardRef(Card)>
 `;

src/components/HomeInfo/HomeInfo.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 // Components
-import { Button, Card } from 'tigerspack';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
 // Styles
 import styles from './HomeInfo.scss';
 
@@ -16,21 +17,31 @@ export default class HomeInfo extends Component {
     }),
   };
 
+  static defaultProps = {
+    home: {
+      name: 'react-redux-app-template',
+      description: 'About\n'
+        + 'The template that will help you quickly start developing your project using React',
+      html_url: 'https://github.com/awibox/react-redux-app-template',
+    },
+  };
+
   buttonClick = (url) => window.open(url);
 
   render() {
     const { home } = this.props;
     return (
       <div className={styles.homeInfo}>
-        <Card theme={'light'}>
+        <Card>
           <div className={styles.homeLogo}>
             <div className={styles.image}>
               <i className="fa fa-gears"></i>
             </div>
             <h1 className={styles.name}>{home.get('name')}</h1>
             <div className={styles.text}>{home.get('description')}</div>
             <div className={styles.button}>
-              <Button icon={<i className="fa fa-github"/>} onClick={() => this.buttonClick(home.get('html_url'))}>
+              <Button variant="contained" startIcon={<i className="fa fa-github"/>}
+                      onClick={() => this.buttonClick(home.get('html_url'))}>
                 Download with Github
               </Button>
             </div>

src/components/HomeInfo/HomeInfo.test.js.snap

@@ -4,11 +4,7 @@ exports[`HomeInfo should render correctly 1`] = `
 <div
   className="homeInfo"
 >
-  <Card
-    indent={15}
-    padding={15}
-    theme="light"
-  >
+  <ForwardRef(Card)>
     <div
       className="homeLogo"
     >
@@ -32,19 +28,19 @@ exports[`HomeInfo should render correctly 1`] = `
       <div
         className="button"
       >
-        <Button
-          icon={
+        <ForwardRef(Button)
+          onClick={[Function]}
+          startIcon={
             <i
               className="fa fa-github"
             />
           }
-          indent={0}
-          onClick={[Function]}
+          variant="contained"
         >
           Download with Github
-        </Button>
+        </ForwardRef(Button)>
       </div>
     </div>
-  </Card>
+  </ForwardRef(Card)>
 </div>
 `;

src/components/ReposCard/ReposCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // Components
-import { Card } from 'tigerspack';
+import Card from '@mui/material/Card';
 // Styles
 import styles from './ReposCard.scss';
 
@@ -11,13 +11,13 @@ const ReposCard = (props) => {
   return (
     <div className={styles.repo}>
       {repo.id > 0
-        && <Card theme={'light'}>
+        && <Card style={{ padding: 15, marginBottom: 15 }}>
           <a href={repo.html_url} rel="noopener noreferrer" target="_blank" className={styles.name}>{repo.name}</a>
           <div className={styles.githubIcon}><i className="fa fa-github" aria-hidden="true"></i></div>
           <div className={styles.desc}>{repo.description}</div>
           <div className={styles.panel}>
             {repo.language
-            && <div className={styles.property}><i className="fa fa-circle" style={style}></i> {repo.language}</div>}
+              && <div className={styles.property}><i className="fa fa-circle" style={style}></i> {repo.language}</div>}
             <div className={styles.size}><i className="fa fa-file-archive-o"></i> {(repo.size / 1024).toFixed(2)} mb
             </div>
             <div className={styles.stars}><i className="fa fa-star" aria-hidden="true"></i> {repo.stargazers_count}

src/components/ReposCard/ReposCard.test.js.snap

@@ -4,10 +4,13 @@ exports[`ReposCard should render correctly 1`] = `
 <div
   className="repo"
 >
-  <Card
-    indent={15}
-    padding={15}
-    theme="light"
+  <ForwardRef(Card)
+    style={
+      Object {
+        "marginBottom": 15,
+        "padding": 15,
+      }
+    }
   >
     <a
       className="name"
@@ -63,6 +66,6 @@ exports[`ReposCard should render correctly 1`] = `
         10
       </div>
     </div>
-  </Card>
+  </ForwardRef(Card)>
 </div>
 `;

src/config.js

@@ -7,7 +7,7 @@ export const authorAccount = 'awibox';
 export const gitHubApiUrl = 'https://api.github.com';
 
 // Repos
-export const UserArray = [authorAccount, 'angular', 'facebook', 'reduxjs', 'webpack'];
+export const UserArray = ['microsoft', 'angular', 'facebook', 'reduxjs', 'webpack', 'error_User'];
 
 // Routes
 export const routes = {