├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.js
├── api.js
├── components
├── SilModal.js
├── YaziDetayi.js
├── YaziDuzenle.js
├── YaziEkle.js
├── YaziFormu.js
├── YaziListesi.js
├── YaziYorumlari.js
├── YorumFormu.js
└── YorumListesi.js
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Bu repo Redux'a cevirilmek uzere hazirlanmistir.
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-yazi-yorum-frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.5.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "axios": "^0.21.1",
10 | "react": "^16.13.1",
11 | "react-dom": "^16.13.1",
12 | "react-router-dom": "^5.2.0",
13 | "react-scripts": "3.4.1",
14 | "semantic-ui-react": "^0.88.2"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 | "eslintConfig": {
23 | "extends": "react-app"
24 | },
25 | "browserslist": {
26 | "production": [
27 | ">0.2%",
28 | "not dead",
29 | "not op_mini all"
30 | ],
31 | "development": [
32 | "last 1 chrome version",
33 | "last 1 firefox version",
34 | "last 1 safari version"
35 | ]
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reactdersleri/react-yazi-yorum-redux-base-repo/a9746bc58e98aca861c1b375ce75af37ceda7bab/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
16 |
17 |
21 |
22 |
31 | React App
32 |
33 |
34 |
35 |
36 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reactdersleri/react-yazi-yorum-redux-base-repo/a9746bc58e98aca861c1b375ce75af37ceda7bab/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reactdersleri/react-yazi-yorum-redux-base-repo/a9746bc58e98aca861c1b375ce75af37ceda7bab/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter as Router, Route } from "react-router-dom";
3 |
4 | import YaziListesi from "./components/YaziListesi";
5 | import YaziDetayi from "./components/YaziDetayi";
6 | import YaziEkle from "./components/YaziEkle";
7 | import YaziDuzenle from "./components/YaziDuzenle";
8 |
9 | function App() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
33 | {yazi.title} başlıklı yazıyı silmek istediğinizden emin
34 | misiniz?
35 |
36 | {hata && {hata}
}
37 |
38 |
39 |
42 |
50 |
51 |
52 | );
53 | };
54 |
55 | export default SilModal;
56 |
--------------------------------------------------------------------------------
/src/components/YaziDetayi.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import axios from "axios";
3 | import { api } from "../api";
4 | import YaziYorumlari from "./YaziYorumlari";
5 | import { Link, useParams, useHistory, useLocation } from "react-router-dom";
6 | import SilModal from "./SilModal";
7 |
8 | const YaziDetayi = () => {
9 | const [yaziDetayi, setYaziDetayi] = useState({});
10 | const [yorumlar, setYorumlar] = useState([]);
11 |
12 | const { id } = useParams();
13 | const history = useHistory();
14 | const location = useLocation();
15 |
16 | const handleCommentSubmit = (event, yorum) => {
17 | event.preventDefault();
18 | api()
19 | .post(`/posts/${id}/comments`, yorum)
20 | .then((response) => {
21 | setYorumlar([...yorumlar, response.data]);
22 | })
23 | .catch((error) => {
24 | console.log(error);
25 | });
26 | };
27 |
28 | useEffect(() => {
29 | axios
30 | .all([api().get(`/posts/${id}`), api().get(`/posts/${id}/comments`)])
31 | .then((responses) => {
32 | setYaziDetayi(responses[0].data);
33 | setYorumlar(responses[1].data);
34 | })
35 | .catch((error) => {
36 | console.log(error);
37 | });
38 | }, []);
39 |
40 | return (
41 |
42 | {yaziDetayi.title}
43 | {yaziDetayi.created_at}
44 |
45 |
46 | Düzenle
47 |
48 |
49 |
50 | {yaziDetayi.content}
51 |
52 |
53 | );
54 | };
55 |
56 | export default YaziDetayi;
57 |
--------------------------------------------------------------------------------
/src/components/YaziDuzenle.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import YaziFormu from "./YaziFormu";
3 | import { api } from "../api";
4 |
5 | const YaziDuzenle = (props) => {
6 | const [yazi, setYazi] = useState({});
7 | const { id } = props.match.params;
8 |
9 | useEffect(() => {
10 | api()
11 | .get(`/posts/${id}`)
12 | .then((response) => {
13 | setYazi({ title: response.data.title, content: response.data.content });
14 | });
15 | }, []);
16 |
17 | return (
18 |
19 |
Yazi Duzenleme Formu
20 |
21 |
22 | );
23 | };
24 |
25 | export default YaziDuzenle;
26 |
--------------------------------------------------------------------------------
/src/components/YaziEkle.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import YaziFormu from "./YaziFormu";
3 |
4 | const YaziEkle = () => {
5 | return (
6 |
7 |
Yazi Ekleme Formu
8 |
9 |
10 | );
11 | };
12 |
13 | export default YaziEkle;
14 |
--------------------------------------------------------------------------------
/src/components/YaziFormu.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { api } from "../api";
3 | import { useParams, useHistory } from "react-router-dom";
4 |
5 | const YaziFormu = (props) => {
6 | const [yazi, setYazi] = useState({
7 | title: "",
8 | content: "",
9 | });
10 | const [hata, setHata] = useState("");
11 |
12 | const { id } = useParams();
13 | const history = useHistory();
14 |
15 | const onInputChange = (event) =>
16 | setYazi({ ...yazi, [event.target.name]: event.target.value });
17 |
18 | const onFormSubmit = (event) => {
19 | event.preventDefault();
20 | setHata("");
21 |
22 | if (props.yazi.title) {
23 | api()
24 | .put(`/posts/${id}`, yazi)
25 | .then((response) => {
26 | console.log(response);
27 | history.push(`/posts/${id}`);
28 | })
29 | .catch((error) => {
30 | setHata("Başlık ve yazı içeriği alanları zorunludur.");
31 | });
32 | } else {
33 | api()
34 | .post("/posts", yazi)
35 | .then((response) => {
36 | history.push("/");
37 | })
38 | .catch((error) => {
39 | setHata("Başlık ve yazı içeriği alanları zorunludur.");
40 | });
41 | }
42 | };
43 |
44 | useEffect(() => {
45 | if (props.yazi?.title && props.yazi?.content) setYazi(props.yazi);
46 | }, [props.yazi]);
47 |
48 | return (
49 |
50 | {hata && (
51 |
52 |
Hata
53 |
{hata}
54 |
57 |
58 |
59 |
60 |
66 |
67 |
68 |
69 |
75 |
76 |
79 |
80 |
18 |
19 | Yazı Ekle
20 |
21 | {yaziListesi.map((yazi) => {
22 | return (
23 |
24 |
25 |
26 |
27 | {yazi.title}
28 |
29 |
{yazi.created_at}
30 |
31 |
32 | );
33 | })}{" "}
34 |
Yorum Yaz
18 |
45 |
46 | );
47 | };
48 |
49 | export default YorumFormu;
50 |
--------------------------------------------------------------------------------
/src/components/YorumListesi.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const YorumListesi = (props) => {
4 | return (
5 |
6 | Yorumlar
7 | {props.yorumlar.map((yorum) => {
8 | return (
9 |
10 |
11 | {/*
*/}
15 |
16 |
{yorum.display_name}
17 |
{yorum.body}
18 |
19 |
20 |