stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format commit

This commit is contained in:
Stefan Forstenlechner 2022-04-09 20:10:34 +02:00
parent 10431fdede
commit 952d4dc68e
16 changed files with 604 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
picture-gallery-client/.eslintrc.json Normal file
View File

@ -0,0 +1,51 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"ignorePatterns": [
"**/*.css"
],
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
],
"react/jsx-filename-extension": [
1,
{
"extensions": [
".jsx",
".tsx"
]
}
]
},
"settings": {
"import/resolver": {
"typescript": {
}
}
}
}

2
picture-gallery-client/.prettierignore Normal file
View File

@ -0,0 +1,2 @@
node_modules
build

242
picture-gallery-client/package-lock.json generated
View File

@ -27,6 +27,20 @@
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"typescript": "^4.6.3", "typescript": "^4.6.3",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"eslint": "^8.13.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^2.7.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"prettier": "^2.6.2"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -7036,9 +7050,9 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "8.12.0", "version": "8.13.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.12.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
"integrity": "sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==", "integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
"dependencies": { "dependencies": {
"@eslint/eslintrc": "^1.2.1", "@eslint/eslintrc": "^1.2.1",
"@humanwhocodes/config-array": "^0.9.2", "@humanwhocodes/config-array": "^0.9.2",
@ -7086,6 +7100,67 @@
"url": "https://opencollective.com/eslint" "url": "https://opencollective.com/eslint"
} }
}, },
"node_modules/eslint-config-airbnb": {
"version": "19.0.4",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
"dev": true,
"dependencies": {
"eslint-config-airbnb-base": "^15.0.0",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5"
},
"engines": {
"node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
},
"peerDependencies": {
"eslint": "^7.32.0 || ^8.2.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
},
"node_modules/eslint-config-airbnb-base": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
"integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
"dev": true,
"dependencies": {
"confusing-browser-globals": "^1.0.10",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5",
"semver": "^6.3.0"
},
"engines": {
"node": "^10.12.0 || >=12.0.0"
},
"peerDependencies": {
"eslint": "^7.32.0 || ^8.2.0",
"eslint-plugin-import": "^2.25.2"
}
},
"node_modules/eslint-config-airbnb-base/node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/eslint-config-prettier": {
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
"dev": true,
"bin": {
"eslint-config-prettier": "bin/cli.js"
},
"peerDependencies": {
"eslint": ">=7.0.0"
}
},
"node_modules/eslint-config-react-app": { "node_modules/eslint-config-react-app": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz",
@ -7130,6 +7205,26 @@
"ms": "^2.1.1" "ms": "^2.1.1"
} }
}, },
"node_modules/eslint-import-resolver-typescript": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
"integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
"dev": true,
"dependencies": {
"debug": "^4.3.4",
"glob": "^7.2.0",
"is-glob": "^4.0.3",
"resolve": "^1.22.0",
"tsconfig-paths": "^3.14.1"
},
"engines": {
"node": ">=4"
},
"peerDependencies": {
"eslint": "*",
"eslint-plugin-import": "*"
}
},
"node_modules/eslint-module-utils": { "node_modules/eslint-module-utils": {
"version": "2.7.3", "version": "2.7.3",
"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz", "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
@ -7326,6 +7421,27 @@
"eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
} }
}, },
"node_modules/eslint-plugin-prettier": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
"integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==",
"dev": true,
"dependencies": {
"prettier-linter-helpers": "^1.0.0"
},
"engines": {
"node": ">=6.0.0"
},
"peerDependencies": {
"eslint": ">=7.28.0",
"prettier": ">=2.0.0"
},
"peerDependenciesMeta": {
"eslint-config-prettier": {
"optional": true
}
}
},
"node_modules/eslint-plugin-react": { "node_modules/eslint-plugin-react": {
"version": "7.29.4", "version": "7.29.4",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
@ -7809,6 +7925,12 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
}, },
"node_modules/fast-diff": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
"dev": true
},
"node_modules/fast-glob": { "node_modules/fast-glob": {
"version": "3.2.11", "version": "3.2.11",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@ -13375,6 +13497,33 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/prettier": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-linter-helpers": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
"dev": true,
"dependencies": {
"fast-diff": "^1.1.2"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/pretty-bytes": { "node_modules/pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@ -21559,9 +21708,9 @@
} }
}, },
"eslint": { "eslint": {
"version": "8.12.0", "version": "8.13.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.12.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
"integrity": "sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==", "integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
"requires": { "requires": {
"@eslint/eslintrc": "^1.2.1", "@eslint/eslintrc": "^1.2.1",
"@humanwhocodes/config-array": "^0.9.2", "@humanwhocodes/config-array": "^0.9.2",
@ -21676,6 +21825,44 @@
} }
} }
}, },
"eslint-config-airbnb": {
"version": "19.0.4",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
"dev": true,
"requires": {
"eslint-config-airbnb-base": "^15.0.0",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5"
}
},
"eslint-config-airbnb-base": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
"integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
"dev": true,
"requires": {
"confusing-browser-globals": "^1.0.10",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5",
"semver": "^6.3.0"
},
"dependencies": {
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
}
}
},
"eslint-config-prettier": {
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
"dev": true,
"requires": {}
},
"eslint-config-react-app": { "eslint-config-react-app": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz",
@ -21716,6 +21903,19 @@
} }
} }
}, },
"eslint-import-resolver-typescript": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
"integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
"dev": true,
"requires": {
"debug": "^4.3.4",
"glob": "^7.2.0",
"is-glob": "^4.0.3",
"resolve": "^1.22.0",
"tsconfig-paths": "^3.14.1"
}
},
"eslint-module-utils": { "eslint-module-utils": {
"version": "2.7.3", "version": "2.7.3",
"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz", "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
@ -21857,6 +22057,15 @@
"minimatch": "^3.0.4" "minimatch": "^3.0.4"
} }
}, },
"eslint-plugin-prettier": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
"integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==",
"dev": true,
"requires": {
"prettier-linter-helpers": "^1.0.0"
}
},
"eslint-plugin-react": { "eslint-plugin-react": {
"version": "7.29.4", "version": "7.29.4",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
@ -22117,6 +22326,12 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
}, },
"fast-diff": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
"dev": true
},
"fast-glob": { "fast-glob": {
"version": "3.2.11", "version": "3.2.11",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@ -25977,6 +26192,21 @@
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
}, },
"prettier": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
"dev": true
},
"prettier-linter-helpers": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
"dev": true,
"requires": {
"fast-diff": "^1.1.2"
}
},
"pretty-bytes": { "pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

19
picture-gallery-client/package.json
View File

@ -28,7 +28,10 @@
"start-client": "react-scripts start", "start-client": "react-scripts start",
"build-client": "react-scripts build", "build-client": "react-scripts build",
"test-client": "react-scripts test", "test-client": "react-scripts test",
"eject-client": "react-scripts eject" "eject-client": "react-scripts eject",
"lint": "eslint src/*",
"lint:fix": "eslint --fix src/*",
"format": "prettier --write \"**/*.+(ts|tsx)\""
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
@ -47,5 +50,19 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"eslint": "^8.13.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^2.7.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"prettier": "^2.6.2"
} }
} }

