Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
ThaliApp
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Labels
Merge Requests
4
Merge Requests
4
Analytics
Analytics
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Commits
Open sidebar
thalia
ThaliApp
Commits
633dab8c
Verified
Commit
633dab8c
authored
Feb 27, 2018
by
Sébastiaan Versteeg
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add Photos component
parent
798b52c1
Changes
30
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
30 changed files
with
1682 additions
and
818 deletions
+1682
-818
__tests__/ui/components/navigator/__snapshots__/Sidebar.spec.js.snap
...i/components/navigator/__snapshots__/Sidebar.spec.js.snap
+103
-0
__tests__/ui/screens/photos/AlbumListItem.spec.js
__tests__/ui/screens/photos/AlbumListItem.spec.js
+30
-0
__tests__/ui/screens/photos/PhotoView.spec.js
__tests__/ui/screens/photos/PhotoView.spec.js
+24
-0
__tests__/ui/screens/photos/__snapshots__/AlbumListItem.spec.js.snap
...i/screens/photos/__snapshots__/AlbumListItem.spec.js.snap
+132
-0
__tests__/ui/screens/photos/__snapshots__/PhotoView.spec.js.snap
...__/ui/screens/photos/__snapshots__/PhotoView.spec.js.snap
+56
-0
app/actions/photos.js
app/actions/photos.js
+63
-0
app/navigation.js
app/navigation.js
+4
-0
app/reducers/index.js
app/reducers/index.js
+2
-0
app/reducers/photos.js
app/reducers/photos.js
+76
-0
app/sagas/index.js
app/sagas/index.js
+2
-0
app/sagas/navigation.js
app/sagas/navigation.js
+3
-0
app/sagas/photos.js
app/sagas/photos.js
+62
-0
app/ui/components/loadingScreen/style/LoadingScreen.js
app/ui/components/loadingScreen/style/LoadingScreen.js
+2
-2
app/ui/components/sidebar/Sidebar.js
app/ui/components/sidebar/Sidebar.js
+8
-0
app/ui/components/sidebar/SidebarConnector.js
app/ui/components/sidebar/SidebarConnector.js
+10
-8
app/ui/components/standardHeader/StandardHeader.js
app/ui/components/standardHeader/StandardHeader.js
+4
-0
app/ui/screens/photos/AlbumDetailScreen.js
app/ui/screens/photos/AlbumDetailScreen.js
+153
-0
app/ui/screens/photos/AlbumDetailScreenContainer.js
app/ui/screens/photos/AlbumDetailScreenContainer.js
+13
-0
app/ui/screens/photos/AlbumListItem.js
app/ui/screens/photos/AlbumListItem.js
+65
-0
app/ui/screens/photos/AlbumListItemContainer.js
app/ui/screens/photos/AlbumListItemContainer.js
+17
-0
app/ui/screens/photos/AlbumsOverviewScreen.js
app/ui/screens/photos/AlbumsOverviewScreen.js
+53
-0
app/ui/screens/photos/AlbumsOverviewScreenContainer.js
app/ui/screens/photos/AlbumsOverviewScreenContainer.js
+11
-0
app/ui/screens/photos/PhotoView.js
app/ui/screens/photos/PhotoView.js
+50
-0
app/ui/screens/photos/PhotoViewContainer.js
app/ui/screens/photos/PhotoViewContainer.js
+9
-0
app/ui/screens/photos/style/AlbumDetail.js
app/ui/screens/photos/style/AlbumDetail.js
+45
-0
app/ui/screens/photos/style/AlbumListItem.js
app/ui/screens/photos/style/AlbumListItem.js
+34
-0
app/ui/screens/photos/style/AlbumsOverview.js
app/ui/screens/photos/style/AlbumsOverview.js
+26
-0
app/ui/screens/photos/style/PhotoView.js
app/ui/screens/photos/style/PhotoView.js
+18
-0
package.json
package.json
+5
-1
yarn.lock
yarn.lock
+602
-807
No files found.
__tests__/ui/components/navigator/__snapshots__/Sidebar.spec.js.snap
View file @
633dab8c
...
...
@@ -513,6 +513,109 @@ exports[`Sidebar component renders correctly 1`] = `
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "flex-start",
"padding": 8,
},
Object {
"backgroundColor": "#FFFFFF",
"borderRadius": 0,
},
Array [
Object {
"padding": 16,
},
Object {},
],
]
}
>
<Text
accessible={true}
allowFontScaling={false}
ellipsizeMode="tail"
onPress={[Function]}
style={
Array [
Object {
"color": "#313131",
"fontSize": 24,
},
Array [
Object {
"marginRight": 10,
},
Object {
"marginRight": 30,
"textAlign": "center",
"width": 28,
},
],
Object {
"fontFamily": "Material Icons",
"fontStyle": "normal",
"fontWeight": "normal",
},
]
}
>
</Text>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
"backgroundColor": "transparent",
"fontWeight": "600",
},
Object {
"color": "#313131",
},
]
}
>
Photos
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"overflow": "hidden",
},
Object {
"backgroundColor": "#FFFFFF",
"borderRadius": 0,
},
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
...
...
__tests__/ui/screens/photos/AlbumListItem.spec.js
0 → 100644
View file @
633dab8c
import
React
from
'
react
'
;
import
renderer
from
'
react-test-renderer
'
;
import
AlbumListItem
from
'
../../../../app/ui/screens/photos/AlbumListItem
'
;
describe
(
'
AlbumListItem component
'
,
()
=>
{
const
photo
=
{
file
:
{
small
:
'
http://test.local/small.png
'
,
medium
:
'
http://test.local/medium.png
'
,
large
:
'
http://test.local/large.png
'
,
full
:
'
http://test.local/full.png
'
,
},
album
:
0
,
pk
:
0
,
size
:
10
,
};
const
album
=
{
pk
:
1
,
title
:
'
Title
'
,
date
:
'
01-01-2017
'
,
cover
:
photo
,
};
it
(
'
renders correctly
'
,
()
=>
{
const
tree
=
renderer
.
create
(
<
AlbumListItem
openAlbum
=
{()
=>
{}}
album
=
{
album
}
size
=
{
20
}
/>
)
.
toJSON
();
expect
(
tree
).
toMatchSnapshot
();
});
});
__tests__/ui/screens/photos/PhotoView.spec.js
0 → 100644
View file @
633dab8c
import
React
from
'
react
'
;
import
renderer
from
'
react-test-renderer
'
;
import
PhotoView
from
'
../../../../app/ui/screens/photos/PhotoView
'
;
describe
(
'
PhotoView component
'
,
()
=>
{
const
photo
=
{
file
:
{
small
:
'
http://test.local/small.png
'
,
medium
:
'
http://test.local/medium.png
'
,
large
:
'
http://test.local/large.png
'
,
full
:
'
http://test.local/full.png
'
,
},
album
:
0
,
pk
:
0
,
size
:
10
,
};
it
(
'
renders correctly
'
,
()
=>
{
const
tree
=
renderer
.
create
(
<
PhotoView
onPress
=
{()
=>
{}}
photo
=
{
photo
}
size
=
{
20
}
token
=
"
token
"
/>
)
.
toJSON
();
expect
(
tree
).
toMatchSnapshot
();
});
});
__tests__/ui/screens/photos/__snapshots__/AlbumListItem.spec.js.snap
0 → 100644
View file @
633dab8c
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AlbumListItem component renders correctly 1`] = `
<View
style={
Array [
Object {},
Object {
"height": 20,
"width": 20,
},
]
}
>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"flex": 1,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Object {
"flex": 1,
}
}
>
<Image
source={
Object {
"uri": "http://test.local/small.png",
}
}
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"height": undefined,
"width": undefined,
},
undefined,
]
}
/>
<BVLinearGradient
colors={
Array [
5570560,
4278190080,
]
}
endPoint={undefined}
locations={null}
startPoint={undefined}
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 0.6,
"position": "absolute",
"right": 0,
"top": "50%",
}
}
/>
<View
style={
Object {
"bottom": 4,
"left": 6,
"position": "absolute",
"right": 6,
}
}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Object {
"backgroundColor": "transparent",
"color": "#FFFFFF",
"fontSize": 12,
}
}
>
Title
</Text>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Object {
"backgroundColor": "transparent",
"color": "#FFFFFF",
"fontSize": 10,
}
}
>
01-01-17
</Text>
</View>
</View>
</View>
</View>
`;
__tests__/ui/screens/photos/__snapshots__/PhotoView.spec.js.snap
0 → 100644
View file @
633dab8c
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PhotoView component renders correctly 1`] = `
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={Object {}}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {},
Object {
"height": 20,
"width": 20,
},
]
}
>
<Image
source={
Object {
"headers": Object {
"Authorization": "Token token",
},
"uri": "http://test.local/small.png",
}
}
style={
Array [
Object {},
Object {
"height": 20,
"width": 20,
},
]
}
/>
</View>
</View>
`;
app/actions/photos.js
0 → 100644
View file @
633dab8c
export
const
PHOTOS_ALBUMS_OPEN
=
'
PHOTOS_ALBUMS_OPEN
'
;
export
const
PHOTOS_ALBUMS_SUCCESS
=
'
PHOTOS_ALBUMS_SUCCESS
'
;
export
const
PHOTOS_ALBUMS_FAILURE
=
'
PHOTOS_ALBUMS_FAILURE
'
;
export
const
PHOTOS_ALBUMS_FETCHING
=
'
PHOTOS_ALBUMS_FETCHING
'
;
export
const
PHOTOS_ALBUM_OPEN
=
'
PHOTOS_ALBUM_OPEN
'
;
export
const
PHOTOS_ALBUM_SUCCESS
=
'
PHOTOS_ALBUM_SUCCESS
'
;
export
const
PHOTOS_ALBUM_FAILURE
=
'
PHOTOS_ALBUM_FAILURE
'
;
export
const
PHOTOS_ALBUM_FETCHING
=
'
PHOTOS_ALBUM_FETCHING
'
;
export
const
PHOTOS_PHOTO_SHOW
=
'
PHOTOS_PHOTO_SHOW
'
;
export
function
openAlbums
()
{
return
{
type
:
PHOTOS_ALBUMS_OPEN
,
};
}
export
function
successAlbums
(
albums
,
more
)
{
return
{
type
:
PHOTOS_ALBUMS_SUCCESS
,
payload
:
{
albums
,
more
},
};
}
export
function
failureAlbums
()
{
return
{
type
:
PHOTOS_ALBUMS_FAILURE
};
}
export
function
fetchingAlbums
()
{
return
{
type
:
PHOTOS_ALBUMS_FETCHING
,
};
}
export
function
openAlbum
(
pk
)
{
return
{
type
:
PHOTOS_ALBUM_OPEN
,
payload
:
{
pk
},
};
}
export
function
successAlbum
(
album
)
{
return
{
type
:
PHOTOS_ALBUM_SUCCESS
,
payload
:
album
,
};
}
export
function
failureAlbum
()
{
return
{
type
:
PHOTOS_ALBUM_FAILURE
};
}
export
function
fetchingAlbum
()
{
return
{
type
:
PHOTOS_ALBUM_FETCHING
,
};
}
export
function
showPhoto
(
photo
)
{
return
{
type
:
PHOTOS_PHOTO_SHOW
,
payload
:
photo
,
};
}
app/navigation.js
View file @
633dab8c
...
...
@@ -15,6 +15,8 @@ import Profile from './ui/screens/profile/ProfileScreenConnector';
import
Pizza
from
'
./ui/screens/pizza/PizzaScreenConnector
'
;
import
Registration
from
'
./ui/screens/events/RegistrationScreenConnector
'
;
import
MemberList
from
'
./ui/screens/memberList/MemberListScreenConnector
'
;
import
Photos
from
'
./ui/screens/photos/AlbumsOverviewScreenContainer
'
;
import
PhotoAlbum
from
'
./ui/screens/photos/AlbumDetailScreenContainer
'
;
import
SplashScreen
from
'
./ui/screens/splash/SplashScreen
'
;
import
Settings
from
'
./ui/screens/settings/SettingsScreenConnector
'
;
import
EventAdmin
from
'
./ui/screens/events/EventAdminScreenConnector
'
;
...
...
@@ -24,6 +26,7 @@ const MainNavigator = createDrawerNavigator({
Welcome
,
Calendar
,
MemberList
,
Photos
,
Settings
,
},
{
contentComponent
:
Sidebar
,
...
...
@@ -34,6 +37,7 @@ const SignedInNavigator = createStackNavigator({
Event
,
Profile
,
Pizza
,
PhotoAlbum
,
Registration
,
EventAdmin
,
},
{
...
...
app/reducers/index.js
View file @
633dab8c
...
...
@@ -8,6 +8,7 @@ import pizza from './pizza';
import
registration
from
'
./registration
'
;
import
members
from
'
./members
'
;
import
settings
from
'
./settings
'
;
import
photos
from
'
./photos
'
;
export
default
combineReducers
({
session
,
...
...
@@ -19,4 +20,5 @@ export default combineReducers({
registration
,
members
,
settings
,
photos
,
});
app/reducers/photos.js
0 → 100644
View file @
633dab8c
import
*
as
photosActions
from
'
../actions/photos
'
;
import
{
PHOTO_SHOWING
}
from
'
../actions/photos
'
;
export
const
STATUS_INITIAL
=
'
initial
'
;
export
const
STATUS_SUCCESS
=
'
success
'
;
export
const
STATUS_FAILURE
=
'
failure
'
;
const
initialState
=
{
albums
:
{
status
:
STATUS_INITIAL
,
fetching
:
true
,
data
:
[],
},
album
:
{
status
:
STATUS_INITIAL
,
fetching
:
true
,
data
:
{},
selection
:
undefined
,
},
};
export
default
function
photos
(
state
=
initialState
,
action
=
{})
{
switch
(
action
.
type
)
{
case
photosActions
.
PHOTOS_ALBUMS_FETCHING
:
return
{
...
state
,
albums
:
initialState
.
albums
,
};
case
photosActions
.
PHOTOS_ALBUMS_SUCCESS
:
return
{
...
state
,
albums
:
{
status
:
STATUS_SUCCESS
,
fetching
:
false
,
data
:
action
.
payload
.
albums
,
more
:
action
.
payload
.
more
,
},
};
case
photosActions
.
PHOTOS_ALBUMS_FAILURE
:
return
{
...
state
,
albums
:
{
status
:
STATUS_FAILURE
,
fetching
:
false
,
data
:
[],
},
};
case
photosActions
.
PHOTOS_ALBUM_FETCHING
:
return
{
...
state
,
album
:
initialState
.
album
,
};
case
photosActions
.
PHOTOS_ALBUM_SUCCESS
:
return
{
...
state
,
album
:
{
status
:
STATUS_SUCCESS
,
fetching
:
false
,
data
:
action
.
payload
,
selection
:
undefined
,
},
};
case
photosActions
.
PHOTOS_ALBUM_FAILURE
:
return
{
...
state
,
album
:
{
status
:
STATUS_FAILURE
,
fetching
:
false
,
data
:
{},
selection
:
undefined
,
},
};
default
:
return
state
;
}
}
app/sagas/index.js
View file @
633dab8c
...
...
@@ -12,6 +12,7 @@ import registrationSaga from './registration';
import
deepLinkingSaga
from
'
./deepLinking
'
;
import
membersSaga
from
'
./members
'
;
import
settingsSaga
from
'
./settings
'
;
import
photosSaga
from
'
./photos
'
;
export
default
function
*
()
{
yield
all
([
...
...
@@ -23,6 +24,7 @@ export default function* () {
fork
(
calendarSaga
),
fork
(
pushNotificationsSaga
),
fork
(
pizzaSaga
),
fork
(
photosSaga
),
fork
(
registrationSaga
),
fork
(
deepLinkingSaga
),
fork
(
membersSaga
),
...
...
app/sagas/navigation.js
View file @
633dab8c
...
...
@@ -11,6 +11,7 @@ import * as membersActions from '../actions/members';
import
*
as
welcomeActions
from
'
../actions/welcome
'
;
import
{
settingsActions
}
from
'
../actions/settings
'
;
import
NavigationService
from
'
../navigation
'
;
import
*
as
photosActions
from
'
../actions/photos
'
;
function
*
navigate
(
routeName
)
{
yield
call
(
NavigationService
.
navigate
,
routeName
);
...
...
@@ -42,6 +43,8 @@ export default function* () {
yield
takeEvery
(
registrationActions
.
FIELDS
,
navigate
,
'
Registration
'
);
yield
takeEvery
(
registrationActions
.
SUCCESS
,
back
);
yield
takeEvery
(
pizzaActions
.
PIZZA
,
navigate
,
'
Pizza
'
);
yield
takeEvery
(
photosActions
.
PHOTOS_ALBUMS_OPEN
,
navigate
,
'
Photos
'
);
yield
takeEvery
(
photosActions
.
PHOTOS_ALBUM_OPEN
,
navigate
,
'
PhotoAlbum
'
);
yield
takeEvery
(
sessionActions
.
SIGNED_IN
,
navigate
,
'
SignedIn
'
);
yield
takeEvery
([
sessionActions
.
TOKEN_INVALID
,
sessionActions
.
SIGN_OUT
],
navigate
,
'
Auth
'
);
}
app/sagas/photos.js
0 → 100644
View file @
633dab8c
import
{
call
,
put
,
select
,
takeEvery
,
}
from
'
redux-saga/effects
'
;
import
{
apiRequest
,
tokenSelector
}
from
'
../utils/url
'
;
import
*
as
photosActions
from
'
../actions/photos
'
;
function
*
loadAlbums
()
{
const
token
=
yield
select
(
tokenSelector
);
yield
put
(
photosActions
.
fetchingAlbums
());
const
data
=
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
'
Content-Type
'
:
'
application/json
'
,
Authorization
:
`Token
${
token
}
`
,
},
};
const
params
=
{
limit
:
12
,
};
try
{
const
response
=
yield
call
(
apiRequest
,
'
photos/albums
'
,
data
,
params
);
yield
put
(
photosActions
.
successAlbums
(
response
.
results
,
response
.
next
));
}
catch
(
error
)
{
yield
put
(
photosActions
.
failureAlbums
());
}
}
function
*
loadAlbum
(
action
)
{
const
{
pk
}
=
action
.
payload
;
const
token
=
yield
select
(
tokenSelector
);
yield
put
(
photosActions
.
fetchingAlbum
());
const
data
=
{
method
:
'
GET
'
,
headers
:
{
Accept
:
'
application/json
'
,
'
Content-Type
'
:
'
application/json
'
,
Authorization
:
`Token
${
token
}
`
,
},
};
try
{
const
album
=
yield
call
(
apiRequest
,
`photos/albums/
${
pk
}
`
,
data
);
yield
put
(
photosActions
.
successAlbum
(
album
));
}
catch
(
error
)
{
yield
put
(
photosActions
.
failureAlbum
());
}
}
export
default
function
*
photosSaga
()
{
yield
takeEvery
(
photosActions
.
PHOTOS_ALBUMS_OPEN
,
loadAlbums
);
yield
takeEvery
(
photosActions
.
PHOTOS_ALBUM_OPEN
,
loadAlbum
);
}
app/ui/components/loadingScreen/style/LoadingScreen.js
View file @
633dab8c
import
{
StyleSheet
}
from
'
react-native
'
;