Skip to content

Commit fd2daa6

Browse files
kunals131kunals131
committed
Added Categories links between server and client
1 parent 5ad1010 commit fd2daa6

File tree

12 files changed

+289
-23
lines changed

12 files changed

+289
-23
lines changed

‎src/App.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import { Button } from "@mui/material";
1111
import NotesPage from "./pages/Mynotes/mynotes";
1212
import { categoriesOfUser } from "./appwrite/database.appwrite";
1313
import CategoriesPage from "./pages/categories/categories";
14-
import SpeedDialOption from "./components/SpeedDial/speedDial";
15-
import { Speed } from "@mui/icons-material";
14+
1615
const Homepage = () => <h1>Hello home</h1>;
1716

1817

@@ -81,7 +80,7 @@ class App extends React.Component {
8180
path="/categories"
8281
render={() =>
8382
this.state.user !== null ? (
84-
<CategoriesPage categories={this.state.categories} />
83+
<CategoriesPage categories={this.state.categories} user={this.state.user} />
8584
) : (
8685
null
8786
)
@@ -113,9 +112,7 @@ class App extends React.Component {
113112
}
114113
/>
115114
</Switch>
116-
{
117-
(this.state.user!==null) ? <SpeedDialOption/> : null
118-
}
115+
119116
</div>
120117
);
121118
}

‎src/appwrite/database.appwrite.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,13 @@ const categoriesOfUser = (userId)=> {
55
return sdk.database.listDocuments('6166c7e8106b3', [`user=${userId}`]);
66
}
77

8-
export {categoriesOfUser};
8+
const createCategory = (data,user) =>{
9+
return sdk.database.createDocument('6166c7e8106b3',data,['*'], ['*'])
10+
}
11+
12+
const editCategory = (id,data) =>{
13+
return sdk.database.updateDocument('6166c7e8106b3', id,data);
14+
}
15+
16+
17+
export {categoriesOfUser, createCategory, editCategory};

‎src/components/CategoryNavigation/categorynavigation.jsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@ import Tabs from "@mui/material/Tabs";
33
import Tab from "@mui/material/Tab";
44
import Box from "@mui/material/Box";
55
import ActionAreaCard from "../card/card";
6+
import NotesContainer from "../notesContainer/notesContainer";
7+
import NewCard from "../NewNote/newNote";
8+
9+
const buttonStyle = {
10+
display : 'flex',
11+
justifyContent : 'center',
12+
marginTop : '1rem',
13+
marginBottom : '0.5rem'
14+
}
615

716
export default function ScrollableTabsButtonForce(props) {
817
const [value, setValue] = React.useState(0);
@@ -41,15 +50,11 @@ export default function ScrollableTabsButtonForce(props) {
4150
))}
4251
</Tabs>
4352
</Box>
44-
45-
<div className="notes-container">
46-
<ActionAreaCard
47-
title="homeee"
48-
content={
49-
"loerem121111111111111111111111111111111loerem121111111111111111111111111111111loerem121111111111111111111111111111111loerem121111111111111111111111111111111loerem121111111111111111111111111111111loerem121111111111111111111111111111111loerem121111111111111111111111111111111"
50-
}
51-
></ActionAreaCard>
53+
<NotesContainer></NotesContainer>
54+
<div style={buttonStyle}>
55+
<NewCard >Create New Card</NewCard>
5256
</div>
57+
5358
</div>
5459
);
5560
}

‎src/components/ListCategories/ListCategories.jsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import CategoryCard from '../categoryCard/categoryCard'
3+
import './ListCategories.scss'
4+
5+
const ListCategories = (props)=>{
6+
return(
7+
<div className="notes">
8+
<div className="container">
9+
{
10+
props.categories.map(category=>(
11+
<CategoryCard key={category['$id']} title={category.title} count={category.count} id={category['$id']} />
12+
))
13+
}
14+
</div>
15+
</div>
16+
)
17+
}
18+
19+
export default ListCategories;

‎src/components/ListCategories/ListCategories.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.notes {
2+
margin-top : 2rem;
3+
height: 70vh;
4+
margin-bottom: 3rem;
5+
6+
.container {
7+
width: 85%;
8+
margin: auto;
9+
border: 1px solid lightgrey;
10+
padding: 1rem;
11+
display: grid;
12+
height: 100%;
13+
grid-template-columns: repeat(2,1fr);
14+
grid-template-rows : repeat(5,1fr);
15+
overflow: scroll;
16+
17+
}
18+
}

‎src/components/NewNote/newNote.jsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import * as React from 'react';
2+
import Card from '@mui/material/Card';
3+
import CardContent from '@mui/material/CardContent';
4+
import CardMedia from '@mui/material/CardMedia';
5+
import Typography from '@mui/material/Typography';
6+
import { CardActionArea } from '@mui/material';
7+
import TextField from '@mui/material/TextField';
8+
import Dropdown from '../Dropdown/dropdown';
9+
import Box from '@mui/material/Box';
10+
import Button from '@mui/material/Button';
11+
12+
import Modal from '@mui/material/Modal';
13+
import { display } from '@mui/system';
14+
15+
const style = {
16+
position: 'absolute',
17+
top: '50%',
18+
left: '50%',
19+
transform: 'translate(-50%, -50%)',
20+
width: {
21+
xs : '60%',
22+
sm : '50%'
23+
},
24+
bgcolor: 'background.paper',
25+
border: '2px solid #000',
26+
boxShadow: 24,
27+
p: 4,
28+
height : 'auto',
29+
display : 'flex',
30+
flexDirection : 'column',
31+
32+
};
33+
34+
const fieldStyle = {
35+
marginTop : '1rem',
36+
}
37+
38+
const CardStyle = {
39+
maxWidth : {
40+
xs : 250,
41+
sm : 340
42+
},
43+
}
44+
export default function NewCard(props) {
45+
const [open, setOpen] = React.useState(false);
46+
const handleOpen = () => setOpen(true);
47+
const handleClose = () => setOpen(false);
48+
const [title,setTitle] = React.useState('');
49+
const[body,setBody] = React.useState('');
50+
51+
52+
53+
54+
return (
55+
<div>
56+
<Button {...props} onClick={handleOpen} variant="contained">{props.children}</Button>
57+
<Modal
58+
open={open}
59+
onClose={handleClose}
60+
aria-labelledby="modal-modal-title"
61+
aria-describedby="modal-modal-description"
62+
>
63+
<Box sx={style}>
64+
65+
<TextField label="Title" fullWidth value={title} onChange={(event)=>setTitle(event.target.value)} color="primary" focused />
66+
<TextField
67+
id="outlined-multiline-static"
68+
sx = {fieldStyle}
69+
label="Note"
70+
fullWidth
71+
multiline={true}
72+
rows={10}
73+
defaultValue={body}
74+
/>
75+
<Dropdown title={title}></Dropdown>
76+
<Button sx ={fieldStyle} variant="contained">Save</Button>
77+
</Box>
78+
</Modal>
79+
</div>
80+
);
81+
}