29
picture-gallery-client/src/ImageGallery/ImageGallery.tsx
View File

@ -1,17 +1,22 @@
import PhotoAlbum, {Photo} from "react-photo-album"; import PhotoAlbum, { Photo } from "react-photo-album";
function ImageGallery({images}: { images: Photo[] }) { function ImageGallery({ images }: { images: Photo[] }) {
// For all kind of settings see: // For all kind of settings see:
// https://react-photo-album.com/examples/playground // https://react-photo-album.com/examples/playground
// https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground // https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
return ( return (
<> <>
{images.length === 0 {images.length === 0 ? (
? <p>No images available. You may want to add images in your root directory.</p> <p>
: <PhotoAlbum layout="masonry" photos={images}/>} No images available. You may want to add images in your root
</> directory.
); </p>
) : (
<PhotoAlbum layout="masonry" photos={images} />
)}
</>
);
} }
export default ImageGallery; export default ImageGallery;

46
picture-gallery-client/src/ImageGallery/ImageGalleryAppBar.tsx
View File

@ -4,25 +4,33 @@ import MenuIcon from "@mui/icons-material/Menu";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import AppBar from "../MuiLayout/AppBar"; import AppBar from "../MuiLayout/AppBar";
function ImageGalleryAppBar({open, drawerWidth, onDrawerOpenClick}: { open: boolean, drawerWidth: number, onDrawerOpenClick: () => void }) { function ImageGalleryAppBar({
return ( open,
<AppBar position="fixed" open={open} drawerwidth={drawerWidth}> drawerWidth,
<Toolbar> onDrawerOpenClick,
<IconButton }: {
color="inherit" open: boolean;
aria-label="open drawer" drawerWidth: number;
onClick={onDrawerOpenClick} onDrawerOpenClick: () => void;
edge="start" }) {
sx={{mr: 2, ...(open && {display: 'none'})}} return (
> <AppBar position="fixed" open={open} drawerwidth={drawerWidth}>
<MenuIcon/> <Toolbar>
</IconButton> <IconButton
<Typography variant="h6" noWrap component="div"> color="inherit"
{process.env.TITLE ?? "Image Gallery"} aria-label="open drawer"
</Typography> onClick={onDrawerOpenClick}
</Toolbar> edge="start"
</AppBar> sx={{ mr: 2, ...(open && { display: "none" }) }}
) >
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
{process.env.TITLE ?? "Image Gallery"}
</Typography>
</Toolbar>
</AppBar>
);
} }
export default ImageGalleryAppBar; export default ImageGalleryAppBar;

