Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
K
Kinolist
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
mn5-ahmed
Kinolist
Commits
f3dd3e0c
Commit
f3dd3e0c
authored
2 months ago
by
naavi.ahmed
Browse files
Options
Downloads
Patches
Plain Diff
Redesigned app to act as a todo list and added validation for empty tasks.
parent
9af61f94
No related branches found
No related tags found
No related merge requests found
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
app/index.tsx
+53
-26
53 additions, 26 deletions
app/index.tsx
components/Task.tsx
+6
-5
6 additions, 5 deletions
components/Task.tsx
with
59 additions
and
31 deletions
app/index.tsx
+
53
−
26
View file @
f3dd3e0c
...
...
@@ -8,74 +8,101 @@ import {
TextInput
,
TouchableOpacity
,
}
from
'
react-native
'
;
import
Film
from
'
components/
Film
'
;
import
Task
from
'
components/
Task
'
;
import
Cog
from
'
assets/98446.svg
'
;
import
{
useRouter
}
from
'
expo-router
'
;
import
{
useColorScheme
}
from
'
nativewind
'
;
import
{
StatusBar
}
from
'
expo-status-bar
'
;
export
default
function
Index
()
{
const
[
film
,
setFilm
]
=
useState
<
string
>
(
''
);
const
[
filmEntries
,
setFilmEntries
]
=
useState
<
Array
<
string
>>
([]);
const
[
filmGrey
,
setFilmGrey
]
=
useState
<
number
>
(
1
);
type
TaskItem
=
{
text
:
string
;
greyedOut
:
boolean
;
};
const
[
task
,
setTask
]
=
useState
<
string
>
(
''
);
const
[
taskEntries
,
setTaskEntries
]
=
useState
<
TaskItem
[]
>
([]);
const
[
emptyError
,
setEmptyError
]
=
useState
(
false
);
const
router
=
useRouter
();
const
{
colorScheme
,
toggleColorScheme
}
=
useColorScheme
();
const
handleAddFilm
=
()
=>
{
const
handleAddTask
=
()
=>
{
const
trimmed
=
task
.
trim
();
if
(
!
trimmed
)
{
setEmptyError
(
true
);
return
;
}
setEmptyError
(
false
);
Keyboard
.
dismiss
();
set
Film
Entries
([...
film
Entries
,
film
]);
set
Film
(
''
);
set
Task
Entries
([...
task
Entries
,
{
text
:
trimmed
,
greyedOut
:
false
}
]);
set
Task
(
''
);
};
const
pop
Film
=
(
index
:
number
)
=>
{
const
film
sCopy
=
[...
film
Entries
];
film
sCopy
.
splice
(
index
,
1
);
set
Film
Entries
(
film
sCopy
);
const
pop
Task
=
(
index
:
number
)
=>
{
const
task
sCopy
=
[...
task
Entries
];
task
sCopy
.
splice
(
index
,
1
);
set
Task
Entries
(
task
sCopy
);
};
const
watchFilm
=
(
index
:
number
)
=>
{
setFilmGrey
(
0.2
/
filmGrey
);
const
watchTask
=
(
index
:
number
)
=>
{
setTaskEntries
(
prev
=>
prev
.
map
((
task
,
i
)
=>
i
===
index
?
{
...
task
,
greyedOut
:
!
task
.
greyedOut
}
:
task
)
);
};
return
(
<
View
className
=
"flex-1 bg-white dark:bg-neutral-900 py-10"
>
<
StatusBar
style
=
{
colorScheme
==
'
dark
'
?
'
light
'
:
'
dark
'
}
/>
{
/*
Film
Listing */
}
{
/*
task
Listing */
}
<
View
className
=
"flex-row items-center justify-between px-4 pt-4"
>
<
Text
className
=
"text-2xl font-bold dark:text-white"
>
Your
Film
s
</
Text
>
<
Text
className
=
"text-2xl font-bold dark:text-white"
>
Your
task
s
</
Text
>
<
TouchableOpacity
onPress
=
{
()
=>
router
.
navigate
(
'
./settings
'
)
}
>
<
Cog
width
=
{
24
}
height
=
{
24
}
fill
=
{
colorScheme
==
"
dark
"
?
"
#fff
"
:
"
#000
"
}
/>
</
TouchableOpacity
>
</
View
>
<
View
className
=
"pt-5 px-5"
>
<
View
className
=
"mt-8"
style
=
{
{
opacity
:
filmGrey
}
}
>
{
filmEntries
.
map
((
film
,
index
)
=>
(
<
TouchableOpacity
key
=
{
index
}
onPress
=
{
()
=>
watchFilm
(
index
)
}
>
<
Film
text
=
{
film
}
/>
<
View
className
=
"px-5"
>
<
View
className
=
"mt-8"
>
{
[...
taskEntries
]
.
map
((
task
,
i
)
=>
({
...
task
,
originalIndex
:
i
}))
.
sort
((
a
,
b
)
=>
Number
(
a
.
greyedOut
)
-
Number
(
b
.
greyedOut
))
.
map
((
task
)
=>
(
<
TouchableOpacity
key
=
{
task
.
originalIndex
}
onPress
=
{
()
=>
watchTask
(
task
.
originalIndex
)
}
>
<
Task
text
=
{
task
.
text
}
opacity
=
{
task
.
greyedOut
?
0.4
:
1
}
/>
</
TouchableOpacity
>
))
}
</
View
>
</
View
>
{
/* Create a
film
entry */
}
{
/* Create a
task
entry */
}
<
KeyboardAvoidingView
behavior
=
{
Platform
.
OS
===
'
android
'
?
'
height
'
:
'
padding
'
}
className
=
"absolute bottom-4 w-full flex-row justify-between items-center px-4"
>
<
View
className
=
"flex-row items-end justify-between"
>
<
View
className
=
"flex-1"
>
{
emptyError
&&
(
<
Text
className
=
"text-center text-red-500 mt-1 ml-3 text-sm"
>
Cannot add empty task!
</
Text
>
)
}
<
TextInput
className
=
"py-3 px-4 dark:text-white bg-gray-200 dark:bg-neutral-600 rounded-full w-[8
0
%]"
className
=
"py-3 px-4 dark:text-white bg-gray-200 dark:bg-neutral-600 rounded-full w-[
9
8%]"
placeholderTextColor
=
{
colorScheme
==
"
dark
"
?
"
white
"
:
"
black
"
}
placeholder
=
"Create a
Film
"
value
=
{
film
}
onChangeText
=
{
text
=>
set
Film
(
text
)
}
placeholder
=
"Create a
Task
"
value
=
{
task
}
onChangeText
=
{
text
=>
set
Task
(
text
)
}
/>
</
View
>
<
TouchableOpacity
onPress
=
{
handleAdd
Film
}
>
<
TouchableOpacity
onPress
=
{
handleAdd
Task
}
>
<
View
className
=
"w-14 h-14 bg-gray-200 dark:bg-neutral-600 rounded-full justify-center items-center"
>
<
Text
className
=
"text-3xl text-sky-500"
>
+
</
Text
>
</
View
>
</
TouchableOpacity
>
</
View
>
</
KeyboardAvoidingView
>
</
View
>
);
...
...
This diff is collapsed.
Click to expand it.
components/
Film
.tsx
→
components/
Task
.tsx
+
6
−
5
View file @
f3dd3e0c
import
React
from
"
react
"
;
import
{
View
,
Text
,
TouchableOpacity
}
from
"
react-native
"
;
type
Synopsis
=
{
type
TaskBox
=
{
text
:
string
;
opacity
?:
number
;
};
const
Film
=
({
text
}:
Synopsis
)
=>
{
const
Task
=
({
text
,
opacity
=
1
}:
TaskBox
)
=>
{
return
(
<
View
className
=
"bg-gray-200 p-4 rounded-xl flex-row items-center justify-between mb-5"
>
<
View
className
=
"bg-gray-200
dark:bg-neutral-600
p-4 rounded-xl flex-row items-center justify-between mb-5"
style
=
{
{
opacity
}
}
>
<
View
className
=
"flex-row items-center flex-wrap"
>
<
TouchableOpacity
className
=
"w-6 h-6 bg-sky-400 opacity-40 mr-4 rounded-sm"
/>
<
Text
className
=
"max-w-[80%]"
>
{
text
}
</
Text
>
<
Text
className
=
"
dark:text-white
max-w-[80%]"
>
{
text
}
</
Text
>
</
View
>
<
View
className
=
"w-4 h-4 border-2 border-blue-500 rounded-sm"
/>
</
View
>
);
};
export
default
Film
;
export
default
Task
;
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment