Skip to content

Commit 54de0cc

Browse files
OsunadevOsunadev
committed
Project finished
1 parent 1dcc5d5 commit 54de0cc

26 files changed

+377
-69
lines changed

‎package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"html2canvas": "^1.0.0-rc.5",
67
"react": "^16.12.0",
78
"react-dom": "^16.12.0",
89
"react-scripts": "3.2.0"

‎public/favicon.ico

-20.7 KB
Binary file not shown.

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Task-Shell by Omar Osuna</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,25 @@
88
font-family: Alatsi;
99
}
1010

11-
.input-shell {
12-
font-family: FiraMono;
13-
font-size: 1.2rem;
14-
padding: 1rem;
15-
background: black;
16-
border: none;
17-
border-radius: 1rem;
18-
color: white;
19-
width: 90vw;
20-
}
21-
22-
.input-shell:focus {
23-
outline-width: 0px;
24-
}
25-
2611
.error-message {
27-
color: red;
12+
color: #ba2d0b;
13+
font-weight: bold;
14+
margin-top: 1rem;
15+
margin-bottom: 0;
16+
font-size: 1rem;
17+
font-family: Lato;
2818
}
2919

3020
.page-content {
3121
display: flex;
3222
flex-direction: row;
33-
width: 100vw;
34-
margin-top: 2rem;
23+
width: 90vw;
24+
margin-top: 2.5rem;
3525
}
3626

3727
.page-content--table {
38-
width: 70%;
28+
width: 75%;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
3932
}

‎src/App.js

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import React, { Component } from 'react';
22

3-
import { runProvidedCommand } from './utils/index';
3+
import { runProvidedCommand, updateSelTasklist } from './utils/index';
4+
import { generateTableImage } from './App.utils';
45

56
import './App.css';
7+
import InputShell from './components/input-shell/input-shell';
68
import SelectTaskLists from './components/select-tasklists/select-tasklists';
9+
import TaskListTable from './components/tasklist-table/tasklist-table';
10+
import SaveImageButton from './components/save-image-button/save-image-button';
711