‎src/components/categoryCard/categoryCard.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Button from '@mui/material/Button';
1111

1212
import Modal from '@mui/material/Modal';
1313
import { display } from '@mui/system';
14+
import { editCategory } from '../../appwrite/database.appwrite';
1415

1516
const style = {
1617
position: 'absolute',
@@ -49,7 +50,12 @@ export default function CategoryCard(props) {
4950
const [count,setCount] = React.useState(props.count);
5051

5152
const handleChange = ()=>{
52-
console.log('button clicked')
53+
const data = {
54+
"title" : title,
55+
}
56+
editCategory(props.id,data).then(res=>console.log(res), err=>console.log(err));
57+
handleClose();
58+
5359
}
5460

5561

‎src/components/newCategory/newCategory.jsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import * as React from 'react';
2+
import Card from '@mui/material/Card';
3+
import CardContent from '@mui/material/CardContent';
4+
import CardMedia from '@mui/material/CardMedia';
5+
import Typography from '@mui/material/Typography';
6+
import { CardActionArea } from '@mui/material';
7+
import TextField from '@mui/material/TextField';
8+
import Dropdown from '../Dropdown/dropdown';
9+
import Box from '@mui/material/Box';
10+
import Button from '@mui/material/Button';
11+
import { createCategory } from '../../appwrite/database.appwrite';
12+
import Modal from '@mui/material/Modal';
13+
import { display } from '@mui/system';
14+
import { refreshPage } from '../../utils/utils';
15+
16+
const style = {
17+
position: 'absolute',
18+
top: '50%',
19+
left: '50%',
20+
transform: 'translate(-50%, -50%)',
21+
width: {
22+
xs : '60%',
23+
sm : '50%'
24+
},
25+
bgcolor: 'background.paper',
26+
border: '2px solid #000',
27+
boxShadow: 24,
28+
p: 4,
29+
height : 'auto',
30+
display : 'flex',
31+
flexDirection : 'column',
32+
33+
};
34+
35+
const fieldStyle = {
36+
marginTop : '1rem',
37+
}
38+
39+
const CardStyle = {
40+
maxWidth : {
41+
xs : 250,
42+
sm : 340
43+
},
44+
}
45+
export default function NewCategory(props) {
46+
const [open, setOpen] = React.useState(false);
47+
const handleOpen = () => setOpen(true);
48+
const handleClose = () => setOpen(false);
49+
const [title,setTitle] = React.useState('');
50+
51+
const handleSubmit = ()=>{
52+
const data = {
53+
"title" : title,
54+
"user" : props.user,
55+
"count" : 0,
56+
}
57+
createCategory(data).then(res=>{
58+
console.log(res);
59+
handleClose();
60+
refreshPage();
61+
}, err=>console.log(err))
62+
63+
}
64+
65+
66+
67+
68+
69+
70+
return (
71+
<div>
72+
<Button {...props} onClick={handleOpen} variant="contained">{props.children}</Button>
73+
<Modal
74+
open={open}
75+
onClose={handleClose}
76+
aria-labelledby="modal-modal-title"
77+
aria-describedby="modal-modal-description"
78+
>
79+
<Box sx={style}>
80+
81+
<TextField label="Title" fullWidth value={title} onChange={(event)=>setTitle(event.target.value)} color="primary" focused />
82+
83+
<Button sx ={fieldStyle} onClick={handleSubmit} variant="contained">Save</Button>
84+
</Box>
85+
</Modal>
86+
</div>
87+
);
88+
}

‎src/components/notesContainer/notesContainer.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import ActionAreaCard from "../card/card";
3+
import './notesContainer.scss'
4+
5+
const NotesContainer = (props)=>{
6+
return(
7+
<div className="notes">
8+
<div className="container">
9+
<ActionAreaCard title="lolo" content="Ffffffffff"></ActionAreaCard>
10+
</div>
11+
</div>
12+
)
13+
}
14+
15+
export default NotesContainer;

‎src/components/notesContainer/notesContainer.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.notes {
2+
margin-top : 2rem;
3+
height: 70vh;
4+
margin-bottom: 3rem;
5+
6+
.container {
7+
width: 85%;
8+
margin: auto;
9+
border: 1px solid lightgrey;
10+
padding: 1rem;
11+
display: grid;
12+
height: 100%;
13+
grid-template-columns: repeat(2,1fr);
14+
grid-template-rows : repeat(5,1fr);
15+
overflow: scroll;
16+
17+
}
18+
}

0 commit comments

Comments
 (0)