diff --git a/facebook-clone/dp.json b/facebook-clone/dp.json new file mode 100644 index 0000000..ddc6213 --- /dev/null +++ b/facebook-clone/dp.json @@ -0,0 +1,464 @@ +{ + "posts":[ + { + "id": 7736, + "uid": "fbab9fe3-70af-4165-81f7-26ec841a737c", + "password": "5dW3GeQsaF", + "first_name": "Rickey", + "last_name": "Crona", + "username": "rickey.crona", + "email": "rickey.crona@email.com", + "avatar": "https://robohash.org/situtratione.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/274655623_409437167605698_4888007874703716601_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=r9KzS56l0g4AX9xnr3Z&_nc_ht=scontent.fixc5-1.fna&oh=00_AT_i_FEjhPVnZ14iuAdebHBIMyikTPcDGixG3ziKgIyiMA&oe=62250E49", + "friend": "false", + "likes": "200", + "video": "https://fb.watch/bAiGFNRBul/", + "video_disc" : "FilterCopy | Office First Month VS Last Month | Ft. Saloni Gaur ", + "post_disc": "Maybe 🤓", + "gender": "Agender", + "phone_number": "+291 107.535.5453 x62693", + "social_insurance_number": "373413491", + "date_of_birth": "1969-09-01", + "employment": { + "title": "Consulting Orchestrator", + "key_skill": "Proactive" + }, + "address": { + "city": "Lashandamouth", + "street_name": "Upton Squares", + "street_address": "597 Ledner Views", + "zip_code": "36740", + "state": "Delaware", + "country": "United States", + "coordinates": { + "lat": -55.979467921560925, + "lng": -72.20824768959746 + } + }, + "credit_card": { + "cc_number": "5260-8027-8585-2578" + }, + "subscription": { + "plan": "Gold", + "status": "Active", + "payment_method": "Visa checkout", + "term": "Payment in advance" + } + }, + { + "id": 1862, + "uid": "e22d88c8-7fd0-461a-951c-3cd1fd018460", + "password": "Kt2LdINns7", + "first_name": "Cammy", + "last_name": "Jerde", + "username": "cammy.jerde", + "email": "cammy.jerde@email.com", + "avatar": "https://robohash.org/idquidemest.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/274861491_2943492592559530_3683646985298062683_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=C0SmX0I4ppQAX8HWxWW&_nc_ht=scontent.fixc5-1.fna&oh=00_AT9UYDnJ-OOrqDE4uDrxq3Q1hkIukT5By0Lp4Y2SmOKR6A&oe=6223F80F", + "friend": "false", + "likes": "36", + "video": "https://fb.watch/bAcDSYSEJh/", + "video_disc": "Mechanical Engineer की पड़ोस में आ गयी Software Engineer", + "post_disc": "What it feels like when solving problems that requires RECURSION.", + "gender": "Genderqueer", + "phone_number": "+502 562.659.1993 x8059", + "social_insurance_number": "102975851", + "date_of_birth": "1959-05-20", + "employment": { + "title": "Corporate Construction Associate", + "key_skill": "Communication" + }, + "address": { + "city": "Lake Russel", + "street_name": "Tania Motorway", + "street_address": "878 Harrison Course", + "zip_code": "33756", + "state": "Mississippi", + "country": "United States", + "coordinates": { + "lat": 53.417096423903416, + "lng": 179.43950181961873 + } + }, + "credit_card": { + "cc_number": "4146-9174-5008-1759" + }, + "subscription": { + "plan": "Gold", + "status": "Blocked", + "payment_method": "Paypal", + "term": "Annual" + } + }, + { + "id": 4620, + "uid": "947ebde7-8ddb-4eba-8298-02fce4cab107", + "password": "4Qz87xZ6RP", + "first_name": "Lindsay", + "last_name": "Hirthe", + "username": "lindsay.hirthe", + "email": "lindsay.hirthe@email.com", + "avatar": "https://robohash.org/etestodio.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/275122060_126324309937989_9160177941328398736_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=vBq6OEcocQQAX9lFZoF&_nc_oc=AQnmSmmGUiGGX-vBJ4Dud1vHusTsIR4Z9aCDFi6ixGWWtHVVeJDzwxg4d3OeMhm3JkONEPseirknqRpnkyO65m-p&_nc_ht=scontent.fixc5-1.fna&oh=00_AT-ia786rT58uZoi8xRhpOIQRJl3-e3gGsbrMNQsdRPSQA&oe=62245197", + "friend": "false", + "likes": "80", + "post_disc": "", + "gender": "Female", + "video_disc": "Raghav Funny Commentry 😂", + "video": "https://fb.watch/bAcH0sGYzm/", + "phone_number": "+598 1-960-292-3035 x8215", + "social_insurance_number": "976987578", + "date_of_birth": "1964-04-20", + "employment": { + "title": "Mining Producer", + "key_skill": "Technical savvy" + }, + "address": { + "city": "Lake Senaberg", + "street_name": "O'Reilly Station", + "street_address": "87208 Dickens Plaza", + "zip_code": "89895-0702", + "state": "Indiana", + "country": "United States", + "coordinates": { + "lat": -56.87769874605271, + "lng": -65.84188861811333 + } + }, + "credit_card": { + "cc_number": "5432-6569-3494-2703" + }, + "subscription": { + "plan": "Essential", + "status": "Idle", + "payment_method": "Visa checkout", + "term": "Full subscription" + } + }, + { + "id": 8519, + "uid": "c75816e2-7bff-449e-be4e-54b6125c6c3e", + "password": "WclOEZ6n4q", + "first_name": "Erasmo", + "last_name": "Macejkovic", + "username": "erasmo.macejkovic", + "email": "erasmo.macejkovic@email.com", + "avatar": "https://robohash.org/estvoluptatemat.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/275006988_101693095804733_7491052886748428199_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=58-esdlnKXsAX8Two_B&_nc_ht=scontent.fixc5-1.fna&oh=00_AT9Dfv859rG5_vFKR3K6kq8u9qtFE2ryTYMHEWgAzH-PHg&oe=622527A1", + "friend": "false", + "likes": "89", + "post_disc": "", + "video": "https://fb.watch/bAcKV9KYOP/", + "video_disc": "School PTM Mein Aaya Gangster \n School Ptm Mein Aaya Gangster", + "gender": "Non-binary", + "phone_number": "+264 141-121-5703 x99641", + "social_insurance_number": "905937256", + "date_of_birth": "1974-06-29", + "employment": { + "title": "Senior Construction Technician", + "key_skill": "Proactive" + }, + "address": { + "city": "Angleaview", + "street_name": "Penelope Mission", + "street_address": "39277 Carlo Highway", + "zip_code": "95310-8853", + "state": "New York", + "country": "United States", + "coordinates": { + "lat": -12.840612560364178, + "lng": -79.17635459697486 + } + }, + "credit_card": { + "cc_number": "4657396190319" + }, + "subscription": { + "plan": "Silver", + "status": "Blocked", + "payment_method": "Cash", + "term": "Full subscription" + } + }, + { + "id": 2074, + "uid": "017c40aa-ea0b-4ecf-b38a-2fce0325dfbf", + "password": "lmWihrxAS4", + "first_name": "Yuk", + "last_name": "Prosacco", + "username": "yuk.prosacco", + "email": "yuk.prosacco@email.com", + "avatar": "https://robohash.org/laudantiumconsequaturaut.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/275000948_1003819337007697_6871865786893497669_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=gPXgxDNHDQIAX-cIXM0&_nc_ht=scontent.fixc5-1.fna&oh=00_AT-NfWNTZZL7xcgHs6tZqgKtB0AgVQoiakPKs451cg4H8g&oe=62255A96", + "friend": "false", + "likes": "43", + "video_disc": "Raghav Funny Commentry 😂", + "video": "https://fb.watch/bAcH0sGYzm/", + "post_disc": "", + "gender": "Female", + "phone_number": "+36 1-772-855-0204 x3082", + "social_insurance_number": "628424590", + "date_of_birth": "1992-07-08", + "employment": { + "title": "Farming Analyst", + "key_skill": "Work under pressure" + }, + "address": { + "city": "Josefabury", + "street_name": "Mack Keys", + "street_address": "1294 Oberbrunner Mount", + "zip_code": "22722-2595", + "state": "New Mexico", + "country": "United States", + "coordinates": { + "lat": 39.30622053175691, + "lng": -89.458750284981 + } + }, + "credit_card": { + "cc_number": "4724436346242" + }, + "subscription": { + "plan": "Gold", + "status": "Active", + "payment_method": "Google Pay", + "term": "Monthly" + } + }, + { + "id": 2848, + "uid": "fef629db-619e-4ec8-a7a4-491145a4223c", + "password": "niLIyU1t76", + "first_name": "Tifany", + "last_name": "Lesch", + "username": "tifany.lesch", + "email": "tifany.lesch@email.com", + "avatar": "https://robohash.org/facilisestsequi.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/274747745_368898681903368_4263506468683739177_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=gq6ij4qG0PUAX-ZK5W5&_nc_ht=scontent.fixc5-1.fna&oh=00_AT-5zd3oKh8HEp-NW28RtwInZxuKCLuMTf4iauOiecBr8w&oe=6223DF09", + "friend": "false", + "likes": "100", + "video_disc": "Raghav Funny Commentry 😂", + "video": "https://fb.watch/bAcH0sGYzm/", + "post_disc": "", + "gender": "Genderqueer", + "phone_number": "+1-869 407.984.3434 x638", + "social_insurance_number": "712484385", + "date_of_birth": "1973-11-09", + "employment": { + "title": "Corporate Coordinator", + "key_skill": "Confidence" + }, + "address": { + "city": "Rickiestad", + "street_name": "Bayer Meadows", + "street_address": "972 Lubowitz Pine", + "zip_code": "95876-1934", + "state": "Tennessee", + "country": "United States", + "coordinates": { + "lat": 42.93488740021735, + "lng": 41.50697699205358 + } + }, + "credit_card": { + "cc_number": "4473883592870" + }, + "subscription": { + "plan": "Free Trial", + "status": "Active", + "payment_method": "Paypal", + "term": "Payment in advance" + } + }, + { + "id": 8704, + "uid": "7639bd22-0481-4b09-b88b-59e11d09c530", + "password": "F0yB97KdE4", + "first_name": "Cami", + "last_name": "Weber", + "username": "cami.weber", + "email": "cami.weber@email.com", + "avatar": "https://robohash.org/officiisquiaiste.png?size=300x300\u0026set=set1", + "post": "https://scontent.fdel13-1.fna.fbcdn.net/v/t39.30808-6/275103457_1841439486054646_9202387294730349840_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=xGlipUta9oUAX-xUTY2&_nc_ht=scontent.fdel13-1.fna&oh=00_AT8_uv5CWtmGd9BTHQV430vA0KFt0R3__KxEay9P69cPVg&oe=62243059", + "friend": "false", + "likes": "55", + "video": "https://fb.watch/bAcDSYSEJh/", + "video_disc": "Mechanical Engineer की पड़ोस में आ गयी Software Engineer", + "post_disc": "", + "gender": "Genderqueer", + "phone_number": "+253 602-810-3615 x86547", + "social_insurance_number": "261110787", + "date_of_birth": "1980-12-25", + "employment": { + "title": "Consulting Assistant", + "key_skill": "Fast learner" + }, + "address": { + "city": "Lake Hermina", + "street_name": "Mraz Camp", + "street_address": "7027 Mervin Flats", + "zip_code": "28256-7232", + "state": "Nevada", + "country": "United States", + "coordinates": { + "lat": -45.71374143001739, + "lng": 177.69835679133575 + } + }, + "credit_card": { + "cc_number": "6771-8922-3525-4889" + }, + "subscription": { + "plan": "Bronze", + "status": "Idle", + "payment_method": "Debit card", + "term": "Annual" + } + }, + { + "id": 2105, + "uid": "4a0a0231-7df7-4e45-9151-4319dc64aacf", + "password": "GTgoZhMlzx", + "first_name": "Latonia", + "last_name": "Haag", + "username": "latonia.haag", + "email": "latonia.haag@email.com", + "avatar": "https://robohash.org/inciduntdistinctioveniam.png?size=300x300\u0026set=set1", + "post": "https://scontent.fixc5-1.fna.fbcdn.net/v/t39.30808-6/274857311_3125214291083680_3754705970788641489_n.jpg?_nc_cat=105&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=szyTcngUOqEAX-Z5yIt&tn=Cxb3Ffh-tVewk8fq&_nc_ht=scontent.fixc5-1.fna&oh=00_AT-_Ge5I88tI2aDpmex6e1PkZiBXcZVmFtAaIqzie9SnbQ&oe=6224FE5F", + "friend": "true", + "likes": "7", + "post_disc": "", + "video": "https://fb.watch/bAcDSYSEJh/", + "video_disc": "Mechanical Engineer की पड़ोस में आ गयी Software Engineer", + "gender": "Bigender", + "phone_number": "+421 145.046.3988", + "social_insurance_number": "981875982", + "date_of_birth": "1999-10-26", + "employment": { + "title": "Mining Coordinator", + "key_skill": "Networking skills" + }, + "address": { + "city": "Jacobsview", + "street_name": "Sipes Corners", + "street_address": "59798 Ozzie Islands", + "zip_code": "12850", + "state": "Florida", + "country": "United States", + "coordinates": { + "lat": -33.52611805764725, + "lng": -38.74129136573271 + } + }, + "credit_card": { + "cc_number": "4583217234641" + }, + "subscription": { + "plan": "Platinum", + "status": "Idle", + "payment_method": "Apple Pay", + "term": "Full subscription" + } + }, + { + "id": 1342, + "uid": "09717bd7-1b99-493c-9ca2-24c2fd19286d", + "password": "ePYHwgsDZW", + "first_name": "Laquita", + "last_name": "Yost", + "username": "laquita.yost", + "email": "laquita.yost@email.com", + "avatar": "https://robohash.org/eumeaenim.png?size=300x300\u0026set=set1", + "post": "https://scontent.fdel13-1.fna.fbcdn.net/v/t39.30808-6/274727297_2092253297610643_4280264683606683003_n.jpg?_nc_cat=102&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=ZRu176Ut0pgAX-v0lBm&_nc_ht=scontent.fdel13-1.fna&oh=00_AT_NN3DLiAz1OVrh5vsq2vywc-bEZL0AEUl7njMozRjC-w&oe=62245A1A", + "friend": "true", + "likes": "100", + "post_disc": " ", + "video": "https://fb.watch/bAcKV9KYOP/", + "video_disc": "School PTM Mein Aaya Gangster \n School Ptm Mein Aaya Gangster", + "gender": "Non-binary", + "phone_number": "+249 230.299.8887 x84250", + "social_insurance_number": "454334343", + "date_of_birth": "1988-10-03", + "employment": { + "title": "Construction Representative", + "key_skill": "Fast learner" + }, + "address": { + "city": "North Toi", + "street_name": "Feest Spring", + "street_address": "173 Jacobs Park", + "zip_code": "21526", + "state": "New Jersey", + "country": "United States", + "coordinates": { + "lat": -53.26691848137751, + "lng": 116.62257244634321 + } + }, + "credit_card": { + "cc_number": "6771-8952-3634-2140" + }, + "subscription": { + "plan": "Standard", + "status": "Blocked", + "payment_method": "Google Pay", + "term": "Monthly" + } + }, + { + "id": 6118, + "uid": "079d48e6-7080-431b-95ca-bc67bfe5bc35", + "password": "fnulzG7ZS2", + "first_name": "Gerry", + "last_name": "Kub", + "username": "gerry.kub", + "email": "gerry.kub@email.com", + "avatar": "https://robohash.org/etdictaexplicabo.png?size=300x300\u0026set=set1", + "post": "https://scontent.fdel13-1.fna.fbcdn.net/v/t39.30808-6/274370990_1484649558603507_5509707285914762371_n.jpg?_nc_cat=102&ccb=1-5&_nc_sid=5cd70e&_nc_ohc=ZMh6-keSW04AX_cXgyV&tn=Cxb3Ffh-tVewk8fq&_nc_ht=scontent.fdel13-1.fna&oh=00_AT9p9lb1Us9p9oW_WHCahaCUmlwGjhd0ky-Pev4iD5MZEQ&oe=6224B4B6", + "friend": "false", + "likes": "10", + "post_disc": "Dude: Hey, what's your address?\n Me: 192.168.1.17 \nDude: No, I mean your home address. \nMe: 127.0.0.1 \nDude: No! I mean where do you actually live! \nMe:", + "gender": "Male", + "video": "https://fb.watch/bAcKV9KYOP/", + "video_disc": "School PTM Mein Aaya Gangster \n School Ptm Mein Aaya Gangster", + "phone_number": "+257 500.955.6782", + "social_insurance_number": "459619375", + "date_of_birth": "1991-06-26", + "employment": { + "title": "Corporate Sales Assistant", + "key_skill": "Fast learner" + }, + "address": { + "city": "Franeckiberg", + "street_name": "Yvette Views", + "street_address": "680 Wiegand Mountain", + "zip_code": "73158", + "state": "Indiana", + "country": "United States", + "coordinates": { + "lat": 2.741745385276417, + "lng": -11.304556365162824 + } + }, + "credit_card": { + "cc_number": "5134-5294-1390-4612" + }, + "subscription": { + "plan": "Professional", + "status": "Blocked", + "payment_method": "Apple Pay", + "term": "Monthly" + } + } +] , + "comments": [ + { + "id": 1, + "body": "some comment", + "postId": 1 + } + ], + "profile": { + "name": "typicode" + } +} \ No newline at end of file diff --git a/facebook-clone/package-lock.json b/facebook-clone/package-lock.json index 61528ab..c5c0022 100644 --- a/facebook-clone/package-lock.json +++ b/facebook-clone/package-lock.json @@ -10,13 +10,20 @@ "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", + "@mui/icons-material": "^5.4.4", "@mui/material": "^5.4.4", + "@mui/styled-engine-sc": "^5.4.2", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", + "axios": "^0.26.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", + "react-player": "^2.9.0", "react-scripts": "5.0.0", + "styled-components": "^5.3.3", + "uuid": "^8.3.2", "web-vitals": "^2.1.4" } }, @@ -2130,6 +2137,11 @@ } } }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "node_modules/@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -2936,6 +2948,31 @@ } } }, + "node_modules/@mui/icons-material": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.4.tgz", + "integrity": "sha512-7zoRpjO8vsd+bPvXq6rtXu0V8Saj70X09dtTQogZmxQKabrYW3g7+Yym7SCRA7IYVF3ysz2AvdQrGD1P/sGepg==", + "dependencies": { + "@babel/runtime": "^7.17.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "5.4.4", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.4.tgz", @@ -3036,6 +3073,30 @@ } } }, + "node_modules/@mui/styled-engine-sc": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.4.2.tgz", + "integrity": "sha512-t8h5AtHn899WzHkJXWjWcPkEG2NCmX0UZMIBEPv58rMHyJiByoYzFnA/kGVS1/oCSlDYbBlvFmfMaNalOLPp8g==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/styled-components": "^5.1.14", + "styled-components": "^5.3.1" + }, + "peerDependenciesMeta": { + "@types/styled-components": { + "optional": true + } + } + }, "node_modules/@mui/system": { "version": "5.4.4", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.4.4.tgz", @@ -4856,6 +4917,14 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "dependencies": { + "follow-redirects": "^1.14.8" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -5108,6 +5177,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz", + "integrity": "sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5420,6 +5509,11 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5896,6 +5990,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.1.4", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz", @@ -6080,6 +6182,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -11143,6 +11255,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "node_modules/loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -11308,6 +11425,11 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -13617,11 +13739,39 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, + "node_modules/react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-player": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz", + "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==", + "dependencies": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14382,6 +14532,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -14779,6 +14934,48 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz", + "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/styled-components/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, "node_modules/stylehacks": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.3.tgz", @@ -17933,6 +18130,11 @@ "@emotion/utils": "^1.1.0" } }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -18524,6 +18726,14 @@ "react-is": "^17.0.2" } }, + "@mui/icons-material": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.4.tgz", + "integrity": "sha512-7zoRpjO8vsd+bPvXq6rtXu0V8Saj70X09dtTQogZmxQKabrYW3g7+Yym7SCRA7IYVF3ysz2AvdQrGD1P/sGepg==", + "requires": { + "@babel/runtime": "^7.17.2" + } + }, "@mui/material": { "version": "5.4.4", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.4.tgz", @@ -18563,6 +18773,14 @@ "prop-types": "^15.7.2" } }, + "@mui/styled-engine-sc": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.4.2.tgz", + "integrity": "sha512-t8h5AtHn899WzHkJXWjWcPkEG2NCmX0UZMIBEPv58rMHyJiByoYzFnA/kGVS1/oCSlDYbBlvFmfMaNalOLPp8g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@mui/system": { "version": "5.4.4", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.4.4.tgz", @@ -19877,6 +20095,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, + "axios": { + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "requires": { + "follow-redirects": "^1.14.8" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -20064,6 +20290,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-styled-components": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz", + "integrity": "sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -20314,6 +20557,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -20679,6 +20927,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-declaration-sorter": { "version": "6.1.4", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz", @@ -20788,6 +21041,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -24449,6 +24712,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -24580,6 +24848,11 @@ "fs-monkey": "1.0.3" } }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -26120,11 +26393,34 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, + "react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-player": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz", + "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==", + "requires": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -26683,6 +26979,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -26982,6 +27283,38 @@ "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", "requires": {} }, + "styled-components": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz", + "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + } + } + }, "stylehacks": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.3.tgz", diff --git a/facebook-clone/package.json b/facebook-clone/package.json index 1d92553..dbd7c29 100644 --- a/facebook-clone/package.json +++ b/facebook-clone/package.json @@ -5,13 +5,20 @@ "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", + "@mui/icons-material": "^5.4.4", "@mui/material": "^5.4.4", + "@mui/styled-engine-sc": "^5.4.2", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", + "axios": "^0.26.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", + "react-player": "^2.9.0", "react-scripts": "5.0.0", + "styled-components": "^5.3.3", + "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/facebook-clone/public/index.html b/facebook-clone/public/index.html index aa069f2..3b49e15 100644 --- a/facebook-clone/public/index.html +++ b/facebook-clone/public/index.html @@ -24,6 +24,15 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + React App diff --git a/facebook-clone/src/App.js b/facebook-clone/src/App.js index 3784575..9aacb32 100644 --- a/facebook-clone/src/App.js +++ b/facebook-clone/src/App.js @@ -1,23 +1,17 @@ -import logo from './logo.svg'; import './App.css'; +import HomePost from './components/HomePost'; +import MediaPost from './components/MediaPost'; +import PostInput from './components/PostInput'; + function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+

