Skip to content

Commit 135f1a8

Browse files
aarabiiaarabii
committed
⚡added a hook and some basics formating
1 parent f6f1fb7 commit 135f1a8

File tree

5 files changed

+176
-80
lines changed

5 files changed

+176
-80
lines changed

‎package-lock.json

+44
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@testing-library/jest-dom": "^5.16.4",
1111
"@testing-library/react": "^13.3.0",
1212
"@testing-library/user-event": "^13.5.0",
13+
"axios": "^0.27.2",
1314
"emailjs-com": "^3.2.0",
1415
"glob-parent": "^6.0.2",
1516
"nth-check": "^2.1.1",

‎src/hooks/useFetch.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { useState, useEffect, useCallback } from "react";
2+
import axios from "axios";
3+
4+
const useFetch = (url) => {
5+
const [fetchedData, setfetchedData] = useState({
6+
data: [],
7+
isLoading: true,
8+
error: false,
9+
});
10+
11+
const cancelTokenSource = axios.CancelToken.source();
12+
13+
const fetchData = useCallback(async () => {
14+
try {
15+
const response = await axios.get(url, {
16+
cancelToken: cancelTokenSource.token,
17+
});
18+
const data = response.data;
19+
20+
if (data) {
21+
setfetchedData({
22+
data: data.results ? data.results : data,
23+
isLoading: false,
24+
error: false,
25+
});
26+
}
27+
} catch (e) {
28+
if (axios.isCancel(e)) {
29+
console.log("fetching data cancelled");
30+
} else {
31+
console.log("error:\n", e);
32+
}
33+
34+
setfetchedData({
35+
data: [],
36+
isLoading: false,
37+
error: true,
38+
});
39+
}
40+
}, [url]);
41+
42+
useEffect(() => {
43+
fetchData();
44+
return () => cancelTokenSource.cancel();
45+
}, [url, fetchData]);
46+
47+
const { data, isLoading, error } = fetchedData;
48+
return { data, isLoading, error };
49+
};
50+
51+
export default useFetch;

‎src/index.css

+75-75
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,157 @@
1-
@import url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff');
1+
@import url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
22

33
@font-face {
4-
font-family: "SFmono";
5-
src: url('http://fonts.cdnfonts.com/css/sf-mono');
4+
font-family: "SFmono";
5+
src: url("http://fonts.cdnfonts.com/css/sf-mono");
66
}
77

88
@font-face {
9-
font-family: "San Francisco";
10-
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
9+
font-family: "San Francisco";
10+
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
1111
}
1212

1313
@font-face {
14-
font-family: 'Italianno', cursive;
15-
src: url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
14+
font-family: "Italianno", cursive;
15+
src: url("https://fonts.googleapis.com/css2?family=Italianno&display=swap");
1616
}
1717

1818
* {
19-
margin: 0;
20-
padding: 0;
21-
border: 0;
22-
outline: 0;
23-
box-sizing: border-box;
24-
list-style: none;
25-
text-decoration: none;
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
outline: 0;
23+
box-sizing: border-box;
24+
list-style: none;
25+
text-decoration: none;
2626
}
2727

2828
*::-webkit-scrollbar {
29-
display: none;
29+
display: none;
3030
}
3131

3232
:root {
33-
--color-bg: #1f1f38;
34-
--color-bg-variant: #2c2c6c;
35-
--color-primary: #4db5ff;
36-
--color-primary-variant: rgba(77, 181, 255, 0.4);
37-
--color-white: #ffffff;
38-
--color-light: rgba(255, 255, 255, 0.6);
39-
--color-light-gray: #dbdbdb;
33+
--color-bg: #1f1f38;
34+
--color-bg-variant: #2c2c6c;
35+
--color-primary: #4db5ff;
36+
--color-primary-variant: rgba(77, 181, 255, 0.4);
37+
--color-white: #ffffff;
38+
--color-light: rgba(255, 255, 255, 0.6);
39+
--color-light-gray: #dbdbdb;
4040

41-
--transition: all 400ms ease;
41+
--transition: all 400ms ease;
4242

43-
--container-width-lg: 75%;
44-
--container-width-md: 86%;
45-
--container-width-ms: 90%;
43+
--container-width-lg: 75%;
44+
--container-width-md: 86%;
45+
--container-width-ms: 90%;
4646
}
4747

4848
html {
49-
scroll-behavior: smooth;
49+
scroll-behavior: smooth;
5050
}
5151