220
picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx
View File

@ -3,100 +3,150 @@ import DrawerHeader from "../MuiLayout/DrawerHeader";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import FolderIcon from '@mui/icons-material/Folder'; import FolderIcon from "@mui/icons-material/Folder";
import FolderOpenIcon from '@mui/icons-material/FolderOpen'; import FolderOpenIcon from "@mui/icons-material/FolderOpen";
import Divider from "@mui/material/Divider"; import Divider from "@mui/material/Divider";
import {useTheme} from "@mui/material/styles"; import { useTheme } from "@mui/material/styles";
import {TreeItem, TreeView} from '@mui/lab'; import { TreeItem, TreeView } from "@mui/lab";
import {Folders} from "./models"; import { Folders } from "./models";
import {useLocation, useNavigate} from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import {useState} from "react"; import { useState } from "react";
function getDefaultExpanded(pathname: string): string[] { function getDefaultExpanded(pathname: string): string[] {
const pathParts = [] const pathParts = [];
let curPathName = pathname.substring(0, pathname.lastIndexOf("/")) let curPathName = pathname.substring(0, pathname.lastIndexOf("/"));
while (curPathName.length > 0) { while (curPathName.length > 0) {
pathParts.push(curPathName) pathParts.push(curPathName);
curPathName = curPathName.substring(0, curPathName.lastIndexOf("/")) curPathName = curPathName.substring(0, curPathName.lastIndexOf("/"));
} }
return pathParts return pathParts;
} }
function generateTreeViewChildren(folders: Folders[], navigateAndToggleExpand: (path: string, navigationAllowed: boolean) => void) { function generateTreeViewChildren(
return (<> folders: Folders[],
{folders.map(f => { navigateAndToggleExpand: (path: string, navigationAllowed: boolean) => void
const label = f.numberOfFiles === 0 ? f.name : `${f.name} - (${f.numberOfFiles})`; ) {
const containsImages = f.numberOfFiles > 0; return (
if (f.children.length === 0) { <>
return (<TreeItem key={f.fullPath} nodeId={f.fullPath} label={label} onClick={() => navigateAndToggleExpand(f.fullPath, containsImages)}/>) {folders.map((f) => {
} const label =
return ( f.numberOfFiles === 0 ? f.name : `${f.name} - (${f.numberOfFiles})`;
<TreeItem key={f.fullPath} nodeId={f.fullPath} label={label} onClick={() => navigateAndToggleExpand(f.fullPath, containsImages)}> const containsImages = f.numberOfFiles > 0;
{generateTreeViewChildren(f.children, navigateAndToggleExpand)} if (f.children.length === 0) {
</TreeItem> return (
) <TreeItem
})} key={f.fullPath}
</>) nodeId={f.fullPath}
} label={label}
onClick={() =>
function GenerateTreeView({root}: { root: Folders }) { navigateAndToggleExpand(f.fullPath, containsImages)
const location = useLocation(); }
const navigate = useNavigate(); />
const [expanded, setExpanded] = useState<string[]>(getDefaultExpanded(location.pathname)) );
const toggleExpanded = (path: string) => {
if (expanded.includes(path)) {
setExpanded(expanded.filter(p => p !== path))
} else {
setExpanded([path, ...expanded])
} }
} return (
<TreeItem
const navigateAndToggleExpand = (path: string, navigationAllowed: boolean) => { key={f.fullPath}
if (!navigationAllowed || location.pathname === path) { nodeId={f.fullPath}
toggleExpanded(path); label={label}
return; onClick={() => navigateAndToggleExpand(f.fullPath, containsImages)}
} >
toggleExpanded(path); {generateTreeViewChildren(f.children, navigateAndToggleExpand)}
navigate(path) </TreeItem>
} );
})}
return ( </>
<TreeView );
disableSelection={true}
defaultCollapseIcon={<FolderOpenIcon/>}
defaultExpandIcon={<FolderIcon/>}
expanded={expanded}
>
<TreeItem key={root.fullPath} nodeId={root.fullPath} label={`${root.name} - (${root.numberOfFiles})`} onClick={() => navigate(root.fullPath)}/>
{root.children.length > 0 ? generateTreeViewChildren(root.children, navigateAndToggleExpand) : <></>}
</TreeView>
)
} }
function ImageGalleryDrawer({open, drawerWidth, folder, onDrawerCloseClick}: { open: boolean, drawerWidth: number, folder: Folders, onDrawerCloseClick: () => void }) { function GenerateTreeView({ root }: { root: Folders }) {
const theme = useTheme(); const location = useLocation();
return (<Drawer const navigate = useNavigate();
sx={{ const [expanded, setExpanded] = useState<string[]>(
width: drawerWidth, getDefaultExpanded(location.pathname)
flexShrink: 0, );
'& .MuiDrawer-paper': {
width: drawerWidth, const toggleExpanded = (path: string) => {
boxSizing: 'border-box', if (expanded.includes(path)) {
}, setExpanded(expanded.filter((p) => p !== path));
}} } else {
variant="persistent" setExpanded([path, ...expanded]);
anchor="left" }
open={open} };
const navigateAndToggleExpand = (
path: string,
navigationAllowed: boolean
) => {
if (!navigationAllowed || location.pathname === path) {
toggleExpanded(path);
return;
}
toggleExpanded(path);
navigate(path);
};
return (
<TreeView
disableSelection={true}
defaultCollapseIcon={<FolderOpenIcon />}
defaultExpandIcon={<FolderIcon />}
expanded={expanded}
> >
<DrawerHeader> <TreeItem
<IconButton onClick={onDrawerCloseClick}> key={root.fullPath}
{theme.direction === 'ltr' ? <ChevronLeftIcon/> : <ChevronRightIcon/>} nodeId={root.fullPath}
</IconButton> label={`${root.name} - (${root.numberOfFiles})`}
</DrawerHeader> onClick={() => navigate(root.fullPath)}
<Divider/> />
<GenerateTreeView root={folder}/> {root.children.length > 0 ? (
</Drawer>) generateTreeViewChildren(root.children, navigateAndToggleExpand)
) : (
<></>
)}
</TreeView>
);
}
function ImageGalleryDrawer({
open,
drawerWidth,
folder,
onDrawerCloseClick,
}: {
open: boolean;
drawerWidth: number;
folder: Folders;
onDrawerCloseClick: () => void;
}) {
const theme = useTheme();
return (
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
},
}}
variant="persistent"
anchor="left"
open={open}
>
<DrawerHeader>
<IconButton onClick={onDrawerCloseClick}>
{theme.direction === "ltr" ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</DrawerHeader>
<Divider />
<GenerateTreeView root={folder} />
</Drawer>
);
} }
export default ImageGalleryDrawer; export default ImageGalleryDrawer;

