Skip to content

Commit 36e704b

Browse files
gbfonsecagbfonseca
authored
Merge pull request #55 from Calindra/EIRUNE-2051-documentar-uso-do-apollo-client
feat: add doc about apollo client and eitri-app-dependencies
2 parents 11d1c81 + b377384 commit 36e704b

18 files changed

Lines changed: 812 additions & 322 deletions

‎en/docs/assets/android-chrome-192x192.png‎

-31 KB
Binary file not shown.

‎en/docs/assets/eitri-logo.svg‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎en/docs/assets/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎en/docs/assets/logo.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎en/docs/concepts/eitri-app.md‎

Lines changed: 100 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,16 @@ In Eitri, all screens (views) and components are built using React **functional
4949
A view must export a function as `default` that receives `props` as a parameter:
5050

5151
```jsx
52-
import { Window, View, Text } from 'eitri-luminus'
52+
import { Window, View, Text } from "eitri-luminus";
5353

5454
export default function Home(props) {
55-
return (
56-
<Window>
57-
<View padding="medium">
58-
<Text fontSize="large">Welcome to Eitri!</Text>
59-
</View>
60-
</Window>
61-
)
55+
return (
56+
<Window>
57+
<View padding="medium">
58+
<Text fontSize="large">Welcome to Eitri!</Text>
59+
</View>
60+
</Window>
61+
);
6262
}
6363
```
6464