hello first time using mui

+ {/* //// */} + + +
); } diff --git a/facebook-clone/src/components/DeletePost.jsx b/facebook-clone/src/components/DeletePost.jsx new file mode 100644 index 0000000..73ad4fc --- /dev/null +++ b/facebook-clone/src/components/DeletePost.jsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import MoreVertIcon from "@mui/icons-material/MoreVert"; +import { Context } from './PostContext'; + +export default function BasicMenu( {key}) { + const [anchorEl, setAnchorEl] = React.useState(null); + const { user, setUser} = React.useContext(Context) + const open = Boolean(anchorEl); + const handleClick = (event) => { + + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + console.log(key); + setAnchorEl(null); + }; + + + const handleDelete = () => { + // find index of todo from id + const index = user.findIndex((users) => users.id === key); + + // remove todo + user.splice(index, 1); + + // update the state + setUser([...user]); + }; + + return ( +
+ + + Delete + +
+ ); +} diff --git a/facebook-clone/src/components/HomePost.jsx b/facebook-clone/src/components/HomePost.jsx new file mode 100644 index 0000000..451bc4d --- /dev/null +++ b/facebook-clone/src/components/HomePost.jsx @@ -0,0 +1,259 @@ +import React, { useEffect, useContext, useState } from 'react' +import { Avatar, Button, Card, CardContent, CardHeader, CardMedia, Collapse, IconButton, Typography } from '@mui/material'; +import { red } from '@mui/material/colors'; +import styles from "./style.module.css" +import { v4 } from 'uuid'; +import ReactPlayer from 'react-player'; + +import axios from "axios"; +import { Box } from '@mui/system'; +import ThumbUpIcon from '@mui/icons-material/ThumbUp'; +import BasicMenu from './DeletePost'; +import { Comment, ExpandMore } from '@mui/icons-material'; +import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined'; +import { Context } from './PostContext'; +import ShareIcon from '@mui/icons-material/Share'; + +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import MoreVertIcon from "@mui/icons-material/MoreVert"; +import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; +import { styled } from "@mui/material/styles"; + +const CustomWidthTooltip = styled(({ className, ...props }) => ( + +))({ + [`& .${tooltipClasses.tooltip}`]: { + fontSize: 30, + } +}); + + + +const HomePost = () => { + + const { user, setUser } = useContext(Context); + + const [expanded, setExpanded] = React.useState(false); + + const [comment, setComment] = useState("") + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + + + useEffect(() => { + fetchUsers(); + }, []); + + const fetchUsers = () => { + axios + .get('http://localhost:3000/posts') + .then((res) => { + console.log(res); + setUser(res.data); + }) + .catch((err) => { + console.log(err); + }); + }; + + const onChangeHandle = (e) => { + setComment(e.currentTarget.value); + + } + + const handleFormSubmit = (event) => { + event.preventDefault(); + + // check if the value is empty + if (comment.trim().length === 0) { + alert("Please enter a value!"); + return; + } + + // create a new todo + const comm = { + id: v4, + comment: comment, + } + + // add todo to the state + setUser([comm, ...user]); + + // clear the value of task + setComment(""); + }; + + + // const PostUsers = () => { + // axios + // .post('https://jsonservermock.herokuapp.com/posts', { + // ...user, + // comment, + // }) + // .then((res) => { + // console.log(res); + // setUser(res.data); + // }) + // .catch((err) => { + // console.log(err); + // }); + // }; + + const longText = "👍 😂 😍 🥰 😡"; + + + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + console.log(event.id, event) + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleDelete = (itemToDelete) => { + console.log(itemToDelete.id) + const userList = user.filter((e) => e.id !== itemToDelete.id); + setUser(userList); + }; + + + return ( +
+ + {user.map((user) => ( + + + + R + + } + action={ +
+ + + Delete + +
+ } + title={user.username} + subheader="September 14, 2016" + + + /> + + + + + {user.post_disc} + + + + + + {user.likes} + + + + + + +

Like

+ + + + + + +

Comment

+ + + +

Like

+ + + + + + R + + } + title={ +
+ + +
+ + + } + + /> + {/* {user.comment.map((comments) => ( +
  • + {comments.commented} +
    • + ))} */} +     +     + + + ))} +     +
    + ) +} + +export default HomePost \ No newline at end of file diff --git a/facebook-clone/src/components/MediaPost.jsx b/facebook-clone/src/components/MediaPost.jsx new file mode 100644 index 0000000..c71097f --- /dev/null +++ b/facebook-clone/src/components/MediaPost.jsx @@ -0,0 +1,182 @@ + +import React, { useEffect, useContext, useState } from 'react' +import { Avatar, Button, Card, CardContent, CardHeader, CardMedia, Collapse, IconButton, Typography } from '@mui/material'; +import { red } from '@mui/material/colors'; +import styles from "./style.module.css" +import { v4 } from 'uuid'; +import ReactPlayer from 'react-player'; + +import ShareIcon from '@mui/icons-material/Share'; +import axios from "axios"; +import { Box } from '@mui/system'; +import ThumbUpIcon from '@mui/icons-material/ThumbUp'; +import BasicMenu from './DeletePost'; +import { Comment, ExpandMore } from '@mui/icons-material'; +import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined'; +import { Context } from './PostContext'; +import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; +import { styled } from "@mui/material/styles"; + +const CustomWidthTooltip = styled(({ className, ...props }) => ( + +))({ + [`& .${tooltipClasses.tooltip}`]: { + fontSize: 30, + } +}); + +const MediaPost = () => { + const { user, setUser } = useContext(Context); + const [expanded, setExpanded] = React.useState(false); + + const [comment, setComment] = useState("") + + const onChangeHandle = (e) => { + setComment(e.currentTarget.value); + + } + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + + const handleFormSubmit = (event) => { + event.preventDefault(); + + // check if the value is empty + if (comment.trim().length === 0) { + alert("Please enter a value!"); + return; + } + + // create a new todo + const comm = { + id: v4, + comment: comment, + } + + // add todo to the state + setUser([comm, ...user]); + + // clear the value of task + setComment(""); + }; + + const longText = " 👍 😂 😍 🥰 😡"; + + + return ( +
    + + + {user.map((user) => ( + + + + R + + } + action={ + + } + title={user.username} + subheader="September 14, 2016" + + + /> + + + + + {user.video_disc} + + + + + + + {user.likes} + + + + + +

    Like

    +     +     + + + + +

    Comment

    +     + + +

    Like

    +     +     + + + + R + + } + title={ +
    + + +
    + + + } + + /> + {/* {user.comment.map((comments) => ( +
  • + {comments.commented} +
    • + ))} */} +     +     + + + ))} +     +
    + ) +} + +export default MediaPost + + + diff --git a/facebook-clone/src/components/Popup.js b/facebook-clone/src/components/Popup.js new file mode 100644 index 0000000..c6660ca --- /dev/null +++ b/facebook-clone/src/components/Popup.js @@ -0,0 +1,15 @@ +import React from "react"; +import styles from "./popup.module.css"; + +const Popup = props => { + return ( +
    +
    + x + {props.content} +
    +
    + ); +}; + +export default Popup; \ No newline at end of file diff --git a/facebook-clone/src/components/PostContext.jsx b/facebook-clone/src/components/PostContext.jsx new file mode 100644 index 0000000..7696931 --- /dev/null +++ b/facebook-clone/src/components/PostContext.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const Context = React.createContext(); + +export const ContextProvider = ({ children }) => { + const [user, setUser] = React.useState([]); + const [select, setSelect] = React.useState("default"); + + return ( + {children} + ) +} \ No newline at end of file diff --git a/facebook-clone/src/components/PostInput.jsx b/facebook-clone/src/components/PostInput.jsx new file mode 100644 index 0000000..b0be087 --- /dev/null +++ b/facebook-clone/src/components/PostInput.jsx @@ -0,0 +1,32 @@ +import React from 'react' +import Popup from './Popup'; + +const PostInput = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const togglePopup = () => { + setIsOpen(!isOpen); + } + + return
    + + + + + + + {isOpen && + Design your Popup + + } + handleClose={togglePopup} + />} +
    +} + +export default PostInput \ No newline at end of file diff --git a/facebook-clone/src/components/popup.module.css b/facebook-clone/src/components/popup.module.css new file mode 100644 index 0000000..aebe55d --- /dev/null +++ b/facebook-clone/src/components/popup.module.css @@ -0,0 +1,38 @@ +.popup_box { + position: fixed; + background: #00000050; + width: 100%; + height: 100vh; + top: 0; + left: 0; + } + + .box { + position: relative; + width: 70%; + margin: 0 auto; + height: auto; + max-height: 70vh; + margin-top: calc(100vh - 85vh - 20px); + background: #fff; + border-radius: 4px; + padding: 20px; + border: 1px solid #999; + overflow: auto; + } + + .close_icon { + content: 'x'; + cursor: pointer; + position: fixed; + right: calc(15% - 30px); + top: calc(100vh - 85vh - 33px); + background: #ededed; + width: 25px; + height: 25px; + border-radius: 50%; + line-height: 20px; + text-align: center; + border: 1px solid #999; + font-size: 20px; + } \ No newline at end of file diff --git a/facebook-clone/src/components/style.module.css b/facebook-clone/src/components/style.module.css new file mode 100644 index 0000000..690c2b0 --- /dev/null +++ b/facebook-clone/src/components/style.module.css @@ -0,0 +1,5 @@ +.inputBox{ + padding: 10px; + width: 80%; + border-radius: 20px; +} \ No newline at end of file diff --git a/facebook-clone/src/index.js b/facebook-clone/src/index.js index ef2edf8..2dc4752 100644 --- a/facebook-clone/src/index.js +++ b/facebook-clone/src/index.js @@ -3,10 +3,16 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { StyledEngineProvider } from '@mui/material'; +import { ContextProvider } from './components/PostContext'; ReactDOM.render( + + + + , document.getElementById('root') );