8
picture-gallery-client/src/ImageGallery/models.ts
View File

@ -1,6 +1,6 @@
export interface Folders { export interface Folders {
name: string name: string;
fullPath: string fullPath: string;
numberOfFiles: number numberOfFiles: number;
children: Folders[] children: Folders[];
} }

89
picture-gallery-client/src/ImageGalleryLayout.tsx
View File

@ -1,9 +1,9 @@
import {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {Photo} from "react-photo-album"; import { Photo } from "react-photo-album";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from "@mui/material/CssBaseline";
import {Folders} from "./ImageGallery/models"; import { useLocation } from "react-router-dom";
import {useLocation} from "react-router-dom"; import { Folders } from "./ImageGallery/models";
import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar"; import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar";
import DrawerHeader from "./MuiLayout/DrawerHeader"; import DrawerHeader from "./MuiLayout/DrawerHeader";
import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer"; import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer";
@ -13,43 +13,56 @@ import Main from "./MuiLayout/Main";
const drawerWidth = 240; const drawerWidth = 240;
function ImageGalleryLayout() { function ImageGalleryLayout() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [folders, setFolders] = useState<Folders>({name: "Home", fullPath: "/", numberOfFiles: 0, children: []}); const [folders, setFolders] = useState<Folders>({
const location = useLocation(); name: "Home",
fullPath: "/",
numberOfFiles: 0,
children: [],
});
const location = useLocation();
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
setOpen(true); setOpen(true);
}; };
const handleDrawerClose = () => { const handleDrawerClose = () => {
setOpen(false); setOpen(false);
}; };
const [images, setImages] = useState<Photo[]>([]); const [images, setImages] = useState<Photo[]>([]);
useEffect(() => { useEffect(() => {
fetch(`/api/${location.pathname}`) fetch(`/api/${location.pathname}`)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => setImages(data.images)); .then((data) => setImages(data.images));
}, [location.pathname]); }, [location.pathname]);
useEffect(() => { useEffect(() => {
fetch("/directories") fetch("/directories")
.then((res) => res.json()) .then((res) => res.json())
.then((data) => setFolders(data)); .then((data) => setFolders(data));
}, []); }, []);
return ( return (
<Box sx={{display: 'flex'}}> <Box sx={{ display: "flex" }}>
<CssBaseline/> <CssBaseline />
<ImageGalleryAppBar open={open} drawerWidth={drawerWidth} onDrawerOpenClick={handleDrawerOpen}/> <ImageGalleryAppBar
<ImageGalleryDrawer open={open} drawerWidth={drawerWidth} folder={folders} onDrawerCloseClick={handleDrawerClose}/> open={open}
<Main open={open} drawerwidth={drawerWidth}> drawerWidth={drawerWidth}
<DrawerHeader/> onDrawerOpenClick={handleDrawerOpen}
<ImageGallery images={images}/> />
</Main> <ImageGalleryDrawer
open={open}
</Box> drawerWidth={drawerWidth}
); folder={folders}
onDrawerCloseClick={handleDrawerClose}
/>
<Main open={open} drawerwidth={drawerWidth}>
<DrawerHeader />
<ImageGallery images={images} />
</Main>
</Box>
);
} }
export default ImageGalleryLayout; export default ImageGalleryLayout;

