Muda APIs do modo escuro #41
Conversation
| useDarkMode, | ||
| defaultTheme, | ||
| } from './themes/DarkModeEnabledContext'; | ||
| export * from './themes'; |
There was a problem hiding this comment.
Eu queria exportar outras coisas que estavam fora do arquivo DarkModeEnabledContext, então mudei para exportar tudo do themes como nos outros exports.
| console.log(e); | ||
| }); | ||
| return currentTheme; | ||
| const setAndStoreTheme = (theme: Theme): void => { |
There was a problem hiding this comment.
Essa é a mudança principal do PR: trocar o toggle por uma função que recebe o tema.
| @@ -64,4 +64,4 @@ const DarkModeEnabledProvider: React.FC<{ children: ReactNode }> = ({ | |||
| const useDarkMode = (): DarkModeEnabledContextProps => | |||
| useContext(DarkModeEnabledContext); | |||
|
|
|||
| export { DarkModeEnabledProvider, useDarkMode, defaultTheme }; | |||
| export { DarkModeEnabledContext, DarkModeEnabledProvider, useDarkMode }; | |||
There was a problem hiding this comment.
Tirei o export do defaultTheme já que agora ele já é exportado pelo themes.ts. Adicionei o DarkModeEnabledContext para poder usar o .Consumer dele no SGLearner
| @@ -61,25 +69,18 @@ test('DarkModeEnabledProvider theme is stored at toggle', async () => { | |||
|
|
|||
| test('DarkModeEnabledProvider uses stored theme as current', async () => { | |||
There was a problem hiding this comment.
Esse teste passou a quebrar depois da mudança da toggleTheme e estava difícil de debugar e entender o que estava acontecendo.
Ele estava fazendo as queries com base no screen. Mudei para fazer elas com base no retorno do render, que é o padrão que a gente costuma usar no SGLearner, e com isso o problema deixou de acontecer. Também fiz alguns ajustes:
- percebi que o expect dentro do
setTimeoutnão estava sendo rodado na prática e troquei por umwaitFor - removi o
AsyncStorage.getIteme algunsthens que pareciam desnecessários
| @@ -1,5 +1,7 @@ | |||
| export type ThemeType = 'dark' | 'light'; | |||
| export type Theme = 'dark' | 'light'; | |||
There was a problem hiding this comment.
Removi o "Type" do nome do tipo para seguir o padrão de tipos que usamos no SGLearner
|
|
||
| export const defaultTheme: ThemeType = 'light'; | ||
| export const labelsByTheme = { dark: 'Escuro', light: 'Claro' }; |
There was a problem hiding this comment.
Adicionei essa variável para usar como base para mostrar os nomes dos modos no SGLearner.
ajuste no teste Adicionando themes no files do package.json exportando tb o context adicionando exports wip console logs corrigindo teste e tirando console logs removendo then desnecessário
gabrielguilhoto
force-pushed
the
mudanca-api-modo-escuro
branch
from
36c5b46 to
4124f8a
Compare
Contexto
Ao passar a usar as APIs do modo escuro no SGLearner, percebi que a implementação seria mais fácil se fossem feitas algumas mudanças no DS.
Mudanças
A mudança principal foi na função
toggleTheme: antes ela simplesmente trocava o tema. Mas a interface que teremos para a escolha não será simplesmente um toggle mas um modal com as opções "claro" e "escuro". Daí achei que seria mais natural se o DS fornecesse uma função para mudar para um tema fornecido. Mudei atoggleThemepara uma funçãosetTheme.Houve também outras mudanças menores, que vou explicar com comentários no PR.
Como testar
setThemee outras APIs