Skip to content

Commit 15f39ff

Browse files
Eliza612Eliza612
authored
Merge pull request #11 from oslabs-beta/brian
Updated canvas scroll + zoom functionality + tab updates
2 parents fcf5c84 + 2ac671d commit 15f39ff

33 files changed

+504
-327
lines changed

‎app/src/Dashboard/Project.tsx

Lines changed: 109 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useState } from 'react';
22
import { useMutation } from '@apollo/client';
3-
import {
3+
import {
44
ADD_LIKE,
55
MAKE_COPY,
66
DELETE_PROJECT,
77
PUBLISH_PROJECT,
8-
ADD_COMMENT,
8+
ADD_COMMENT
99
} from './gqlStrings';
1010
import CloseIcon from '@mui/icons-material/Close';
1111
import AddCommentIcon from '@mui/icons-material/AddComment';
@@ -19,22 +19,27 @@ import ListItemText from '@mui/material/ListItemText';
1919
import createModal from '../components/right/createModal';
2020
// Variable validation using typescript
2121
type props = {
22-
name: string,
23-
id: string,
24-
userId: string,
25-
username: string,
26-
likes: number,
27-
published: boolean,
28-
comments: object[],
22+
name: string;
23+
id: string;
24+
userId: string;
25+
username: string;
26+
likes: number;
27+
published: boolean;
28+
comments: object[];
2929
};
3030

3131
// Use current user info to make a make copy of another user's project
3232
const currUserSSID = window.localStorage.getItem('ssid') || 'unavailable';
3333
const currUsername = window.localStorage.getItem('username') || 'unavailable';
3434

3535
const Project = ({
36-
name, likes, id, username, published, comments,
37-
}: props) : JSX.Element => {
36+
name,
37+
likes,
38+
id,
39+
username,
40+
published,
41+
comments
42+
}: props): JSX.Element => {
3843
// IMPORTANT:
3944
// 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
4045
// 2) always request the 'id' in a mutation request
@@ -46,56 +51,52 @@ const Project = ({
4651
const [publishProject] = useMutation(PUBLISH_PROJECT);
4752
const [addComment] = useMutation(ADD_COMMENT);
4853

49-
const noPointer = {cursor: 'default'};
54+
const noPointer = { cursor: 'default' };
5055
//Likes the project when the star icon is clicked
5156
function handleLike(e) {
5257
e.preventDefault();
5358
const myVar = {
54-
variables:
55-
{
59+
variables: {
5660
projId: id,
57-
likes: likes + 1,
58-
},
61+
likes: likes + 1
62+
}
5963
};
6064
addLike(myVar);
6165
}
6266
//Makes a copy of the public project and saves as a user project
6367
function handleDownload(e) {
6468
e.preventDefault();
6569
const myVar = {
66-
variables:
67-
{
70+
variables: {
6871
projId: id,
6972
userId: currUserSSID,
70-
username: currUsername,
71-
},
73+
username: currUsername
74+
}
7275
};
7376
makeCopy(myVar);
7477
}
7578
//Publishes project from user dashboard to public dashboard
7679
function handlePublish(e) {
7780
e.preventDefault();
7881
const myVar = {
79-
variables:
80-
{
82+
variables: {
8183
projId: id,
82-
published: !published,
83-
},
84+
published: !published
85+
}
8486
};
8587
publishProject(myVar);
8688
}
8789
//Adds the comment to the project
8890
function handleComment(e) {
8991
e.preventDefault();
9092
const myVar = {
91-
variables:
92-
{
93-
projId: id,
94-
comment: commentVal,
95-
username: currUsername,
96-
},
93+
variables: {
94+
projId: id,
95+
comment: commentVal,
96+
username: currUsername
97+
}
9798
};
98-
addComment(myVar)
99+
addComment(myVar);
99100
}
100101
//sets state of commentVal to what the user types in to comment
101102
function handleChange(e) {
@@ -104,16 +105,17 @@ const Project = ({
104105
setCommentVal(commentValue);
105106
}
106107
const recentComments = [];
107-
if (comments?.length > 0) {
108+
if (comments?.length > 0) {
108109
const reversedCommentArray = comments.slice(0).reverse();
109-
const min = Math.min(6, reversedCommentArray.length)
110-
for (let i = 0; i < min ; i++) {
111-
recentComments.push(
112-
<p className='comment'>
113-
<b>{ reversedCommentArray[i].username }</b>:
114-
{ reversedCommentArray[i].text }
115-
</p>
116-
)}
110+
const min = Math.min(6, reversedCommentArray.length);
111+
for (let i = 0; i < min; i++) {
112+
recentComments.push(
113+
<p className="comment">
114+
<b>{reversedCommentArray[i].username}</b>:
115+
{reversedCommentArray[i].text}
116+
</p>
117+
);
118+
}
117119
}
118120
// Closes out the open modal
119121
const closeModal = () => setModal('');
@@ -123,13 +125,12 @@ const Project = ({
123125
const handleDelete = (e) => {
124126
e.preventDefault();
125127
const myVar = {
126-
variables:
127-
{
128-
projId: id,
129-
},
128+
variables: {
129+
projId: id
130+
}
130131
};
131132
deleteProject(myVar);
132-
}
133+
};
133134
// Set modal options
134135
const children = (
135136
<List className="export-preference">
@@ -138,7 +139,7 @@ const Project = ({
138139
button
139140
onClick={handleDelete}
140141
style={{
141-
border: '1px solid #1b544b',
142+
border: '1px solid #3c59ba',
142143
marginBottom: '2%',
143144
marginTop: '5%'
144145
}}
@@ -168,61 +169,79 @@ const Project = ({
168169
};
169170

170171
return (
171-
<div className = 'project'>
172-
<div className = 'header'>
173-
{ currUsername === username ?
174-
<IconButton
175-
tooltip = "Delete Project"
176-
onClick={ deleteProjectModal }
177-
style={{position: 'absolute', right: '0'}}
178-
size="large">
179-
<CloseIcon/>
180-
</IconButton>
181-
: '' }
182-
<div className = 'projectInfo'>
172+
<div className="project">
173+
<div className="header">
174+
{currUsername === username ? (
175+
<IconButton
176+
tooltip="Delete Project"
177+
onClick={deleteProjectModal}
178+
style={{ position: 'absolute', right: '0' }}
179+
size="large"
180+
>
181+
<CloseIcon />
182+
</IconButton>
183+
) : (
184+
''
185+
)}
186+
<div className="projectInfo">
183187
<b>
184-
<h2>Project: { name }</h2>
185-
<h3>Author: { username }</h3>
186-
<h3>Likes: { likes }</h3>
188+
<h2>Project: {name}</h2>
189+
<h3>Author: {username}</h3>
190+
<h3>Likes: {likes}</h3>
187191
</b>
188192
</div>
189193

190-
<div className = "icons">
194+
<div className="icons">
195+
<IconButton
196+
tooltip="Like Template"
197+
style={noPointer}
198+
onClick={handleLike}
199+
size="large"
200+
>
201+
<ThumbUpAltIcon fontSize="Large" />
202+
</IconButton>
203+
{currUsername !== username ? (
191204
<IconButton
192-
tooltip="Like Template"
205+
tooltip="Download Template"
193206
style={noPointer}
194-
onClick = { handleLike }
195-
size="large">
196-
<ThumbUpAltIcon fontSize='Large'/>
197-
</IconButton>
198-
{ currUsername !== username ?
199-
<IconButton
200-
tooltip ="Download Template"
201-
style={noPointer}
202-
onClick={ handleDownload }
203-
size="large">
204-
<GetAppIcon fontSize="large" className="download"/>
205-
</IconButton>
206-
: '' }
207-
{ currUsername === username ?
207+
onClick={handleDownload}
208+
size="large"
209+
>
210+
<GetAppIcon fontSize="large" className="download" />
211+
</IconButton>
212+
) : (
213+
''
214+
)}
215+
{currUsername === username ? (
208216
<IconButton
209-
tooltip ="Publish Template"
217+
tooltip="Publish Template"
210218
style={noPointer}
211-
onClick={ handlePublish }
212-
size="large">
213-
<PublishIcon fontSize="large"/>
219+
onClick={handlePublish}
220+
size="large"
221+
>
222+
<PublishIcon fontSize="large" />
214223
</IconButton>
215-
: '' }
224+
) : (
225+
''
226+
)}
216227
</div>
217228
</div>
218-
<div className = "commentContainer">
219-
{recentComments}
220-
</div>
221-
<div className = 'commentInput'>
222-
<input type="text" placeholder="Add Comment" className="commentField" onChange={ handleChange }></input>
223-
<AddCommentIcon className='commentBtn' fontSize='Large' onClick={ handleComment } style={{position: 'absolute', right: '8', top: '13'}}/>
224-
</div>
225-
{modal}
229+
<div className="commentContainer">{recentComments}</div>
230+
<div className="commentInput">
231+
<input
232+
type="text"
233+
placeholder="Add Comment"
234+
className="commentField"
235+
onChange={handleChange}
236+
></input>
237+
<AddCommentIcon
238+
className="commentBtn"
239+
fontSize="Large"
240+
onClick={handleComment}
241+
style={{ position: 'absolute', right: '8', top: '13' }}
242+
/>
243+
</div>
244+
{modal}
226245
</div>
227246
);
228247
};

‎app/src/Dashboard/styles.css

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
21
.project {
32
display: flex;
43
flex-direction: column;
54
align-items: stretch;
65
margin: 5px;
7-
border: 1px solid #f0f0f0;
6+
border: 1px solid #f0f0f0;
87
border-radius: 5px;
9-
box-shadow: 0 0 5px rgba(0,0,0,0.3);
8+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
109
height: 500px;
1110
width: 400px;
1211
justify-content: space-between;
1312
}
1413

1514
.dashboardContainer {
1615
height: 100%;
17-
width: 100%
16+
width: 100%;
1817
}
1918

2019
.userDashboard {
@@ -26,7 +25,7 @@
2625
width: 100%;
2726
}
2827

29-
.projectContainer{
28+
.projectContainer {
3029
display: flex;
3130
flex-direction: column-reverse;
3231
flex-flow: row wrap;
@@ -76,14 +75,14 @@
7675
}
7776

7877
.header {
79-
background-color: #29a38a;
78+
background-color: #354e9c;
8079
color: rgba(255, 255, 255, 0.897);
8180
width: 100%;
8281
position: relative;
8382
}
8483

8584
.commentField {
86-
border: 1px solid #f0f0f0;
85+
border: 1px solid #f0f0f0;
8786
padding-left: 2%;
8887
}
8988

‎app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const AddContextForm = ({
126126
<Select
127127
required
128128
sx={{ width: 425 }}
129-
style={{ border: '1px solid #29a38a', color: color }}
129+
style={{ border: '1px solid #354e9c', color: color }}
130130
value={currentContext}
131131
label="Select Context"
132132
MenuProps={{ disablePortal: true }}

0 commit comments

Comments
 (0)