32
picture-gallery-client/src/MuiLayout/AppBar.tsx
View File

@ -1,24 +1,24 @@
import {styled} from "@mui/material/styles"; import { styled } from "@mui/material/styles";
import MuiAppBar from "@mui/material/AppBar"; import MuiAppBar from "@mui/material/AppBar";
const AppBar = styled(MuiAppBar, { const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open', shouldForwardProp: (prop) => prop !== "open",
})<{ })<{
open?: boolean; open?: boolean;
drawerwidth: number; drawerwidth: number;
}>(({theme, open, drawerwidth}) => ({ }>(({ theme, open, drawerwidth }) => ({
transition: theme.transitions.create(['margin', 'width'], { transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
...(open && { ...(open && {
width: `calc(100% - ${drawerwidth}px)`, width: `calc(100% - ${drawerwidth}px)`,
marginLeft: `${drawerwidth}px`, marginLeft: `${drawerwidth}px`,
transition: theme.transitions.create(['margin', 'width'], { transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut, easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}),
}), }),
}),
})); }));
export default AppBar; export default AppBar;

16
picture-gallery-client/src/MuiLayout/DrawerHeader.tsx
View File

@ -1,12 +1,12 @@
import {styled} from "@mui/material/styles"; import { styled } from "@mui/material/styles";
const DrawerHeader = styled('div')(({theme}) => ({ const DrawerHeader = styled("div")(({ theme }) => ({
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
padding: theme.spacing(0, 1), padding: theme.spacing(0, 1),
// necessary for content to be below app bar // necessary for content to be below app bar
...theme.mixins.toolbar, ...theme.mixins.toolbar,
justifyContent: 'flex-end', justifyContent: "flex-end",
})); }));
export default DrawerHeader; export default DrawerHeader;

