Skip to content

Commit

Permalink
chore: timer works + add map
Browse files Browse the repository at this point in the history
  • Loading branch information
Bibazavr committed Apr 9, 2022
1 parent e73bea8 commit eba9760
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 5 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"dependencies": {
"@rneui/base": "^4.0.0-rc.1",
"@rneui/themed": "^4.0.0-rc.1",
"dayjs": "^1.11.0",
"react": "17.0.2",
"react-dom": "^17.0.2",
"react-native": "0.68.0",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Кирилл и Анюта:3</title>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
Expand Down
8 changes: 5 additions & 3 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import {} from '@rneui/themed';
import {StyleSheet, Image} from 'react-native';
import {StyleSheet} from 'react-native';
import CustomHeader from './Header';
import {Map} from './map';
import {Timer} from './timer';

const App = () => {
return (
<SafeAreaView style={styles.container}>
<CustomHeader />
<Image source={{uri: require('./img/lynx.jpg'), height: 1000}} />
<Timer />
<Map />
</SafeAreaView>
);
};
Expand Down
10 changes: 10 additions & 0 deletions src/date/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import dayjs from 'dayjs';
import 'dayjs/locale/ru'; // import locale
require('dayjs/locale/ru');
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);
dayjs.locale('ru'); // use locale

const bib = dayjs;
export default bib;
26 changes: 26 additions & 0 deletions src/map/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import {Card} from '@rneui/themed';
import React from 'react';
import {StyleSheet} from 'react-native';

export const Map = () => {
return (
<Card wrapperStyle={styles.container}>
<Card.Title>Мето проведения:</Card.Title>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d657.630850947708!2d44.05336466415076!3d56.32986976350307!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x41502b3621eaca73%3A0xa46391ebd1378751!2z0K_RhdGCLdC60LvRg9CxICLQm9C10YLQviI!5e0!3m2!1sen!2sru!4v1649519097182!5m2!1sen!2sru"
width="600"
height="450"
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</Card>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
3 changes: 3 additions & 0 deletions src/timer/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import dayjs from '../date';

export const weddingDate = dayjs('07.06.2022 16:00', 'DD.MM.YYYY hh:mm', 'ru');
17 changes: 17 additions & 0 deletions src/timer/getTimeRemaining.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import dayjs from '../date';

export const getTimeRemaining = (endDate: ReturnType<typeof dayjs>) => {
const total = endDate.valueOf() - dayjs().valueOf();
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));

return {
total,
days,
hours,
minutes,
seconds,
};
};
46 changes: 46 additions & 0 deletions src/timer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import dayjs from '../date';
import {Card, Text} from '@rneui/themed';
import React, {useEffect, useState} from 'react';
import {weddingDate} from './constants';
import {getTimeRemaining} from './getTimeRemaining';
import {StyleSheet} from 'react-native';

export const Timer = () => {
const [remaining, setRemaining] = useState<
ReturnType<typeof getTimeRemaining>
>(getTimeRemaining(weddingDate));

useEffect(() => {
let countdown: number;
let timer = setInterval(() => {
countdown = weddingDate.valueOf() - dayjs().valueOf();

setRemaining(getTimeRemaining(weddingDate));
if (countdown <= 0) {
countdown = 0;
clearInterval(timer);
}
}, 1000);

return () => {
clearInterval(timer);
};
}, []);

return (
<Card wrapperStyle={styles.container}>
<Card.Title>До свадьбы осталось:</Card.Title>
<Card.Divider />
<Text>Дней: {remaining.days}</Text>
<Text>Часов: {remaining.hours}</Text>
<Text>Минут: {remaining.minutes}</Text>
<Text>Секунд: {remaining.seconds}</Text>
</Card>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
},
});
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3065,7 +3065,7 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"

dayjs@^1.8.15:
dayjs@^1.11.0, dayjs@^1.8.15:
version "1.11.0"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.0.tgz#009bf7ef2e2ea2d5db2e6583d2d39a4b5061e805"
integrity sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==
Expand Down

0 comments on commit eba9760

Please sign in to comment.