812
class App extends Component {
913
constructor(props) {
1014
super(props);
1115
this.state = {
16+
isLoading: true, // A flag to display only our content when it's false
1217
commandInput: '',
1318
commandError: '',
1419
taskLists: [],
15-
selTaskList: 0
20+
selTaskList: -1 // Meaning that there's no tasklist within our taskLists array
1621
};
1722
}
1823

@@ -21,7 +26,9 @@ class App extends Component {
2126

2227
if (taskListsBackup) {
2328
const { selTaskList, taskLists } = JSON.parse(taskListsBackup);
24-
this.setState({ taskLists, selTaskList });
29+
this.setState({ isLoading: false, taskLists, selTaskList });
30+
} else {
31+
this.setState({ isLoading: false });
2532
}
2633
}
2734

@@ -45,15 +52,24 @@ class App extends Component {
4552
// Cleaning up the input and updating our taskLists array
4653
this.setState(
4754
prevState => {
48-
const commandResult = runProvidedCommand(
55+
const { status, taskLists } = runProvidedCommand(
4956
prevState.taskLists,
5057
prevState.commandInput
5158
);
5259

60+
const newSelTaskList = updateSelTasklist(
61+
taskLists.length,
62+
prevState.taskLists.length,
63+
prevState.selTaskList
64+
);
65+
66+
console.log(newSelTaskList);
67+
5368
return {
5469
commandInput: '',
55-
commandError: commandResult.status,
56-
taskLists: commandResult.taskLists
70+
commandError: status,
71+
taskLists: taskLists,
72+
selTaskList: newSelTaskList
5773
};
5874
},
5975
() => {
@@ -68,32 +84,49 @@ class App extends Component {
6884
};
6985

7086
render() {
71-
const { commandInput, commandError, taskLists, selTaskList } = this.state;
87+
const {
88+
commandInput,
89+
commandError,
90+
taskLists,
91+
selTaskList,
92+
isLoading
93+
} = this.state;
7294

7395
return (
7496
<div className='page-container'>
75-
<h1 className='page-title'>TASK-SHELL</h1>
76-
<input
77-
type='text'
78-
className='input-shell'
79-
value={`$ ${commandInput}`}
80-
onChange={this.handleCommandInput}
81-
onKeyPress={this.handleCommandSubmit}
82-
placeholder='Please enter a command...'
83-
/>
84-
{commandError && <p className='error-message'>{commandError}</p>}
85-
<div className='page-content'>
86-
<SelectTaskLists
87-
taskLists={taskLists}
88-
selectedTaskListId={selTaskList}
89-
changeSelection={this.handleChangeTasklist}
90-
/>
91-
<div className='page-content--table'>
92-
{taskLists.map((taskList, id) => (
93-
<p>{taskList.title}</p>
94-
))}
95-
</div>
96-
</div>
97+
{!isLoading && (
98+
<>
99+
<h1 className='page-title'>TASK-SHELL</h1>
100+
<InputShell
101+
commandInput={commandInput}
102+
handleCommandInput={this.handleCommandInput}
103+
handleCommandSubmit={this.handleCommandSubmit}
104+
/>
105+
{commandError && <p className='error-message'>{commandError}</p>}
106+
{selTaskList >= 0 && (
107+
<div className='page-content'>
108+
<SelectTaskLists
109+
taskLists={taskLists}
110+
selectedTaskListId={selTaskList}
111+
changeSelection={this.handleChangeTasklist}
112+
/>
113+
<div className='page-content--table'>
114+
<TaskListTable
115+
taskListId={selTaskList}
116+
taskList={taskLists[selTaskList]}
117+
/>
118+
<SaveImageButton
119+
onClick={() => {
120+
generateTableImage(taskLists, selTaskList);
121+
}}
122+
>
123+
Save tasklist as Image
124+
</SaveImageButton>
125+
</div>
126+
</div>
127+
)}
128+
</>
129+
)}
97130
</div>
98131
);
99132
}

‎src/App.utils.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import html2canvas from 'html2canvas';
2+
3+
export const generateTableImage = (taskLists, selTaskList) => {
4+
// taskTable is the id of our TaskTable container div
5+
html2canvas(document.querySelector('#taskListTable')).then(canvas => {
6+
// If the user is using IE/Edge browsers
7+
if (window.navigator.msSaveBlob) {
8+
window.navigator.msSaveBlob(
9+
canvas.msToBlob(),
10+
`TASKLIST: ${taskLists[selTaskList].title}.png`
11+
);
12+
} else {
13+
// If the user uses Chrome, FireFox, etc...
14+
const a = document.createElement('a');
15+
16+
document.body.appendChild(a);
17+
a.href = canvas.toDataURL();
18+
a.download = `TASKLIST: ${taskLists[selTaskList].title}.png`;
19+
a.click();
20+
document.body.removeChild(a);
21+
}
22+
});
23+
};

‎src/components/input-command-shell/input-command-shell.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/components/input-command-shell/input-command-shell.jsx

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/input-shell/input-shell.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.input-shell {
2+
font-family: FiraMono;
3+
font-size: 1.2rem;
4+
padding: 1rem;
5+
background: black;
6+
border: none;
7+
border-radius: 1rem;
8+
color: white;
9+
width: 90vw;
10+
}
11+
12+
.input-shell:focus {
13+
outline-width: 0px;
14+
}

‎src/components/input-shell/input-shell.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
import './input-shell.css';
4+
5+
const InputShell = ({
6+
commandInput,
7+
handleCommandInput,
8+
handleCommandSubmit
9+
}) => (
10+
<input
11+
type='text'
12+
className='input-shell'
13+
value={`$ ${commandInput}`}
14+
onChange={handleCommandInput}
15+
onKeyPress={handleCommandSubmit}
16+
placeholder='Please enter a command...'
17+
/>
18+
);
19+
20+
export default InputShell;

‎src/components/save-image-button/save-image-button.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.save-image-button {
2+
padding: 1rem;
3+
border: 1px solid black;
4+
background: white;
5+
font-size: 1.2rem;
6+
font-family: FiraMono;
7+
cursor: pointer;
8+
margin-top: 1rem;
9+
}
10+
11+
.save-image-button:hover {
12+
background: black;
13+
color: white;
14+
}

‎src/components/save-image-button/save-image-button.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
import './save-image-button.css';
4+
5+
const SaveImageButton = ({ children, onClick }) => (
6+
<button className='save-image-button' onClick={onClick}>
7+
{children}
8+
</button>
9+
);
10+
11+
export default SaveImageButton;

‎src/components/select-tasklist-button/select-tasklist-button.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
font-size: 1.2rem;
1111
font-weight: 800;
1212
color: white;
13-
background: #ba2d0b;
13+
background: #575ae0;
1414
border-radius: 3rem;
1515
}
1616

@@ -25,17 +25,17 @@
2525
}
2626

2727
.select-tasklist-button-id {
28-
width: 20%;
28+
width: 15%;
2929
display: flex;
3030
justify-content: center;
3131
align-items: center;
3232
padding: 1rem;
3333
}
3434

3535
.select-tasklist-button-title {
36-
width: 80%;
36+
width: 85%;
3737
display: flex;
3838
justify-content: center;
3939
align-items: center;
40-
padding: 1rem;
40+
padding: 1rem 0;
4141
}

‎src/components/select-tasklists/select-tasklists.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
.page-content--tasklists {
22
display: flex;
33
align-items: center;
4-
justify-content: center;
54
flex-direction: column;
65
width: 25%;
76
}
87

98
.select-tasklist-title {
109
font-size: 2rem;
10+
margin: 0px;
11+
margin-bottom: 2rem;
1112
font-family: Alatsi;
1213
text-align: center;
1314
}

0 commit comments

Comments
 (0)