Merge pull request #24 from Kingscliq/edit-feature

Add Edit feature to experience form

README.md

@@ -72,3 +72,9 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `yarn build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+What the project goals are
+
+What does it look like
+
+What are the prerequisites that are required (for example node v12+)

package.json

@@ -9,15 +9,28 @@
     "axios": "^1.7.7",
     "eslint": "^8.40.0",
     "eslint-plugin-react": "^7.32.2",
-
     "husky": "^9.1.6",
     "react": "^18.2.0",
-
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.6",
     "react-scripts": "5.0.1",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.0"
   },
+  "jest": {
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!axios)"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -47,6 +60,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "babel-jest": "^29.7.0",
     "eslint-config-prettier": "^8.8.0",
     "prettier": "2.8.8"
   }

src/App.css

@@ -13,9 +13,7 @@ body {
   margin: 0 auto 20px;
   max-width: 600px;
   border-radius: 15px;
-  box-shadow:
-    0 3px 6px rgba(0, 0, 0, 0.16),
-    0 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   margin-bottom: 20px;
 
   color: black;
@@ -45,7 +43,179 @@ button:hover {
   margin-top: 10px;
 }
 
-.experienceForm .modal {
+.experienceForm {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.experienceForm .row {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.experienceForm label {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.experienceForm .fullWidth {
+  flex: 1;
+  text-align: center;
+}
+
+.experienceForm .logoPreview {
+  max-width: 100px;
+  margin-bottom: 10px;
+}
+
+.experienceForm buttonRow {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.experienceForm button {
+  padding: 8px 16px;
+  background-color: #f8b92a;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.experienceForm button:hover {
+  background-color: #dc8937;
+}
+.experienceForm .fileUploadContainer {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+.experienceForm .logoPreviewContainer {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.experienceForm .logoPreview {
+  max-width: 50px;
+  max-height: 50px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.experienceForm .fileUploadContainer label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.experienceTable {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.experienceRow {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  transition: box-shadow 0.3s ease;
+}
+
+.experienceRow:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.experienceLogo {
+  flex: 0 0 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.experienceLogo img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.noLogo {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ddd;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #777;
+}
+
+.experienceDetails {
+  flex-grow: 1;
+  padding: 0 15px;
+}
+
+.experienceTitle {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.experienceCompany {
+  font-size: 16px;
+  color: #777;
+  margin-bottom: 5px;
+}
+
+.experienceDates {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.experienceDescription {
+  font-size: 14px;
+  color: #555;
+  line-height: 1.5;
+}
+
+.experienceActions {
+  flex: 0 0 120px;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.experienceActions button {
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.experienceActions button:hover {
+  background-color: #0056b3;
+}
+
+/* .experienceForm .modal {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -173,7 +343,7 @@ button:hover {
   display: flex;
   gap: 10px;
   justify-content: center;
-}
+} */
 
 @media (min-width: 600px) {
   .experienceForm .buttonRow {