@@ -71,56 +71,54 @@ export default function Home(props) {
7171
### Complete Example with State and Requests
7272

7373
```jsx
74-
import { useEffect, useState } from "react"
75-
import { Window, View, Text, Image } from "eitri-luminus"
76-
import Eitri from "eitri-bifrost"
74+
import { useEffect, useState } from "react";
75+
import { Window, View, Text, Image } from "eitri-luminus";
76+
import Eitri from "eitri-bifrost";
7777

7878
export default function Products(props) {
79-
const [products, setProducts] = useState([])
80-
const [loading, setLoading] = useState(true)
81-
82-
useEffect(() => {
83-
loadProducts()
84-
}, [])
85-
86-
const loadProducts = async () => {
87-
try {
88-
const response = await Eitri.http.get(
89-
"https://api.example.com/products"
90-
)
91-
setProducts(response.data)
92-
} catch (error) {
93-
console.error("Error loading products:", error)
94-
} finally {
95-
setLoading(false)
96-
}
97-
}
98-
99-
if (loading) {
100-
return (
101-
<Window>
102-
<Text>Loading...</Text>
103-
</Window>
104-
)
79+
const [products, setProducts] = useState([]);
80+
const [loading, setLoading] = useState(true);
81+
82+
useEffect(() => {
83+
loadProducts();
84+
}, []);
85+
86+
const loadProducts = async () => {
87+
try {
88+
const response = await Eitri.http.get("https://api.example.com/products");
89+
setProducts(response.data);
90+
} catch (error) {
91+
console.error("Error loading products:", error);
92+
} finally {
93+
setLoading(false);
10594
}
95+
};
10696

97+
if (loading) {
10798
return (
108-
<Window>
109-
{products.map((product) => (
110-
<View
111-
key={product.id}
112-
display="flex"
113-
direction="column"
114-
marginTop="medium"
115-
padding="medium"
116-
>
117-
<Image src={product.imageUrl} width={320} height={320} />
118-
<Text fontSize="large">{product.title}</Text>
119-
<Text>{product.description}</Text>
120-
</View>
121-
))}
122-
</Window>
123-
)
99+
<Window>
100+
<Text>Loading...</Text>
101+
</Window>
102+
);
103+
}
104+
105+
return (
106+
<Window>
107+
{products.map((product) => (
108+
<View
109+
key={product.id}
110+
display="flex"
111+
direction="column"
112+
marginTop="medium"
113+
padding="medium"
114+
>
115+
<Image src={product.imageUrl} width={320} height={320} />
116+
<Text fontSize="large">{product.title}</Text>
117+
<Text>{product.description}</Text>
118+
</View>
119+
))}
120+
</Window>
121+
);
124122
}
125123
```
126124

@@ -135,19 +133,17 @@ The file `src/providers/__main__.jsx` is the main provider that wraps the entire
135133
**File: `src/providers/__main__.jsx`**
136134

137135
```jsx
138-
import { createContext } from "react"
139-
import AuthProvider from "./Auth"
136+
import { createContext } from "react";
137+
import AuthProvider from "./Auth";
140138

141-
const MainContext = createContext({})
139+
const MainContext = createContext({});
142140

143141
export default function MainProvider({ children }) {
144-
return (
145-
<MainContext.Provider value={{}}>
146-
<AuthProvider>
147-
{children}
148-
</AuthProvider>
149-
</MainContext.Provider>
150-
)
142+
return (
143+
<MainContext.Provider value={{}}>
144+
<AuthProvider>{children}</AuthProvider>
145+
</MainContext.Provider>
146+
);
151147
}
152148
```
153149

@@ -158,54 +154,54 @@ To share state between multiple views, create Providers in the `src/providers/`
158154
**Example: `src/providers/Auth.jsx`**
159155

160156
```jsx
161-
import { createContext, useContext, useState } from "react"
157+
import { createContext, useContext, useState } from "react";
162158

163-
const AuthContext = createContext({})
159+
const AuthContext = createContext({});
164160

165161
export default function AuthProvider({ children }) {
166-
const [user, setUser] = useState(null)
167-
168-
const login = async (credentials) => {
169-
// Authentication logic
170-
const userData = await authenticateUser(credentials)
171-
setUser(userData)
172-
}
173-
174-
const logout = () => {
175-
setUser(null)
176-
}
177-
178-
return (
179-
<AuthContext.Provider value={{ user, login, logout }}>
180-
{children}
181-
</AuthContext.Provider>
182-
)
162+
const [user, setUser] = useState(null);
163+
164+
const login = async (credentials) => {
165+
// Authentication logic
166+
const userData = await authenticateUser(credentials);
167+
setUser(userData);
168+
};
169+
170+
const logout = () => {
171+
setUser(null);
172+
};
173+
174+
return (
175+
<AuthContext.Provider value={{ user, login, logout }}>
176+
{children}
177+
</AuthContext.Provider>
178+
);
183179
}
184180

185181
export function useAuth() {
186-
return useContext(AuthContext)
182+
return useContext(AuthContext);
187183
}
188184
```
189185

190186
#### Using the Provider in a View
191187

192188
```jsx
193-
import { useAuth } from "@/providers/Auth"
189+
import { useAuth } from "@/providers/Auth";
194190

195191
export default function Profile(props) {
196-
const { user, logout } = useAuth()
197-
198-
return (
199-
<Window>
200-
<Text>Hello, {user?.name}</Text>
201-
<Button label="Logout" onPress={logout} />
202-
</Window>
203-
)
192+
const { user, logout } = useAuth();
193+
194+
return (
195+
<Window>
196+
<Text>Hello, {user?.name}</Text>
197+
<Button label="Logout" onPress={logout} />
198+
</Window>
199+
);
204200
}
205201
```
206202
207203
!!! tip "Import with @"
208-
Use `@/` to import files from the `src/` folder, regardless of your current view's depth level.
204+
Use `@/` to import files from the `src/` folder, regardless of your current view's depth level.
209205
210206
## Navigation
211207
@@ -258,13 +254,13 @@ Data must be destructured inside the component body from the `props` object.
258254
259255
```jsx
260256
export default function ProductDetail(props) {
261-
// URL Parameters (e.g., [id])
262-
const { id } = props.match.params
257+
// URL Parameters (e.g., [id])
258+
const { id } = props.match.params;
263259

264-
// Passed State (Navigation object)
265-
const { fromSearch } = props.location.state || {}
260+
// Passed State (Navigation object)
261+
const { fromSearch } = props.location.state || {};
266262

267-
// Logic...
263+
// Logic...
268264
}
269265
```
270266
@@ -276,24 +272,22 @@ To navigate between screens in your Eitri-App, use the `Eitri.navigation.navigat
276272
// Navigate to Home page
277273
Eitri.navigation.navigate({
278274
path: "/Home",
279-
})
275+
});
280276

281277
// Navigate to a specific product
282278
Eitri.navigation.navigate({
283279
path: "/Product/12345",
284-
})
280+
});
285281

286282
// Navigate with state
287283
Eitri.navigation.navigate({
288284
path: "/Products",
289-
state: { category: "electronics" }
290-
})
285+
state: { category: "electronics" },
286+
});
291287
```
292288
293289
For more information about available navigation methods, see the [Eitri Bifrost](eitri-bifrost.md) documentation.
294290
295-
## Shared Eitri-Apps
296-
297-
Shared Eitri-Apps are Eitri-Apps that can be imported and reused by other Eitri-Apps, allowing you to create modular and shareable solutions.
291+
## Dependencies
298292
299-
For more information, see the [Multiple Shareds](../quick-guides/multiple-shared.md) tutorial.
293+
To understand how to manage and use dependencies in your Eitri-App, refer to the [Managing Dependencies in Eitri-Apps](../quick-guides/dependencies.md) guide.

‎en/docs/quick-guides/.pages‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ nav:
77
# Development
88
- Initialization Parameters: initialization-params.md
99
- Internationalization: i18n.md
10+
- Managing Dependencies: dependencies.md
1011
- Tests: tests.md
1112
# Advanced
1213
- Multiple Shareds: multiple-shared.md
1314
- Developing Multiple Eitri-Apps: eitri-app-start.md
1415
- Bottom Bar Simulation: bottom-bar-simulation.md
1516
# Deploy
1617
- CI/CD: ci-cd.md
17-
- Semantic Release: semantic-release.md
18+
- Semantic Release: semantic-release.md

0 commit comments

Comments
 (0)