5252
body {
53-
font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, sans-serif;;
54-
background: var(--color-bg-variant);
55-
color: var(--color-white);
56-
line-height: 1,7;
57-
background-image: url('./assets/othersPics/bgTexturn2.png');
53+
font-family: "San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;
54+
background: var(--color-bg-variant);
55+
color: var(--color-white);
56+
line-height: 1, 7;
57+
background-image: url("./assets/othersPics/bgTexturn2.png");
5858
}
5959

6060
/* ==================== GENERAL STYLES ==================== */
6161

6262
.container {
63-
width: var(--container-width-lg);
64-
margin: 0 auto;
63+
width: var(--container-width-lg);
64+
margin: 0 auto;
6565
}
6666

6767
h1,
6868
h2,
6969
h3,
7070
h4,
7171
h5 {
72-
font-weight: 500;
72+
font-weight: 500;
7373
}
7474

7575
h1 {
76-
font-size: 2.5rem;
76+
font-size: 2.5rem;
7777
}
7878

7979
section {
80-
margin-top: 8rem;
80+
margin-top: 8rem;
8181
}
8282

8383
section > h2,
8484
section > h5 {
85-
text-align: center;
86-
color: var(--color-light);
85+
text-align: center;
86+
color: var(--color-light);
8787
}
8888

8989
section > h2 {
90-
color: var(--color-primary);
91-
margin-bottom: 3rem;
90+
color: var(--color-primary);
91+
margin-bottom: 3rem;
9292
}
9393

9494
.text-light {
95-
color: var(--color-light);
95+
color: var(--color-light);
9696
}
9797

9898
a {
99-
color: var(--color-primary);
100-
transition: var(--transition);
99+
color: var(--color-primary);
100+
transition: var(--transition);
101101
}
102102

103103
a:hover {
104-
color: var(--color-white);
104+
color: var(--color-white);
105105
}
106106

107107
.btn {
108-
width: max-content;
109-
display: inline-block;
110-
color: var(--color-primary);
111-
padding: 0.75rem 1.2rem;
112-
border-radius: 0.4rem;
113-
cursor: pointer;
114-
border: 1px solid var(--color-primary);
115-
transition: var(--transition);
108+
width: max-content;
109+
display: inline-block;
110+
color: var(--color-primary);
111+
padding: 0.75rem 1.2rem;
112+
border-radius: 0.4rem;
113+
cursor: pointer;
114+
border: 1px solid var(--color-primary);
115+
transition: var(--transition);
116116
}
117117

118118
.btn:hover {
119-
background: var(--color-white);
120-
color: var(--color-bg);
121-
border-color: transparent;
119+
background: var(--color-white);
120+
color: var(--color-bg);
121+
border-color: transparent;
122122
}
123123

124124
.btn-primary {
125-
background: var(--color-primary);
126-
color: var(--color-bg);
125+
background: var(--color-primary);
126+
color: var(--color-bg);
127127
}
128128

129129
img {
130-
display: block;
131-
width: 100%;
132-
object-fit: cover;
130+
display: block;
131+
width: 100%;
132+
object-fit: cover;
133133
}
134134

135135
/* ==================== MEDIA QUERIES (MEDIUM DEVICES) ==================== */
136136

137137
@media screen and (max-width: 1024px) {
138-
.container {
139-
width: var(--container-width-md);
140-
}
138+
.container {
139+
width: var(--container-width-md);
140+
}
141141

142-
section {
143-
margin-top: 6rem;
144-
}
142+
section {
143+
margin-top: 6rem;
144+
}
145145
}
146146

147147
/* ==================== MEDIA QUERIES (SMALL DEVICES) ==================== */
148148

149149
@media screen and (max-width: 600px) {
150-
.container {
151-
width: var(--container-width-ms);
152-
}
153-
154-
section > h2 {
155-
margin-bottom: 2rem;
156-
}
157-
}
150+
.container {
151+
width: var(--container-width-ms);
152+
}
153+
154+
section > h2 {
155+
margin-bottom: 2rem;
156+
}
157+
}

‎src/index.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
2-
import { createRoot } from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
1+
import React from "react";
2+
import { createRoot } from "react-dom/client";
3+
import "./index.css";
4+
import App from "./App";
55

6-
createRoot(document.getElementById('root')).render(<App tab="home" />);
6+
createRoot(document.getElementById("root")).render(<App tab="home" />);

0 commit comments

Comments
 (0)