Dates

└── 02-Dates Reminder ├── dates-reminder ├── package-lock.json ├── package.json ├── public │ ├── index.html │ └── p1.jpg └── src │ ├── App.js │ ├── components │ ├── DatesAction.js │ ├── DatesCount.js │ └── DatesList.js │ ├── data.js │ ├── index.css │ └── index.js └── package-lock.json /02-Dates Reminder/dates-reminder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dates-reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.15.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^5.1.3", 10 | "react": "^17.0.2", 11 | "react-bootstrap": "^2.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Dates 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/public/p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bakrgit/dates-reminder/f277ebc3ea89b4b448d9ec13ddd676ca90346c65/02-Dates Reminder/dates-reminder/public/p1.jpg -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/App.js: -------------------------------------------------------------------------------- 1 | import { Button, Col, Container, Row } from "react-bootstrap"; 2 | import React, { useState, useEffect } from 'react' 3 | import { person } from './data' 4 | import DatesCount from './components/DatesCount' 5 | import DatesList from './components/DatesList' 6 | import DatesAction from './components/DatesAction' 7 | function App() { 8 | 9 | const [personData, setPersonData] = useState(person) 10 | //dafadf 11 | const onDelete = () => { 12 | setPersonData([]) 13 | } 14 | const onViewData = () => { 15 | setPersonData(person) 16 | } 17 | useEffect(() => { 18 | setPersonData([]) 19 | }, []) 20 | return ( 21 |

22 | 23 | 24 | 25 | 26 | 27 |

28 | ); 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/components/DatesAction.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Row, Col } from 'react-bootstrap' 3 | const DatesAction = ({deleteData,onViewData}) => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default DatesAction 15 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/components/DatesCount.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Row, Col } from 'react-bootstrap' 3 | 4 | const DatesCount = ({ person }) => { 5 | return ( 6 | 7 | 8 | لديك {person.length} مواعيد 9 | 10 | 11 | ) 12 | } 13 | 14 | export default DatesCount 15 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/components/DatesList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Row, Col } from 'react-bootstrap' 3 | const DatesList = ({ person }) => { 4 | return ( 5 | 6 | 7 |

8 | {person.length ? (person.map((item) => { 9 | return ( 10 |

11 |

12 |

13 |

{item.name}

14 |

{item.date}

15 |

16 |

17 | ) 18 | })) :

لا يوجد مواعيد اليوم

} 19 | 20 |

21 | 22 | 23 | ) 24 | } 25 | 26 | export default DatesList 27 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/data.js: -------------------------------------------------------------------------------- 1 | export const person = [{ id: '0', name: 'حسن', date: '5 مساء', img: 'p1.jpg' }, 2 | { id: '1', name: 'محمد', date: '4 مساء', img: 'p1.jpg' }, 3 | { id: '2', name: 'على', date: '3 مساء', img: 'p1.jpg' }, 4 | { id: '3', name: 'محمود', date: '2 مساء', img: 'p1.jpg' }, 5 | { id: '4', name: 'حسن', date: '1 مساء', img: 'p1.jpg' }, 6 | { id: '5', name: 'حسن', date: '1 مساء', img: 'p1.jpg' }, 7 | { id: '6', name: 'حسن', date: '1 مساء', img: 'p1.jpg' },] -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/index.css: -------------------------------------------------------------------------------- 1 | .color-body { 2 | height: 100vh; 3 | background-color: #f8f8f8; 4 | } 5 | .font { 6 | font-family: "Almarai", sans-serif; 7 | font-family: "Cairo", sans-serif; 8 | font-size: 20px; 9 | } 10 | 11 | .rectangle { 12 | height: 600px; 13 | border-radius: 15px; 14 | background-color: #ffffff; 15 | box-shadow: 1px 4px 4px 1px rgba(85, 85, 85, 0.25); 16 | } 17 | 18 | .dates-count { 19 | color: #555555; 20 | font-weight: 600; 21 | margin-bottom: 20px; 22 | } 23 | 24 | .btn-style { 25 | width: 200px; 26 | border-radius: 8px; 27 | color: white; 28 | background-color: #224f61; 29 | } 30 | 31 | .img-avatar { 32 | height: 60px; 33 | width: 60px; 34 | border-radius: 50%; 35 | } 36 | 37 | .mt-0 { 38 | margin-top: 0; 39 | } 40 | -------------------------------------------------------------------------------- /02-Dates Reminder/dates-reminder/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import 'bootstrap/dist/css/bootstrap.min.css'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | -------------------------------------------------------------------------------- /02-Dates Reminder/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "@babel/runtime": { 6 | "version": "7.16.3", 7 | "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", 8 | "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", 9 | "requires": { 10 | "regenerator-runtime": "^0.13.4" 11 | } 12 | }, 13 | "@popperjs/core": { 14 | "version": "2.11.0", 15 | "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz", 16 | "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==" 17 | }, 18 | "@react-aria/ssr": { 19 | "version": "3.1.0", 20 | "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.0.tgz", 21 | "integrity": "sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==", 22 | "requires": { 23 | "@babel/runtime": "^7.6.2" 24 | } 25 | }, 26 | "@restart/context": { 27 | "version": "2.1.4", 28 | "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", 29 | "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" 30 | }, 31 | "@restart/hooks": { 32 | "version": "0.3.27", 33 | "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz", 34 | "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==", 35 | "requires": { 36 | "dequal": "^2.0.2" 37 | } 38 | }, 39 | "@restart/ui": { 40 | "version": "0.2.3", 41 | "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-0.2.3.tgz", 42 | "integrity": "sha512-FDhtjIR9QvUfMwvFsgVurRA1qdYxM0F0S07acywjG7gNI2YmQo78rtCYIe553V/pyBjEjaKAg3fzBFCocFTqyQ==", 43 | "requires": { 44 | "@babel/runtime": "^7.13.16", 45 | "@popperjs/core": "^2.10.1", 46 | "@react-aria/ssr": "^3.0.1", 47 | "@restart/hooks": "^0.4.0", 48 | "@types/warning": "^3.0.0", 49 | "dequal": "^2.0.2", 50 | "dom-helpers": "^5.2.0", 51 | "prop-types": "^15.7.2", 52 | "uncontrollable": "^7.2.1", 53 | "warning": "^4.0.3" 54 | }, 55 | "dependencies": { 56 | "@restart/hooks": { 57 | "version": "0.4.1", 58 | "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.1.tgz", 59 | "integrity": "sha512-87UMGZcFwbj0Gr+8eEBAzL6H8xF5pMwq/S3LWeFK9cg4+lTqLFMsiVQFT4ncMJzqgpdD7T6ktF8PsEHeN2O+MQ==", 60 | "requires": { 61 | "dequal": "^2.0.2" 62 | } 63 | } 64 | } 65 | }, 66 | "@types/invariant": { 67 | "version": "2.2.35", 68 | "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", 69 | "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" 70 | }, 71 | "@types/prop-types": { 72 | "version": "15.7.4", 73 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", 74 | "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" 75 | }, 76 | "@types/react": { 77 | "version": "17.0.37", 78 | "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz", 79 | "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==", 80 | "requires": { 81 | "@types/prop-types": "*", 82 | "@types/scheduler": "*", 83 | "csstype": "^3.0.2" 84 | } 85 | }, 86 | "@types/react-transition-group": { 87 | "version": "4.4.4", 88 | "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", 89 | "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", 90 | "requires": { 91 | "@types/react": "*" 92 | } 93 | }, 94 | "@types/scheduler": { 95 | "version": "0.16.2", 96 | "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", 97 | "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" 98 | }, 99 | "@types/warning": { 100 | "version": "3.0.0", 101 | "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", 102 | "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" 103 | }, 104 | "bootstrap": { 105 | "version": "5.1.3", 106 | "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", 107 | "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" 108 | }, 109 | "classnames": { 110 | "version": "2.3.1", 111 | "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", 112 | "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" 113 | }, 114 | "csstype": { 115 | "version": "3.0.10", 116 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz", 117 | "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==" 118 | }, 119 | "dequal": { 120 | "version": "2.0.2", 121 | "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz", 122 | "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==" 123 | }, 124 | "dom-helpers": { 125 | "version": "5.2.1", 126 | "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", 127 | "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", 128 | "requires": { 129 | "@babel/runtime": "^7.8.7", 130 | "csstype": "^3.0.2" 131 | } 132 | }, 133 | "invariant": { 134 | "version": "2.2.4", 135 | "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", 136 | "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", 137 | "requires": { 138 | "loose-envify": "^1.0.0" 139 | } 140 | }, 141 | "js-tokens": { 142 | "version": "4.0.0", 143 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 144 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 145 | }, 146 | "loose-envify": { 147 | "version": "1.4.0", 148 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 149 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 150 | "requires": { 151 | "js-tokens": "^3.0.0 || ^4.0.0" 152 | } 153 | }, 154 | "object-assign": { 155 | "version": "4.1.1", 156 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 157 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 158 | }, 159 | "prop-types": { 160 | "version": "15.7.2", 161 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", 162 | "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", 163 | "requires": { 164 | "loose-envify": "^1.4.0", 165 | "object-assign": "^4.1.1", 166 | "react-is": "^16.8.1" 167 | } 168 | }, 169 | "prop-types-extra": { 170 | "version": "1.1.1", 171 | "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", 172 | "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", 173 | "requires": { 174 | "react-is": "^16.3.2", 175 | "warning": "^4.0.0" 176 | } 177 | }, 178 | "react-bootstrap": { 179 | "version": "2.0.2", 180 | "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.2.tgz", 181 | "integrity": "sha512-QuMqJ+WJmd6dUyOys6OF3nr6T/FjUVAoEMbSjsFrwVufJtvMox0SU1Dvz/cDID+Dl6Rz2RLcJzyqkdl+DEK2Gg==", 182 | "requires": { 183 | "@babel/runtime": "^7.14.0", 184 | "@restart/context": "^2.1.4", 185 | "@restart/hooks": "^0.3.26", 186 | "@restart/ui": "^0.2.3", 187 | "@types/invariant": "^2.2.33", 188 | "@types/prop-types": "^15.7.3", 189 | "@types/react": ">=16.14.8", 190 | "@types/react-transition-group": "^4.4.1", 191 | "@types/warning": "^3.0.0", 192 | "classnames": "^2.3.1", 193 | "dom-helpers": "^5.2.1", 194 | "invariant": "^2.2.4", 195 | "prop-types": "^15.7.2", 196 | "prop-types-extra": "^1.1.0", 197 | "react-transition-group": "^4.4.1", 198 | "uncontrollable": "^7.2.1", 199 | "warning": "^4.0.3" 200 | } 201 | }, 202 | "react-is": { 203 | "version": "16.13.1", 204 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", 205 | "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" 206 | }, 207 | "react-lifecycles-compat": { 208 | "version": "3.0.4", 209 | "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", 210 | "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" 211 | }, 212 | "react-transition-group": { 213 | "version": "4.4.2", 214 | "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", 215 | "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", 216 | "requires": { 217 | "@babel/runtime": "^7.5.5", 218 | "dom-helpers": "^5.0.1", 219 | "loose-envify": "^1.4.0", 220 | "prop-types": "^15.6.2" 221 | } 222 | }, 223 | "regenerator-runtime": { 224 | "version": "0.13.9", 225 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", 226 | "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" 227 | }, 228 | "uncontrollable": { 229 | "version": "7.2.1", 230 | "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", 231 | "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", 232 | "requires": { 233 | "@babel/runtime": "^7.6.3", 234 | "@types/react": ">=16.9.11", 235 | "invariant": "^2.2.4", 236 | "react-lifecycles-compat": "^3.0.4" 237 | } 238 | }, 239 | "warning": { 240 | "version": "4.0.3", 241 | "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", 242 | "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", 243 | "requires": { 244 | "loose-envify": "^1.0.0" 245 | } 246 | } 247 | } 248 | } 249 | --------------------------------------------------------------------------------