40
picture-gallery-client/src/MuiLayout/Main.tsx
View File

@ -1,25 +1,23 @@
import {styled} from "@mui/material/styles"; import { styled } from "@mui/material/styles";
const Main = styled('main', {shouldForwardProp: (prop) => prop !== 'open'})<{ const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
open?: boolean; open?: boolean;
drawerwidth: number; drawerwidth: number;
}>( }>(({ theme, open, drawerwidth }) => ({
({theme, open, drawerwidth}) => ({ flexGrow: 1,
flexGrow: 1, padding: theme.spacing(3),
padding: theme.spacing(3), transition: theme.transitions.create("margin", {
transition: theme.transitions.create('margin', { easing: theme.transitions.easing.sharp,
easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
duration: theme.transitions.duration.leavingScreen, }),
}), marginLeft: `-${drawerwidth}px`,
marginLeft: `-${drawerwidth}px`, ...(open && {
...(open && { transition: theme.transitions.create("margin", {
transition: theme.transitions.create('margin', { easing: theme.transitions.easing.easeOut,
easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
}),
}), }),
); marginLeft: 0,
}),
}));
export default Main; export default Main;

20
picture-gallery-client/src/index.tsx
View File

@ -1,16 +1,18 @@
import React from 'react'; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import './index.css'; import "./index.css";
import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
import ImageGalleryLayout from "./ImageGalleryLayout"; import ImageGalleryLayout from "./ImageGalleryLayout";
import {BrowserRouter} from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render( root.render(
<BrowserRouter> <BrowserRouter>
<ImageGalleryLayout/> <ImageGalleryLayout />
</BrowserRouter> </BrowserRouter>
) );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))

4
picture-gallery-client/src/reportWebVitals.ts
View File

@ -1,8 +1,8 @@
import { ReportHandler } from 'web-vitals'; import { ReportHandler } from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler) => { const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);

2
picture-gallery-client/src/setupTests.ts
View File

@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import "@testing-library/jest-dom";