diff --git a/package-lock.json b/package-lock.json index f2ffaed..150212c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "bookmark", "version": "0.1.0", "dependencies": { + "@reduxjs/toolkit": "^1.8.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", @@ -17,19 +18,24 @@ "@types/react-dom": "^18.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.4.0", "react-redux": "^8.0.2", "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "react-spinners": "^0.13.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", + "redux-saga": "^1.2.1", "styled-components": "^5.3.5", "typescript": "^4.8.2", "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/redux-logger": "^3.0.9" + "@types/redux-logger": "^3.0.9", + "@types/styled-components": "^5.1.26", + "@types/uuid": "^8.3.4" } }, "node_modules/@adobe/css-tools": { @@ -3107,6 +3113,80 @@ } } }, + "node_modules/@redux-saga/core": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.2.1.tgz", + "integrity": "sha512-ABCxsZy9DwmNoYNo54ZlfuTvh77RXx8ODKpxOHeWam2dOaLGQ7vAktpfOtqSeTdYrKEORtTeWnxkGJMmPOoukg==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@redux-saga/deferred": "^1.2.1", + "@redux-saga/delay-p": "^1.2.1", + "@redux-saga/is": "^1.1.3", + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1", + "redux": "^4.0.4", + "typescript-tuple": "^2.2.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/redux-saga" + } + }, + "node_modules/@redux-saga/deferred": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.2.1.tgz", + "integrity": "sha512-cmin3IuuzMdfQjA0lG4B+jX+9HdTgHZZ+6u3jRAOwGUxy77GSlTi4Qp2d6PM1PUoTmQUR5aijlA39scWWPF31g==" + }, + "node_modules/@redux-saga/delay-p": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.2.1.tgz", + "integrity": "sha512-MdiDxZdvb1m+Y0s4/hgdcAXntpUytr9g0hpcOO1XFVyyzkrDu3SKPgBFOtHn7lhu7n24ZKIAT1qtKyQjHqRd+w==", + "dependencies": { + "@redux-saga/symbols": "^1.1.3" + } + }, + "node_modules/@redux-saga/is": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.3.tgz", + "integrity": "sha512-naXrkETG1jLRfVfhOx/ZdLj0EyAzHYbgJWkXbB3qFliPcHKiWbv/ULQryOAEKyjrhiclmr6AMdgsXFyx7/yE6Q==", + "dependencies": { + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1" + } + }, + "node_modules/@redux-saga/symbols": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.3.tgz", + "integrity": "sha512-hCx6ZvU4QAEUojETnX8EVg4ubNLBFl1Lps4j2tX7o45x/2qg37m3c6v+kSp8xjDJY+2tJw4QB3j8o8dsl1FDXg==" + }, + "node_modules/@redux-saga/types": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.2.1.tgz", + "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA==" + }, + "node_modules/@reduxjs/toolkit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz", + "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==", + "dependencies": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3958,6 +4038,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.5", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz", @@ -3976,6 +4067,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -13885,6 +13982,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -14037,6 +14142,15 @@ } } }, + "node_modules/react-spinners": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.4.tgz", + "integrity": "sha512-V6IURjYOwomhdngMfuVxBp4utCF6v21sjQ6r4K2JoKl8fwXZp1UeHMBLf+2SU+cts8hAVj9rHOJ8kdT5UqqaJw==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -14119,6 +14233,22 @@ "deep-diff": "^0.3.5" } }, + "node_modules/redux-saga": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.2.1.tgz", + "integrity": "sha512-fVCicLlf4hLP+KB6H7RHfZlZ8LdYckhaemXBB3wh//a2ESyz/z/l8ygxlm0OqPjS/PARdsQ2hIdAltxEB+NgvA==", + "dependencies": { + "@redux-saga/core": "^1.2.1" + } + }, + "node_modules/redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -14261,6 +14391,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -15697,6 +15832,27 @@ "node": ">=4.2.0" } }, + "node_modules/typescript-compare": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz", + "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==", + "dependencies": { + "typescript-logic": "^0.0.0" + } + }, + "node_modules/typescript-logic": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz", + "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==" + }, + "node_modules/typescript-tuple": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz", + "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==", + "dependencies": { + "typescript-compare": "^0.0.2" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -18880,6 +19036,64 @@ "source-map": "^0.7.3" } }, + "@redux-saga/core": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.2.1.tgz", + "integrity": "sha512-ABCxsZy9DwmNoYNo54ZlfuTvh77RXx8ODKpxOHeWam2dOaLGQ7vAktpfOtqSeTdYrKEORtTeWnxkGJMmPOoukg==", + "requires": { + "@babel/runtime": "^7.6.3", + "@redux-saga/deferred": "^1.2.1", + "@redux-saga/delay-p": "^1.2.1", + "@redux-saga/is": "^1.1.3", + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1", + "redux": "^4.0.4", + "typescript-tuple": "^2.2.1" + } + }, + "@redux-saga/deferred": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.2.1.tgz", + "integrity": "sha512-cmin3IuuzMdfQjA0lG4B+jX+9HdTgHZZ+6u3jRAOwGUxy77GSlTi4Qp2d6PM1PUoTmQUR5aijlA39scWWPF31g==" + }, + "@redux-saga/delay-p": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.2.1.tgz", + "integrity": "sha512-MdiDxZdvb1m+Y0s4/hgdcAXntpUytr9g0hpcOO1XFVyyzkrDu3SKPgBFOtHn7lhu7n24ZKIAT1qtKyQjHqRd+w==", + "requires": { + "@redux-saga/symbols": "^1.1.3" + } + }, + "@redux-saga/is": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.3.tgz", + "integrity": "sha512-naXrkETG1jLRfVfhOx/ZdLj0EyAzHYbgJWkXbB3qFliPcHKiWbv/ULQryOAEKyjrhiclmr6AMdgsXFyx7/yE6Q==", + "requires": { + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1" + } + }, + "@redux-saga/symbols": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.3.tgz", + "integrity": "sha512-hCx6ZvU4QAEUojETnX8EVg4ubNLBFl1Lps4j2tX7o45x/2qg37m3c6v+kSp8xjDJY+2tJw4QB3j8o8dsl1FDXg==" + }, + "@redux-saga/types": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.2.1.tgz", + "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA==" + }, + "@reduxjs/toolkit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz", + "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==", + "requires": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19538,6 +19752,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@types/testing-library__jest-dom": { "version": "5.14.5", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz", @@ -19556,6 +19781,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -26553,6 +26784,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26655,6 +26892,12 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-spinners": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.4.tgz", + "integrity": "sha512-V6IURjYOwomhdngMfuVxBp4utCF6v21sjQ6r4K2JoKl8fwXZp1UeHMBLf+2SU+cts8hAVj9rHOJ8kdT5UqqaJw==", + "requires": {} + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -26724,6 +26967,20 @@ "deep-diff": "^0.3.5" } }, + "redux-saga": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.2.1.tgz", + "integrity": "sha512-fVCicLlf4hLP+KB6H7RHfZlZ8LdYckhaemXBB3wh//a2ESyz/z/l8ygxlm0OqPjS/PARdsQ2hIdAltxEB+NgvA==", + "requires": { + "@redux-saga/core": "^1.2.1" + } + }, + "redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -26835,6 +27092,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -27885,6 +28147,27 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz", "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==" }, + "typescript-compare": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz", + "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==", + "requires": { + "typescript-logic": "^0.0.0" + } + }, + "typescript-logic": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz", + "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==" + }, + "typescript-tuple": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz", + "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==", + "requires": { + "typescript-compare": "^0.0.2" + } + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 1b418e0..d21c1fd 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^1.8.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", @@ -12,12 +13,15 @@ "@types/react-dom": "^18.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.4.0", "react-redux": "^8.0.2", "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "react-spinners": "^0.13.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", + "redux-saga": "^1.2.1", "styled-components": "^5.3.5", "typescript": "^4.8.2", "uuid": "^8.3.2", @@ -48,6 +52,8 @@ ] }, "devDependencies": { - "@types/redux-logger": "^3.0.9" + "@types/redux-logger": "^3.0.9", + "@types/styled-components": "^5.1.26", + "@types/uuid": "^8.3.4" } } diff --git a/src/assests/foto.svg b/src/assests/foto.svg new file mode 100644 index 0000000..a131336 --- /dev/null +++ b/src/assests/foto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assests/services/index.tsx b/src/assests/services/index.tsx new file mode 100644 index 0000000..cc9a2ed --- /dev/null +++ b/src/assests/services/index.tsx @@ -0,0 +1,5 @@ +export const URL = async () => { + const response = await fetch("https://api.github.com/users"); + const data = await response.json(); + return data; +} \ No newline at end of file diff --git a/src/custom.d.ts b/src/custom.d.ts new file mode 100644 index 0000000..1f58936 --- /dev/null +++ b/src/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: any; + export default content; + } \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..fb5c348 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,7 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +*{ + padding:0; + margin:0; } + + diff --git a/src/index.tsx b/src/index.tsx index 4f8db96..96cc81a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,7 @@ import { Provider } from 'react-redux'; import ReactDOM from 'react-dom/client'; import App from './App'; import store from './store/index'; +import "./index.css"; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement diff --git a/src/routes/Home/index.tsx b/src/routes/Home/index.tsx new file mode 100644 index 0000000..048879e --- /dev/null +++ b/src/routes/Home/index.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Home() { + const logoutHandler = ():void=>{ + localStorage.clear(); +} + return (<> +
Home Page
+ + + ) +} + +export default Home \ No newline at end of file diff --git a/src/routes/Profile/index.tsx b/src/routes/Profile/index.tsx new file mode 100644 index 0000000..e75f3f6 --- /dev/null +++ b/src/routes/Profile/index.tsx @@ -0,0 +1,100 @@ +import React, { useEffect, useState } from 'react' +import { userProfile } from '../../store/actions/index'; +import { Dispatch } from "redux"; +import { connect } from "react-redux"; +import { useSelector } from 'react-redux' +import FaSpinner from 'react-icons'; +import styled from 'styled-components'; +import { BarLoader } from "react-spinners"; +import { profileReducer } from "../../store/reducer/index" + +interface profileProps { + requestData: () => void, + users: any, + isLoading: boolean +} + + +const Container = styled.div` +display: flex; +flex-wrap: wrap; +width:100%; +height:100%; +justify-content:center; +` +const ProfileImage = styled.img` +height:80%; +width:80%; +margin-top:5%; +border-radius: 10px; +` + +const ProfileItem = styled.div` +// border:1px solid black; +width:20%; +height:100%; +display:flex; +flex-direction:column; +align-items:center; +margin-top:25px; +margin-right:35px; +border-radius: 15px; +` + +const UserDetailes = styled.div` +display:flex; +margin-top:3%; +justify-content:center; +` + +const UserName = styled.div` +width:100%; +font-size:20px; +font-weight:bold; +font-family: 'Inter', sans-serif;` + +const Profile = (props: profileProps) => { + + useEffect(() => { + props.requestData() + }, []) + + const userProfile = (url: string) => { + return window.open(url) + } + + return ( + {props.isLoading ? : (props.users.map((obj: any) => { + return ( + <> + userProfile(obj.url)}> + + + + {obj.login} + + + + + ) + })) + + } + + ) +} + +const mapStateToProps = (state: profileProps) => { + return { + users: state.users, + isLoading: state.isLoading, + } +} +const mapDispatchToProps = (dispatch: Dispatch) => { + return { + requestData: () => dispatch(userProfile()), + + } +} +export default connect(mapStateToProps, mapDispatchToProps)(Profile); + diff --git a/src/routes/Signup/index.tsx b/src/routes/Signup/index.tsx index b7faa4b..d697618 100644 --- a/src/routes/Signup/index.tsx +++ b/src/routes/Signup/index.tsx @@ -1,12 +1,19 @@ import { Dispatch } from "redux"; -import React, { useState } from "react"; +import React, { Fragment, useState } from "react"; import { connect } from "react-redux"; -import "./style.css"; -import {signUp} from "./../../store/actions/index"; +import { signUp } from "./../../store/actions/index"; + +import styled from "styled-components"; +import * as style from "./style"; + +import { FcGoogle } from "react-icons/fc"; +import { AiOutlineEye } from "react-icons/ai"; + +import foto from "./../../assests/foto.svg"; interface propsType { - signUp: (name: string,id:string,pass:string) => void; + signUp: (name: string, id: string, pass: string) => void; } const Signup = (props: propsType) => { const [name, setName] = useState(""); @@ -14,6 +21,7 @@ const Signup = (props: propsType) => { const [password, setPassword] = useState(""); const inputNameHandler = (e: React.ChangeEvent): void => { + // console.log(e.target.value); setName(e.target.value); }; @@ -25,44 +33,62 @@ const Signup = (props: propsType) => { setPassword(e.target.value); }; - const inputSubmit = ():void=>{ - - props.signUp(name, userId, password); - setPassword("....."); + const inputSubmit = (): void => { + + props.signUp(name, userId, password); + setPassword("....."); } - return ( -
- - - - -
+ return ( + + + Welcome,
Get Started + + + + + + + + + + + + + + By signing up, you agree to the Terms of Service and Privacy Policy + + Sign Up + Or with + Sign Up with Google + Already have an account?   Login + + + + ); }; const mapDispatchToProps = (dispatch: Dispatch) => { return { - signUp: (name:string,id:string,pass:string) => dispatch(signUp(name,id,pass)), + signUp: (name: string, id: string, pass: string) => dispatch(signUp(name, id, pass)), }; }; -export default connect(null, mapDispatchToProps)(Signup); \ No newline at end of file + +export default connect(null, mapDispatchToProps)(Signup); diff --git a/src/routes/Signup/style.css b/src/routes/Signup/style.css deleted file mode 100644 index 0ab60b7..0000000 --- a/src/routes/Signup/style.css +++ /dev/null @@ -1,18 +0,0 @@ -#signup_name_input{ - margin-top: 200px; - width:300px; - height:30px; - font-size: x-large; -} -#signup_id_input{ - margin-top: 200px; - width:300px; - height:30px; - font-size: x-large; -} -#signup_pass_input{ - margin-top: 200px; - width:300px; - height:30px; - font-size: x-large; -} \ No newline at end of file diff --git a/src/routes/Signup/style.tsx b/src/routes/Signup/style.tsx new file mode 100644 index 0000000..22a68ef --- /dev/null +++ b/src/routes/Signup/style.tsx @@ -0,0 +1,489 @@ +import styled from "styled-components"; + + export const StyleMainDiv = styled.div` + display:flex; + flex-direction:row;` + + export const LeftDiv = styled.div` + height:97vh; + width:55vw; + background:linear-gradient(to right,#5352ed 65%,#ffffff 65%); + // background-color:#5352ed; + display:flex; + flex-direction:column; + + @media only screen and (max-width: 600px) { + display:none; + } + ` + + export const HeadingDiv = styled.div` + height:5%; + width:70%; + // border: 1px solid black; + margin-top:50px; + padding-left:15%; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + @media only screen and (max-width: 600px) { + display:none; + } + font-size: 30.1818px; + line-height: 51px; + letter-spacing: 0.03em; + color: #FFFFFF; + ` + + export const Rightdiv = styled.div` + // background-color:whitesmoke; + height:96vh; + width:45vw; + display:flex; + // border: 1px solid black; + font-family: 'Inter', sans-serif; + justify-content:center; + @media screen and (max-width:300px){ + width:97vw; + } + @media screen and (min-width:301px) and (max-width:600px){ + width:97.5vw; + } + @media screen and (min-width:601px) and (max-width:1200px){ + width:45vw; + } + ` + + export const StyledDiv = styled.div` + display:flex; + flex-direction:column; + width:70%; + justify-content:center; + align-items:center; + // border: 1px solid black; + padding-top:15%; + @media screen and (max-width:300px){ + width:95%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px) { + width:90%; + } + @media screen and (min-width:601px) and (max-width:700px) { + width:85%; + } + @media screen and (min-width:701px) and (max-width:1050px) { + width:80%; + } + @media screen and (min-width:1050px) and (max-width:1200px) { + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px) { + width:80%; + } + ` + + export const StyledInput = styled.input` + background: #FFFFFF; + border: 1px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 70.5%; + height: 8%; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + } + ` + export const PasswordDiv = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background: #FFFFFF; + border: 2px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 71%; + height: 8%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + } + ` + export const PassInput = styled.input` + width:95%; + border:none; + height:100%; + border-radius: 16px; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:1200px){ + height:100%; + } + ` + export const EyeDiv = styled.div` + padding-right:2%; + ` + + export const CheckDiv = styled.div` + display:flex; + flex-direction:row; + width:75%; + justify-content:flex-start; + margin-top:5%; + font-style: normal; + font-weight: 350; + font-size: 79.59%; + line-height: 20px; + @media screen and (max-width:300px){ + height:5%; + width:90%; + padding-top:3%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:7%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:7%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:7%; + width:80%; + margin-top:7%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + margin-top:5%; + } + ` + + export const CheckInput = styled.input` + width: 10%; + height: 50%; + padding: 0px 0px 8px 16px; + border-radius:2px; + border-color:red; + @media screen and (max-width:300px){ + height:60%; + width:7%; + } + @media screen and (min-width:301px) and (max-width:500px) { + height:60%; + width:7%; + } + @media screen and (min-width:501px) and (max-width:600px) { + height:60%; + width:5%; + } + @media screen and (min-width:601px) and (max-width:900px) { + height:50%; + width:7%; + } + @media screen and (min-width:901px) and (max-width:1200px) { + height:50%; + width:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:50%; + width:7%; + + } + ` + + export const CheckText = styled.p` + width:100%; + height:60%; + font-family: 'Inter', sans-serif; + font-weight: 300; + font-size: 14.7959px; + line-height: 20px; + padding-left:1%; + @media screen and (max-width:1200px){ + width:100%; + } + // @media screen and (min-width:1200px) and (max-width:){ + // width:100%; + // } + ` + + export const StyledButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 2%; + background:#5352ED; + color:white; + border: 1px solid #F1F1FA; + border-radius: 16px; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 22px; + @media screen and (max-width:300px){ + height:9%; + width:90%; + margin-top:15%; + } + @media screen and (min-width:301px) and (max-width:400px){ + height:10%; + width:90%; + margin-top:10%; + } + @media screen and (min-width:401px) and (max-width:500px){ + height:10%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:93%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + margin-top:10%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:4%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:4%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + margin-top:5%; + } + ` + + + export const StyledText = styled.div` + display:flex; + justify-content:center; + width:73%; + margin-top:2%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:600px){ + margin-top:3%; + width:100%; + } + @media screen and (min-width:601px) and (max-width:1200px){ + margin-top:3%; + width:100%; + } + ` + export const GoogleButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 1%; + border: 1px solid #F1F1FA; + border-radius: 16px; + background: #FFFFFF; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 50%; + display:flex; + flex-direction:row; + align-items:center; + justify-content:center; + @media screen and (max-width:300px){ + height:10%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:10%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:9%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + }` + + export const StyleIconDiv = styled.div` + display:flex; + justify-content:center; + width:10%; + margin-top:2%; + @media screen and (max-width:300px){ + width:15%; + margin-top:1%; + margin-left:15%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:15%; + // padding-top:1%; + padding-left:25%; + } + @media screen and (min-width:501px) and (max-width:600px){ + width:10%; + // paadding-top:0.3%; + padding-left:25%; + } + @media screen and (min-width:601px) and (max-width:900px){ + width:15%; + // margin-top:0.3%; + padding-left:10%; + } + @media screen and (min-width:901px) and (max-width:1200px){ + width:15%; + margin-top:0.3%; + padding-left:20%; + } + ` + + export const StyleIconText = styled.div` + display:flex; + margin-top:2%; + @media screen and (max-width:400px){ + width:80%; + margin-top:3%; + } + @media screen and (min-width:401px) and (max-width:500px){ + width:80%; + margin-top:2%; + } + @media screen and (min-width:501px) and (max-width:600px){ + width:80%; + margin-top:1.5%; + } + @media screen and (min-width:601px) and (max-width:700px){ + width:100%; + margin-top:1.5%; + } + @media screen and (min-width:701px) and (max-width:1200px){ + width:100%; + margin-top:0.7%; + } + ` + + export const LoginText = styled.h4` + display:flex; + justify-content:center; + width:73%; + margin-top:6%; + color:#91919F; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 90.6239%; + line-height: 3%; + @media screen and (max-width:1200px){ + width:90%; + } + ` + + export const Styleimg = styled.img` + height:85%; + width:85%; + margin-left:12%; + @media screen and (min-width:600px) and (max-width:900px) { + width:85%; + height:85%; + } + @media screen and (min-width:900px) and (max-width:1200px) { + width:90%; + height:85%; + } + ` + export const StyledLink = styled.a` + text-decoration:none;` + + export const SignUpLink = styled.a` + color: #5352ED;` \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9ef2af5..874b664 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,11 +1,62 @@ -import { useRoutes } from "react-router-dom"; +import { ReactNode } from "react"; +import { Routes, Route, Navigate } from "react-router-dom"; -import { HOMEPAGE } from "../utils/paths"; +import {v4 as uuid} from "uuid"; + +import { ROOT_ROUTE, HOME_ROUTE, LOGIN_ROUTE, PROFILE_ROUTE } from "../utils/paths"; + +import Login from "./Login/index"; import Signup from "./Signup/index"; +import Home from "./Home"; +import Profile from "./Profile"; + +const routesConfig = [ + { + path: ROOT_ROUTE, + component: , + privateRoute: false, + }, + { + path: LOGIN_ROUTE, + component: , + privateRoute: false, + }, + { + path: HOME_ROUTE, + component: , + privateRoute: true, + }, + { + path: PROFILE_ROUTE, + component: , + privateRoute: false, + } +]; + +const elements = (component: ReactNode, privateRoute: boolean) => { + const isUserPresent = localStorage.getItem("Login"); + const isValidRoute = + (privateRoute && isUserPresent) || !(privateRoute || isUserPresent); + if(isValidRoute) + return component; + return +}; const AppRoutes = () => { - const routes = useRoutes([{ path: HOMEPAGE, element: }]); - return routes; + return ( + + {routesConfig.map((route) => { + const obj = { ...route }; + return ( + + ); + })} + + ); }; -export default AppRoutes; \ No newline at end of file +export default AppRoutes; diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index bd9e220..0d40e69 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -1,11 +1,339 @@ -import { Dispatch } from "redux"; -import React from "react"; -import { connect } from "react-redux"; - -function Home(){ - return( -

Home Page

- ); +import React, { Fragment } from 'react' +import { useNavigate } from 'react-router-dom'; +import { AiOutlineEye } from "react-icons/ai"; +import styled from "styled-components"; +import { FcGoogle } from "react-icons/fc"; +import foto from "./../../assests/foto.svg"; + +function Login() { + // const navigate = useNavigate(); + // const loginHandler = (): void => { + // localStorage.setItem("Login", "true"); + // navigate('/home'); + // } + + + const StyleMainDiv = styled.div` + display:flex; + flex-direction:row;` + + const LeftDiv = styled.div` + height:97vh; + width:55vw; + background:linear-gradient(to right,#5352ed 65%,#ffffff 65%); + // background-color:#5352ed; + display:flex; + flex-direction:column; + + @media only screen and (max-width: 600px) { + display:none; + } + ` + + const HeadingDiv = styled.div` + height:5%; + width:70%; + // border: 1px solid black; + margin-top:50px; + padding-left:15%; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + @media only screen and (max-width: 600px) { + display:none; + } + font-size: 30.1818px; + line-height: 51px; + letter-spacing: 0.03em; + color: #FFFFFF; + ` + + const Rightdiv = styled.div` + // background-color:whitesmoke; + height:96vh; + width:45vw; + display:flex; + // border: 1px solid black; + font-family: 'Inter', sans-serif; + justify-content:center; + @media screen and (max-width:300px){ + width:97vw; + } + @media screen and (min-width:301px) and (max-width:600px){ + width:97.5vw; + } + @media screen and (min-width:601px) and (max-width:1200px){ + width:45vw; + } + ` + + const StyledDiv = styled.div` + display:flex; + flex-direction:column; + width:70%; + justify-content:center; + align-items:center; + // border: 1px solid black; + padding-top:15%; + @media screen and (max-width:300px){ + width:95%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px) { + width:90%; + } + @media screen and (min-width:601px) and (max-width:700px) { + width:87%; + } + @media screen and (min-width:701px) and (max-width:1050px) { + width:80%; + } + @media screen and (min-width:1050px) and (max-width:1200px) { + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px) { + width:80%; + } + ` + + const StyledInput = styled.input` + background: #FFFFFF; + border: 1px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 70.5%; + height: 8%; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + } + ` + const PasswordDiv = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background: #FFFFFF; + border: 2px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 71%; + height: 8%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + } + ` + const PassInput = styled.input` + width:95%; + border:none; + height:100%; + border-radius: 16px; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:1200px){ + height:100%; + } + ` + const EyeDiv = styled.div` + padding-right:2%; + ` + + const StyledButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 9%; + margin-top: 4%; + background:#5352ED; + color:white; + border: 1px solid #F1F1FA; + border-radius: 16px; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 22px; + @media screen and (max-width:300px){ + height:9%; + width:90%; + margin-top:6%; + } + @media screen and (min-width:301px) and (max-width:400px){ + height:10%; + width:90%; + margin-top:6%; + } + @media screen and (min-width:401px) and (max-width:500px){ + height:10%; + width:90%; + margin-top:6%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + margin-top:6%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:9%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:10%; + width:80%; + margin-top:6%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:11%; + width:80%; + margin-top:6%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:11%; + width:80%; + margin-top:6%; + } + ` + const StyledText = styled.div` + display:flex; + justify-content:center; + width:73%; + margin-top:5%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:600px){ + margin-top:3%; + width:100%; + } + @media screen and (min-width:601px) and (max-width:1200px){ + margin-top:3%; + width:100%; + } + ` + + const LoginText = styled.h4` + display:flex; + justify-content:center; + width:73%; + margin-top:6%; + color:#91919F; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 500; + font-size: 13px; + line-height: 10%; + @media screen and (max-width:1200px){ + width:90%; + } + ` + + const Styleimg = styled.img` + height:85%; + width:85%; + margin-left:12%; + @media screen and (min-width:600px) and (max-width:900px) { + width:85%; + height:85%; + } + @media screen and (min-width:900px) and (max-width:1200px) { + width:90%; + height:85%; + } + ` + const StyledLink = styled.a` + text-decoration:none; + color: #5352ED;` + + const SignUpLink = styled.a` + color: #5352ED;` + + + return ( + + + Welcome,
Get Started + + + + + + + + + + Login + Forgot Password? + Don't have an account yet?   Sign Up + + + + + ) } -export default Home; \ No newline at end of file +export default Login \ No newline at end of file diff --git a/src/store/actionTypes/index.tsx b/src/store/actionTypes/index.tsx index 823b935..6273a0b 100644 --- a/src/store/actionTypes/index.tsx +++ b/src/store/actionTypes/index.tsx @@ -1,2 +1,6 @@ export const SIGNUP = "SIGNUP"; -export const LOGIN="LOGIN"; \ No newline at end of file +export const types = { + USER_PROFILE_REQUEST:"USER_PROFILE_REQUEST", + USER_PROFILE_SUCCESS:"USER_PROFILE_SUCCESS", + USER_PROFILE_FAILURE:"USER_PROFILE_FAILURE", +} \ No newline at end of file diff --git a/src/store/actions/index.tsx b/src/store/actions/index.tsx index dfe121a..019f651 100644 --- a/src/store/actions/index.tsx +++ b/src/store/actions/index.tsx @@ -1,4 +1,4 @@ -import { SIGNUP } from "../actionTypes"; +import { SIGNUP, types } from "../actionTypes"; export interface signUpTypes{ name:string, userId:string, @@ -11,4 +11,24 @@ export const signUp = (name:string,id:string,pass:string) => { userId:id, password:pass, }} +} + +export const userProfile = () => { + return { + type: types.USER_PROFILE_REQUEST, + payload:{ + data:"apple", + } + } +} +export const userProfileSuccess = (data:any) => { + return { + type: types.USER_PROFILE_SUCCESS, + data:data, + } +} +export const userProfileFailure = () => { + return { + type: types.USER_PROFILE_FAILURE, + } } \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index f0f46bb..22e0164 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,8 +1,19 @@ import {createStore,applyMiddleware} from 'redux'; +// import { configureStore } from '@reduxjs/toolkit' import {logger} from 'redux-logger'; -import {reducer} from './reducer/index'; +import {profileReducer} from './reducer/index'; +import profileSaga from './saga'; + +import createSagaMiddleware from "redux-saga"; + +const sagaMiddleware = createSagaMiddleware(); + +// const store = configureStore({ reducer: profileReducer , middleware : (applyMiddleware) => applyMiddleware(logger, sagaMiddleware)}) +const store = createStore(profileReducer, applyMiddleware(logger, sagaMiddleware)); + +sagaMiddleware.run(profileSaga); + +export default store; -const store = createStore(reducer,applyMiddleware(logger)); -export default store; \ No newline at end of file diff --git a/src/store/reducer/index.ts b/src/store/reducer/index.ts index b810363..dec5478 100644 --- a/src/store/reducer/index.ts +++ b/src/store/reducer/index.ts @@ -1,16 +1,47 @@ -import { SIGNUP } from '../actionTypes'; -import {signUpType,stateType} from './types'; +import { SIGNUP, types} from '../actionTypes'; +import { stateType, userProfileType } from './types'; -const initialState:stateType = { - users : [], +const initialState: stateType = { + users: [], + error: "errors in call", + isLoading:true, } -export const reducer = (state = initialState, action:signUpType) => { - switch(action.type){ - case SIGNUP: + +// export const reducer = (state = initialState, action:signUpType) => { +// switch(action.type){ +// case SIGNUP: +// return { +// ...state, +// users:[...state.users,{name:action.payload.name, userId:action.payload.userId, password:action.payload.password}] +// } +// default: return state; +// } +// } + +export const profileReducer = (state = initialState, action: userProfileType) => { + + switch (action.type) { + // case types.USER_PROFILE_REQUEST: + // return{ + // ...state, + // } + case types.USER_PROFILE_SUCCESS: + return { + ...state, + users: [ + ...action.data, + ], + isLoading:false, + } + case types.USER_PROFILE_FAILURE: + return { + ...state, + error: action.data, + isLoading:false, + } + default: return { ...state, - users:[...state.users,{name:action.payload.name, userId:action.payload.userId, password:action.payload.password}] } - default: return state; } } \ No newline at end of file diff --git a/src/store/reducer/types.ts b/src/store/reducer/types.ts index ce08bd8..b789c7c 100644 --- a/src/store/reducer/types.ts +++ b/src/store/reducer/types.ts @@ -1,16 +1,34 @@ -export interface signUpType { - type: "SIGNUP"; - payload: { - name: string; - userId:string, - password:string, - }; - } - +// export interface signUpType { +// type: "SIGNUP"; +// payload: { +// name: string; +// userId:string, +// password:string, +// }; +// } + export interface stateType { - users: { - name: string, - userId:string, - password:string, - }[]; - } \ No newline at end of file + users: { + name: string, + userId: string, + password: string, + }[]; + error:string, + isLoading:boolean +} + + +type a = { + type: "USER_PROFILE_SUCCESS", + data: any, +} +type b = { + type: "USER_PROFILE_FAILURE", + data: string, +} + +export type userProfileType = a | b; + + + + diff --git a/src/store/reducer/userAuth/index.tsx b/src/store/reducer/userAuth/index.tsx new file mode 100644 index 0000000..6638c4f --- /dev/null +++ b/src/store/reducer/userAuth/index.tsx @@ -0,0 +1 @@ +export{} \ No newline at end of file diff --git a/src/store/reducer/userAuth/type.tsx b/src/store/reducer/userAuth/type.tsx new file mode 100644 index 0000000..6638c4f --- /dev/null +++ b/src/store/reducer/userAuth/type.tsx @@ -0,0 +1 @@ +export{} \ No newline at end of file diff --git a/src/store/saga/index.tsx b/src/store/saga/index.tsx new file mode 100644 index 0000000..d49bbee --- /dev/null +++ b/src/store/saga/index.tsx @@ -0,0 +1,21 @@ +import {takeEvery, put} from "redux-saga/effects"; +import {types } from "../actionTypes"; +import * as actions from '../actions/index'; +import { URL } from "../../assests/services/index"; + + +function* getProfile() : any { + try{ + let data = yield URL(); + yield put(actions.userProfileSuccess(data)); + } + catch(error) + { + yield put(actions.userProfileFailure()); + } +} +function* profileSaga() { + yield takeEvery(types.USER_PROFILE_REQUEST, getProfile) +} + +export default profileSaga; \ No newline at end of file diff --git a/src/utils/paths.tsx b/src/utils/paths.tsx index 20d453c..0cea7b2 100644 --- a/src/utils/paths.tsx +++ b/src/utils/paths.tsx @@ -1 +1,4 @@ -export const HOMEPAGE = "/"; \ No newline at end of file +export const ROOT_ROUTE = "/"; +export const LOGIN_ROUTE = "/login"; +export const HOME_ROUTE = "/home"; +export const PROFILE_ROUTE="/profile"; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index a273b0c..c9a9828 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,6 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": + ["src/assests", "src/custom.d.ts","src"] }